<div class="configSection row">
  <div class="col-md-12">
    <div>
      <span data-translate>Questionnaires</span>
      <button class="btn btn-sm btn-primary show-add-questionnaire-btn" data-ng-click="toggleAddQuestionnaire()">
        <i class="fa-solid fa-plus"></i>
        <span data-translate>Add</span>
      </button>
      <span class="custom-file">
        <label file-input="importQuestionnaire(file)" file-input-label="Import" class="file-upload btn btn-sm btn-outline-secondary"></label>
      </span>
    </div>
    <div class="configSection row" data-ng-controller="AdminQuestionnaireAddCtrl" data-ng-if="showAddQuestionnaire">
      <form id="newQuestionnaire" class="addQuestionnaire col-md-6" novalidate>
        <div class="form-group">
          <label>
            <span data-translate>Name</span>
            <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
          </label>
        <div>
          <input name="name" class="form-control" data-ng-model="new_questionnaire.name" type="text" data-ng-class="{'is-invalid': newQuestionnaire.name.$error.required}" required />
        </div>
        </div>
        <div class="form-group">
          <button id="add-questionnaire-btn" class="btn btn-primary" data-ng-disabled="newQuestionnaire.$invalid" data-ng-click="add_questionnaire(); toggleAddQuestionnaire()" type="button">
            <i class="fa-solid fa-plus"></i>
            <span data-translate>Add</span>
          </button>
        </div>
      </form>
    </div>
    <div data-ng-repeat="questionnaire in resources.questionnaires | orderBy: 'name'">
      <form id="questionnaire-{{$index}}" class="configItem" name="editQuestionnaire" data-ng-controller="AdminQuestionnaireEditorCtrl" novalidate>
        <div class="editorHeader row" data-ng-click="toggleEditing(); $event.stopPropagation();">
          <span class="col-md-7">{{questionnaire.name}}</span>
          <span class="col-md-5 clearfix">
            <span class="float-right">
              <button
                class="btn btn-sm btn-outline-secondary"
                data-ng-show="questionnaire.editable && !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_questionnaire(questionnaire)">
                <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="downloadButton btn btn-sm btn-outline-secondary"
                data-ng-click="exportQuestionnaire(questionnaire); $event.stopPropagation()">
                <i class="fa-solid fa-file-export"></i>
                <span data-translate>Export</span>
              </button>
              <button
                class="btn btn-sm btn-outline-secondary"
                data-ng-click="duplicate_questionnaire(questionnaire)">
                <i class="fa-solid fa-clone"></i>
                <span data-translate>Duplicate</span>
              </button>
              <button
                class="btn btn-sm btn-danger"
                data-ng-show="questionnaire.editable"
                data-ng-click="delete_questionnaire(questionnaire); $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">
              <div class="form-group">
                <label data-translate>Name</label>
                <input name="name" class="form-control" data-ng-model="questionnaire.name" type="text" required>
                <div class="text-danger" data-ng-show="editQuestionnaire.name.$error.required">
                  <span data-translate>This field is mandatory</span>
                </div>
              </div>
            </div>
            <div class="col-md-12" data-ng-include="'views/admin/questionnaires/steps.html'"></div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
