<div data-ng-controller="AdminSubmissionStatusCtrl" class="configSection">
  <div>
    <span data-translate>Report statuses</span>
    <button class="btn btn-sm btn-primary show-add-user-btn" data-ng-click="toggleAddStatus()">
      <i class="fa-solid fa-plus"></i>
      <span data-translate>Add</span>
    </button>
  </div>
  <div class="configSection row" data-ng-controller="AdminSubmissionStatusAddCtrl" data-ng-if="showAddStatus">
    <div data-ng-form="newSubmissionStatus" class="addSubmissionStatus col-md-6">
      <div class="form-group">
        <label>
          <span data-translate>Label</span>
          <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
        </label>
        <div data-ng-class="{'is-invalid': newSubmissionStatus.submissions_status.$error.required}">
          <input name="name" class="form-control" data-ng-model="new_submissions_status.label" type="text" required />
        </div>
      </div>
      <div class="form-group">
        <button id="add-btn" class="btn btn-primary" data-ng-disabled="newSubmissionStatus.$invalid" data-ng-click="addSubmissionStatus(); toggleAddStatus()"
          type="submit">
          <i class="fa-solid fa-plus"></i>
          <span data-translate>Add</span>
        </button>
      </div>
    </div>
  </div>
  <div data-ng-repeat="submissions_status in resources.submission_statuses">
    <div data-ng-controller="AdminSubmissionStatusEditorCtrl" class="submissionStatusList">
      <div data-ng-form="submissionStatus-{{$index}}" name="editsubmissionStatus">
        <div class="configItem">
          <div class="editorHeader row" data-ng-click="toggleEditing(); $event.stopPropagation();">
            <span class="col-md-7">{{submissions_status.label | translate}}</span>
            <span class="col-md-5 clearfix">
              <span class="float-right">
                <button data-ng-if="!$first" class="btn btn-sm btn-primary" data-ng-click="moveUp($event, $index)" data-uib-tooltip="{{'Move up' | translate}}">
                  <i class="fa-solid fa-chevron-up"></i>
                </button>
                <button data-ng-if="!$last" class="btn btn-sm btn-primary" data-ng-click="moveDown($event, $index)" data-uib-tooltip="{{'Move down' | translate}}">
                  <i class="fa-solid fa-chevron-down"></i>
                </button>
                <button class="btn btn-sm btn-outline-secondary" data-ng-show="isEditable() && !editing" data-ng-click="toggleEditing(); $event.stopPropagation();">
                  <span data-translate>Edit</span>
                </button>
                <button class="btn btn-sm btn-primary" data-ng-show="editing" data-ng-disabled="editSubmissionStatus.$invalid" data-ng-click="save_submissions_status(submissions_status); toggleEditing();">
                  <span data-translate>Save</span>
                </button>
                <button class="btn btn-sm btn-outline-secondary" data-ng-show="editing" data-ng-click="toggleEditing(); $event.stopPropagation();">
                  <span data-translate>Cancel</span>
                </button>
                <button class="btn btn-sm btn-danger" data-ng-if="!isSystemDefined(submissions_status)" data-ng-click="deleteSubmissionStatus(); $event.stopPropagation();">
                  <span data-translate>Delete</span>
                </button>
              </span>
            </span>
          </div>
          <div data-ng-if="editing">
            <hr />
            <div class="row">
              <div class="col-md-6" data-ng-if="!isSystemDefined(submissions_status)">
                <div class="form-group">
                  <label data-translate>Label</label>
                  <input name="name" class="form-control" data-ng-model="submissions_status.label" data-ng-disabled="submissions_status.system_defined" type="text" required>
                  <div class="text-danger" data-ng-show="editSubmissionStatus.name.$error.required" data-translate>This field is mandatory</div>
                </div>
              </div>
              <div class="col-md-12" data-ng-include="'views/admin/casemanagement/substatuses.html'"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
