<div id="StepsEditBox">
  <div class="row">
    <span class="col-md-8">
      <span data-translate>Steps</span>
      <button class="btn btn-sm btn-primary show-add-step-btn" data-ng-click="toggleAddStep()">
        <i class="fa-solid fa-plus"></i>
        <span data-translate>Add</span>
      </button>
    </span>
  </div>
  <div id="StepAddBox" data-ng-controller="AdminStepAddCtrl" class="row" data-ng-if="showAddStep">
    <div class="col-md-6">
      <div data-ng-form="newStep">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label data-translate>Label</label>
              <input name="label" class="form-control" data-ng-model="new_step.label" type="text" required>
              <div class="text-danger" data-ng-show="newStep.label.$error.required">
                <span data-translate>This field is mandatory</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group clearfix">
              <button id="add-step-btn" class="float-left btn btn-primary" data-ng-disabled="newStep.$invalid" data-ng-click="add_step(); toggleAddStep()">
                <i class="fa-solid fa-plus"></i>
                <span data-translate>Add</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div data-ng-if="questionnaire.steps.length == 1" data-ng-init="step = questionnaire.steps[0]" class="col-md-12">
      <div data-ng-controller="AdminStepEditorCtrl" data-ng-include="'views/admin/questionnaires/step.html'"></div>
    </div>
    <div data-ng-if="questionnaire.steps.length > 1" data-ng-repeat="step in questionnaire.steps" class="col-md-12">
      <div data-ng-controller="AdminStepEditorCtrl">
        <div class="configItem">
          <div class="editorHeader row" data-ng-click="toggleEditing(); $event.stopPropagation();">
            <span class="col-md-7">
              <span class="badge badge-primary">{{$index + 1}}</span>
              <span>{{step.label}}</span>
            </span>
            <span class="col-md-5 clearfix">
              <span class="float-right">
                <button data-ng-show="!$first" class="actionButton 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-show="!$last" class="actionButton 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="!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-click="save_step(step);">
                  <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-click="delStep(step); $event.stopPropagation();">
                  <span data-translate>Delete</span>
                </button>
              </span>
            </span>
          </div>
          <div data-ng-form="editStep" data-ng-if="editing">
            <hr />
            <div class="row">
              <div class="form-group col-md-6">
                <label data-translate>Label</label>
                <input class="form-control" data-ng-model="step.label" type="text" required />
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-6">
                <label data-translate>Description</label>
                <div>
                  <textarea class="form-control" data-ng-model="step.description"></textarea>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-12" data-ng-if="resources.node.enable_scoring_system">
                <label data-translate>Triggered by score:</label>
                <select class="form-control" data-ng-model="step.triggered_by_score" convert-to-number>
                  <option value="0" data-translate>Low</option>
                  <option value="1" data-translate>Medium</option>
                  <option value="2" data-translate>High</option>
                </select>
              </div>
              <div class="form-group col-md-12">
                <label>
                  <span data-translate>Trigger conditions</span>
                  <button class="btn btn-sm btn-primary show-add-trigger-btn" data-ng-click="toggleAddTrigger()">
                    <i class="fa-solid fa-plus"></i>
                    <span data-translate>Add</span>
                  </button>
                </label>
                <div data-ng-if="showAddTrigger" class="col-md-12">
                  <div class="form-group">
                    <select name="type" class="form-control" data-ng-model="new_trigger.field" required>
                      <option data-ng-repeat="field in parsedFields.fields" value="{{field.id}}">{{field.label}}</option>
                    </select>
                  </div>
                  <div data-ng-if="new_trigger.field" class="form-group">
                    <select name="type" class="form-control" data-ng-model="new_trigger.option" required>
                      <option data-ng-repeat="option in parsedFields.fields_by_id[new_trigger.field].options" value="{{option.id}}">{{option.label}}</option>
                    </select>
                  </div>
                  <div data-ng-if="new_trigger.field" class="form-group">
                    <input data-ng-model="new_trigger.sufficient" type="checkbox">
                    <label data-translate>Sufficient</label>
                  </div>
                  <div class="form-group">
                    <button id="add-step-btn" class="btn btn-primary" data-ng-disabled="!new_trigger.field || !new_trigger.option" data-ng-click="addTrigger()">
                      <i class="fa-solid fa-plus"></i>
                      <span data-translate>Add</span>
                    </button>
                  </div>
	        </div>
                <div data-ng-repeat="trigger in step.triggered_by_options" class="nested">
                  <button class="btn btn-sm btn-danger" data-ng-click="delTrigger(trigger)">
                    <i class="fa-solid fa-times"></i>
                  </button>
		  <span>{{parsedFields.fields_by_id[trigger.field].label}}</span>: <span>{{parsedFields.options_by_id[trigger.option].label}}</span> <span data-ng-if='trigger.sufficient'>(<span data-translate>Sufficient</span>)</span>
                </div>
              </div>
            </div>
            <div data-ng-include="'views/admin/questionnaires/step.html'"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
