<span class="fas fa-circle-notch fa-spin" ng-show="!workflow && isEdit()"></span>

<div ng-show="workflow || !isEdit()">
  <h2 ng-show="isEdit()" translate="settings.workflow.edit.edit_workflow_title" translate-values="{ name: workflow.name }"></h2>
  <h2 ng-show="!isEdit()" translate="settings.workflow.edit.add_workflow_title"></h2>

  <form class="form-horizontal" name="editWorkflowForm" novalidate>
    <div class="form-group" ng-class="{ 'has-error': !editWorkflowForm.name.$valid && editWorkflowForm.$dirty, success: editWorkflowForm.name.$valid }">
      <label class="col-sm-2 control-label" for="inputName">{{ 'settings.workflow.edit.name' | translate }}</label>
      <div class="col-sm-7">
        <input name="name" type="text" id="inputName" required class="form-control"
               ng-minlength="3" ng-maxlength="50" ng-attr-placeholder="{{ 'settings.workflow.edit.name' | translate }}" ng-model="workflow.name"/>
      </div>

      <div class="col-sm-3">
        <span class="help-block" ng-show="editWorkflowForm.name.$error.required && editWorkflowForm.$dirty">{{ 'validation.required' | translate }}</span>
        <span class="help-block" ng-show="editWorkflowForm.name.$error.minlength && editWorkflowForm.$dirty">{{ 'validation.too_short' | translate }}</span>
        <span class="help-block" ng-show="editWorkflowForm.name.$error.maxlength && editWorkflowForm.$dirty">{{ 'validation.too_long' | translate }}</span>
      </div>
    </div>

    <div ui-sortable="sortableOptions" ng-model="workflow.steps">
      <div class="panel panel-default" ng-repeat="step in workflow.steps">
        <div class="panel-body">
          <div class="row route-step-row">
            <div class="col-xs-1 text-center">
              <div class="fas fa-arrows-alt pointer handle" ng-attr-title="{{ 'settings.workflow.edit.drag_help' | translate }}"></div>
            </div>
            <div class="col-xs-1 text-center">
              <div>{{ $index + 1 }}</div>
            </div>
            <div class="col-xs-10">
              <div class="row">
                <div class="col-xs-6 mb-10">
                  <strong>
                    {{ 'settings.workflow.edit.type' | translate }}
                    <span class="fas fa-info-circle"
                          uib-tooltip-html="'{{ 'settings.workflow.edit.target_help' | translate }}'"></span>
                  </strong>
                </div>
                <div class="col-xs-6">
                  <strong>{{ 'settings.workflow.edit.target' | translate }}</strong>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-5">
                  <div class="input-group">
                    <span class="input-group-addon">
                      <span class="fas fa-exchange-alt" ng-if="step.type == 'APPROVE'"></span>
                      <span class="fas fa-check-circle" ng-if="step.type == 'VALIDATE'"></span>
                    </span>
                    <select class="form-control" name="type-{{ $index }}" ng-model="step.type" ng-change="updateTransitions(step)" required>
                      <option value="APPROVE">{{ 'settings.workflow.edit.type_approve' | translate }}</option>
                      <option value="VALIDATE">{{ 'settings.workflow.edit.type_validate' | translate }}</option>
                    </select>
                  </div>
                </div>
                <div class="col-xs-6" ng-class="{ 'has-error': !editWorkflowForm['target-' + $index].$valid && editWorkflowForm.$dirty }">
                  <input required ng-maxlength="50" class="form-control" type="text" id="inputTarget"
                         ng-attr-placeholder="{{ 'directive.acledit.search_user_group' | translate }}" name="target-{{ $index }}" ng-model="step.target" autocomplete="off"
                         uib-typeahead="target as target.name for target in getTargetAclTypeahead($viewValue)"
                         typeahead-template-url="partial/docs/directive.typeahead.acl.html"
                         typeahead-editable="false"
                         typeahead-wait-ms="200" />
                </div>
                <div class="col-xs-1">
                  <span class="btn btn-link" ng-click="removeStep(step)">
                    <span class="fas fa-trash"></span>
                  </span>
                </div>
              </div>
              <div class="row mt-10">
                <div class="col-xs-12" ng-class="{ 'has-error': !editWorkflowForm['name-' + $index].$valid && editWorkflowForm.$dirty }">
                  <textarea type="text"
                            class="form-control"
                            required
                            ng-maxlength="200"
                            name="name-{{ $index }}"
                            ng-model="step.name"
                            ng-attr-placeholder="{{ 'settings.workflow.edit.name_placeholder' | translate }}"></textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="row mt-10">
            <div class="col-xs-2 text-center">
              <strong>{{ 'settings.workflow.edit.actions' | translate }}</strong>
            </div>
            <div class="col-xs-5" ng-repeat="transition in step.transitions">
              <div class="panel panel-default">
                <div class="panel-heading text-center">
                  <strong>{{ 'workflow_transition.' + transition.name | translate }}</strong>
                </div>
                <div class="panel-body">
                  <div ng-repeat="action in transition.actions" class="mb-10 workflow-action">
                    <p><strong>{{ 'action_type.' + action.type | translate }}</strong></p>
                    <div ng-switch="action.type" class="mb-10">
                      <div ng-switch-when="ADD_TAG">
                        <select title="{{ 'action_type.ADD_TAG' | translate }}" ng-model="action.tag" required class="form-control">
                          <option ng-repeat="tag in tags" value="{{ tag.id }}">{{ tag.name }}</option>
                        </select>
                      </div>
                      <div ng-switch-when="REMOVE_TAG">
                        <select title="{{ 'action_type.REMOVE_TAG' | translate }}" ng-model="action.tag" required class="form-control">
                          <option ng-repeat="tag in tags" value="{{ tag.id }}">{{ tag.name }}</option>
                        </select>
                      </div>
                    </div>
                    <p class="text-center">
                      <a href ng-click="removeAction(transition.actions, action)">
                        <span class="fas fa-minus-circle"></span> {{ 'settings.workflow.edit.remove_action' | translate }}
                      </a>
                    </p>
                  </div>
                  <div class="input-group">
                    <select title="Action type" class="form-control" ng-model="transition.actionType">
                      <option value="ADD_TAG">{{ 'action_type.ADD_TAG' | translate }}</option>
                      <option value="REMOVE_TAG">{{ 'action_type.REMOVE_TAG' | translate }}</option>
                      <option value="PROCESS_FILES">{{ 'action_type.PROCESS_FILES' | translate }}</option>
                    </select>
                    <span class="input-group-addon btn" ng-click="addAction(transition)">
                      <span class="fas fa-plus-circle"></span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="clearfix form-group mt-10">
      <div class="col-sm-offset-2 col-sm-10 btn-link pointer" ng-click="addStep()">
        <span class="fas fa-plus-circle"></span> {{ 'settings.workflow.edit.add_step' | translate }}
      </div>
    </div>

    <div class="clearfix form-group mt-10">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary" ng-click="edit()" ng-disabled="!editWorkflowForm.$valid">
          <span class="fas fa-pencil-alt"></span> {{ 'save' | translate }}
        </button>
        <button type="button" class="btn btn-danger" ng-click="remove()" ng-show="isEdit()">
          <span class="fas fa-trash"></span> {{ 'delete' | translate }}
        </button>
      </div>
    </div>
  </form>

  <div class="panel panel-default mt-30" ng-show="isEdit()">
    <div class="panel-body">
      <p translate="settings.workflow.edit.acl_info"></p>
      <acl-edit source="workflow.id"
                acls="workflow.acls"
                writable="workflow.writable"
                creator="workflow.creator"></acl-edit>
    </div>
  </div>
</div>