<section  *ngIf="steps" class="row">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="row align-items-center my-4">
                <div class="col">
                <h2 class="h3 mb-0 page-title">  قائمة مراحل المشروع </h2>
                </div>
            <div class="col-auto">
            <button type="button" (click)="openAddModal()" class="btn btn-primary"><span class="fe fe-file-plus fe-12 mr-2"></span>إضافة مرحلة </button>
        </div>
   </div>
<hr>


    <step-row-item 
    class=" offset-2" 
    *ngFor="let step of steps" 
    [step]="step"
    (delete)="openModal('delete', step)"
    (changeWeight)="openChangeWeightModal(step)"
    (edit)="openEditModal(step)"
    ></step-row-item>

    <div *ngIf="steps.length==0">
        للأسف هذا المروع لايحوي على أية مراحل
    </div>
    </div>
    </div>
</section>



<div class="modal   fade" id="stepModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          <h5 class="modal-title" id="modalLabel">{{ modalTitle }}</h5>

        </div>
        <div class="modal-body">
          <!-- Delete Confirmation -->
          <div *ngIf="modalMode === 'delete'">
            <p>هل أنت متأكد من أنك تريد حذف المرحلة {{ selectedItem.stepInfo.stepName }}?</p>
            <button type="button" class="btn m-4 btn-danger" (click)="delete()">حذف</button>
            <button type="button" class="btn m-4 btn-secondary" (click)="closeModal()">إلغاء</button>
          </div>
        </div>
      </div>
    </div>
  </div>