<div id="field-{{$index}}" class="fieldBox"
  data-ng-init="editing=false" data-ng-controller="AdminFieldEditorCtrl">
  <div data-ng-form="editField">
    <div class="configItem">
      <div class="editorHeader" data-ng-click="field.editable && toggleEditing(); $event.stopPropagation();">
        <div class="row">
          <span class="col-md-6">
            <span>{{field.label}}</span>
            <span class="fieldIndex badge badge-secondary" data-ng-if="field.step_id || field.fieldgroup_id">
              <span data-translate>Row</span><span>: {{field.y}}</span>
              <span data-translate>Column</span><span>: {{field.x}}</span>
              <span data-translate>Width</span><span>: {{field.width}}</span>
            </span>
            <span class="fieldType badge badge-primary">
              <span data-translate>Type</span><span>:</span>
              <span data-ng-switch="field.type" data-ng-if="!field.template_id">
                <span data-ng-switch-when="inputbox" data-translate>Single-line text input</span>
                <span data-ng-switch-when="textarea" data-translate>Multi-line text input</span>
                <span data-ng-switch-when="selectbox" data-translate>Selection box</span>
                <span data-ng-switch-when="multichoice" data-translate>Multiple choice input</span>
                <span data-ng-switch-when="checkbox" data-translate>Checkbox</span>
                <span data-ng-switch-when="fileupload" data-translate>Attachment</span>
                <span data-ng-switch-when="tos" data-translate>Terms of service</span>
                <span data-ng-switch-when="date" data-translate>Date</span>
                <span data-ng-switch-when="daterange" data-translate>Date range</span>
                <span data-ng-switch-when="fieldgroup" data-translate>Question group</span>
                <span data-ng-switch-default="default">{{field.type}}</span>
              </span>
              <span data-ng-if="field.template_id" data-translate>Template</span>
            </span>
            <span data-ng-if="field.preview" class="badge badge-default">
              <span data-uib-tooltip="{{'Preview' | translate}}"><i class="fa-solid fa-list-alt"></i></span>
            </span>
            <span data-ng-if="field.multi_entry" class="badge badge-default">
              <span data-ng-switch="field.type">
                <span data-ng-switch-when="fileupload" data-uib-tooltip="{{'Accept multiple file uploads' | translate}}"><i class="fa-solid fa-option-horizontal"></i></span>
                <span data-ng-switch-default data-uib-tooltip="{{'Accept multiple answers for the field' | translate}}"><i class="fa-solid fa-option-horizontal"></i></span>
              </span>
            </span>
            <span data-ng-if="field.required" class="badge badge-danger">
              <span data-uib-tooltip="{{'Mandatory' | translate}}"><i class="fa-solid fa-asterisk"></i></span>
            </span>
          </span>
          <span class="col-md-6 clearfix" data-ng-if="field.editable">
            <span class="float-right">
              <button class="btn btn-sm btn-outline-secondary"
                data-ng-if="!editing"
                data-ng-click="toggleEditing(); $event.stopPropagation();">
                <span data-translate>Edit</span>
              </button>
              <button class="btn btn-sm btn-primary"
                data-ng-if="editing"
                data-ng-click="save_field(field)">
                <span data-translate>Save</span>
              </button>
              <button
                class="btn btn-sm btn-outline-secondary"
                data-ng-if="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="exportQuestion(field); $event.stopPropagation()">
                <i class="fa-solid fa-file-export"></i>
                <span data-translate>Export</span>
              </button>
              <button class="btn btn-sm btn-danger"
                data-ng-if="field.editable"
		data-ng-click="delField(field); $event.stopPropagation();">
                <span data-translate>Delete</span>
              </button>
              <span data-ng-if="field.step_id || field.fieldgroup_id">
                <button class="btn btn-sm btn-primary" data-ng-click="moveLeftAndSave(field); $event.stopPropagation();" data-uib-tooltip="{{'Move left' | translate}}">
                  <i class="fa-solid fa-chevron-left"></i>
                </button>
                <button class="btn btn-sm btn-primary" data-ng-click="moveRightAndSave(field); $event.stopPropagation();" data-uib-tooltip="{{'Move right' | translate}}">
                  <i class="fa-solid fa-chevron-right"></i>
                </button>
                <button class="btn btn-sm btn-primary" data-ng-click="moveUpAndSave(field); $event.stopPropagation();" data-uib-tooltip="{{'Move up' | translate}}">
                  <i class="fa-solid fa-chevron-up"></i>
                </button>
                <button class="btn btn-sm btn-primary" data-ng-click="moveDownAndSave(field); $event.stopPropagation();" data-uib-tooltip="{{'Move down' | translate}}">
                  <i class="fa-solid fa-chevron-down"></i>
                </button>
              </span>
            </span>
          </span>
        </div>
      </div>
      <div class="fieldEditor" data-ng-if="editing">
        <hr />
        <div class="row">
          <div class="col-md-12" data-ng-if="field.editable">
            <div class="form-group" data-ng-if="field.instance !== 'reference'">
              <label data-translate>Name</label>
              <input name="label" class="form-control" data-ng-model="field.label" type="text" required />
              <div class="text-danger" data-ng-show="editField.label.$error.required">
                <span data-translate>This field is mandatory</span>
              </div>
            </div>
            <div class="form-group" data-ng-if="field.instance !== 'reference' && (field.type === 'inputbox' || field.type === 'textarea')">
              <label><span data-translate>Type</span><span>:</span></label>
              <select name="type" class="form-control" data-ng-model="field.type" required>
                <option value="inputbox" data-translate>Single-line text input</option>
                <option value="textarea" data-translate>Multi-line text input</option>
              </select>
            </div>
            <div class="form-group" data-ng-if="field.instance !== 'reference' && (field.type === 'selectbox' || field.type === 'checkbox' || field.type === 'multichoice')">
              <label><span data-translate>Type</span><span>:</span></label>
              <select name="type" class="form-control" data-ng-model="field.type" required>
                <option value="selectbox" data-translate>Selection box</option>
                <option value="multichoice" data-translate>Multiple choice input</option>
                <option value="checkbox" data-translate>Checkbox</option>
              </select>
            </div>
            <div class="form-group" data-ng-if="field.instance !== 'reference'">
              <label data-translate>Hint</label>
              <input name="hint" class="form-control" data-ng-model="field.hint" type="text">
            </div>
            <div class="form-group" data-ng-if="field.instance !== 'reference'">
              <label data-translate>Description</label>
              <textarea name="description" class="form-control" data-ng-model="field.description"></textarea>
            </div>
            <div class="form-group" data-ng-if="field.instance !== 'reference' && (field.type === 'inputbox' || field.type === 'textarea')">
              <label data-translate>Placeholder</label>
              <input name="hint" class="form-control" data-ng-model="field.placeholder" type="text">
            </div>
            <div class="form-group" data-ng-if="field.type !== 'fieldgroup'">
              <input data-ng-model="field.required" type="checkbox">
              <label data-translate>Mandatory</label>
            </div>
            <div class="form-group" data-ng-if="(field.type === 'fieldgroup' || field.type === 'fileupload') && field.template_id === ''">
              <div data-ng-switch="typeSwitch(field.type)">
                <input data-ng-model="field.multi_entry" type="checkbox">
                <label data-ng-switch-when="fileupload" data-translate>Accept multiple file uploads</label>
                <label data-ng-switch-default data-translate>Accept multiple answers</label>
              </div>
            </div>
            <div class="form-group" data-ng-if="fieldIsMarkableSubjectToPreview">
              <input data-ng-model="field.preview" type="checkbox">
              <label data-translate>Preview</label>
            </div>
            <div class="form-group">
              <label>
                <span data-translate>Width</span>
                <span>(</span><span data-translate>0 = auto</span><span>)</span>
               </label>
              <input class="form-control" data-ng-model="field.width" type="number" min="0" max="12">
            </div>
            <div class="form-group" data-ng-if="field.template_id">
              <label data-translate>Template override</label>
              <input name="template_override_id" class="form-control" data-ng-model="field.template_override_id" type="text">
            </div>
          </div>
        </div>
        <div class="row" data-ng-if="field.instance !== 'reference'">
          <div class="col-md-12">
            <div data-ng-if="field.type === 'inputbox' || field.type === 'textarea'">
              <div class="form-group">
                <label data-translate>Minimum number of input characters</label>
                <input data-ng-model="field.attrs.min_len.value" type="text" class="form-control" data-ng-disabled="!field.editable" />
                <div data-translate>Set the value to 0 to disable this feature.</div>
              </div>
              <div class="form-group">
                <label data-translate>Maximum number of input characters</label>
                <input data-ng-model="field.attrs.max_len.value" type="text" class="form-control" data-ng-disabled="!field.editable" />
                <div data-translate>Set the value to 0 to disable this feature.</div>
              </div>
              <div class="form-group">
                <label data-translate>Input validation</label>
                <select name="type" class="form-control" data-ng-model="field.attrs.input_validation.value" required>
                  <option value="none" data-translate>None</option>
                  <option value="email" data-translate>Email address</option>
                  <option value="number" data-translate>Number</option>
                  <option value="phonenumber" data-translate>Phone number</option>
                  <option value="custom" data-translate>Custom</option>
                </select>
              </div>
              <div class="form-group" data-ng-if="field.attrs.input_validation.value === 'custom'">
                <label data-translate>Regular expression</label>
                <input data-ng-model="field.attrs.regexp.value" type="text" class="form-control" data-ng-disabled="!field.editable" />
              </div>
            </div>
            <div data-ng-if="field.type === 'tos'" data-ng-disabled="!field.editable">
              <div class="form-group">
                <label data-translate>Text</label>
                <textarea data-ng-model="field.attrs.text.value" class="form-control"></textarea>
              </div>
              <div class="form-group">
                <label data-translate>Checkbox label</label>
                <input data-ng-model="field.attrs.checkbox_label.value" type="text" class="form-control" />
              </div>
              <div class="form-group">
                <input data-ng-model="field.attrs.attachment.value" type="checkbox" />
                <label data-translate>Attachment</label>
              </div>
              <div data-ng-if="field.attrs.attachment.value" class="nested">
                <div class="form-group">
                  <label data-translate>Text</label>
                  <input data-ng-model="field.attrs.attachment_text.value" type="text" class="form-control" />
                </div>
                <div class="form-group">
                  <label>URL</label>
                  <input data-ng-model="field.attrs.attachment_url.value" type="text" class="form-control" />
                </div>
              </div>
            </div>
            <div data-ng-if="field.type === 'fieldgroup'">
              <div class="form-group">
                <input data-ng-model="field.attrs.multimedia.value" type="checkbox">
                <label data-translate>Add multimedia content</label>
                <div data-ng-if="field.attrs.multimedia.value" class="nested">
                  <div class="form-group">
                    <label data-translate>Type</label>
                    <select name="type" class="form-control" data-ng-model="field.attrs.multimedia_type.value" required>
                      <option value="image" data-translate>Image</option>
                      <option value="audio" data-translate>Audio</option>
                      <option value="video" data-translate>Video</option>
                    </select>
                  </div>
                  <div class="form-group">
                    <label>URL</label>
                    <input data-ng-model="field.attrs.multimedia_url.value" type="text" class="form-control" required />
                  </div>
                </div>
              </div>
            </div>
            <div data-ng-disabled="!field.editable">
              <div data-ng-if="field.type === 'checkbox' || field.type === 'selectbox' || field.type === 'multichoice'">
                <div class="form-group">
                  <input data-ng-model="field.attrs.display_alphabetically.value" type="checkbox">
                  <label data-translate>Display options alphabetically</label>
                </div>
              </div>
              <div data-ng-if="field.type === 'date' || field.type === 'daterange'" data-ng-init="open_min_date = false; open_max_date = false">
                <div class="form-group">
                  <div uib-datepicker-popup
                       data-ng-model="field.attrs.min_date.value"
                       is-open="open_min_date"
                       show-button-bar="false"
                       data-ng-click="open_min_date = !open_min_date">
                    <label data-translate>Earliest selectable date</label>:
                    <span data-ng-show="field.attrs.min_date.value">
                      <span>{{field.attrs.min_date.value | date:'dd-MM-yyyy'}}</span>
                      <button class="btn btn-sm btn-danger"
                              data-ng-click="field.attrs.min_date.value = ''; $event.stopPropagation();">
                        <i class="fa-solid fa-times"></i>
                      </button>
                    </span>
                    <button data-ng-show="field.attrs.min_date.value === ''" type="button" class="btn btn-sm btn-outline-secondary"><i class="fa-solid fa-calendar"></i></button>
                  </div>
                </div>
                <div class="form-group">
                  <div uib-datepicker-popup
                       data-ng-model="field.attrs.max_date.value"
                       is-open="open_max_date"
                       show-button-bar="false"
                       data-ng-click="open_max_date = !open_max_date">
                    <label data-translate>Latest selectable date</label>:
                    <span data-ng-show="field.attrs.max_date.value">
                      <span>{{field.attrs.max_date.value | date:'dd-MM-yyyy'}}</span>
                      <button class="btn btn-sm btn-danger"
                              data-ng-click="field.attrs.max_date.value = ''; $event.stopPropagation();">
                        <i class="fa-solid fa-times"></i>
                      </button>
                    </span>
                    <button data-ng-show="field.attrs.max_date.value === ''" type="button" class="btn btn-sm btn-outline-secondary"><i class="fa-solid fa-calendar"></i></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" data-ng-if="field.instance === 'reference'" data-ng-switch="field.template_id">
            <div data-ng-switch-when="whistleblower_identity">
              <div class="form-group">
                <input data-ng-model="field.required" type="checkbox">
                <label data-translate>Mandatory</label>
              </div>
              <div data-ng-if="!field.required">
                <div class="form-group">
                  <label data-translate>Text shown upon negative answer</label>
                  <div>
                    <textarea class="form-control" data-ng-model="field.attrs.text_shown_upon_negative_answer.value"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group" data-ng-if="resources.node.enable_scoring_system">
              <label data-translate>Triggered by score:</label>
              <select class="form-control" data-ng-model="field.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">
              <label>
                <span data-translate>Trigger conditions</span>
                <button class="btn btn-sm btn-primary show-add-question-btn" data-ng-click="toggleAddTrigger()">
                  <i class="fa-solid fa-plus"></i>
                  <span data-translate>Add</span>
                </button>
              </label>
              <div data-ng-if="showAddTrigger">
                <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 field.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>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group" data-ng-if="showOptions(field)">
              <label>
                <span data-translate>Options</span>
                <button class="btn btn-sm btn-primary show-add-question-btn" data-ng-click="addOption()">
                  <i class="fa-solid fa-plus"></i>
                  <span data-translate>Add</span>
                </button>
              </label>
              <div class="col-md-12">
                <div class="fieldOption" data-ng-repeat="option in field.options">
                  <div class="row">
                    <div class="col-md-1">
                      <div class="badge badge-secondary">{{$index + 1}}</div>
                    </div>
                    <div class="col-md-6">
                      <input class="form-control" data-ng-model="option.label" data-ng-attr-placeholder="{{'Label' | translate}}" type="text" data-ng-disabled="!field.editable" required />
                    </div>
                    <div class="col-md-5">
                      <button class="btn btn-sm btn-danger" data-ng-click="delOption(option)">
                        <i class="fa-solid fa-times"></i>
                      </button>
                      <button data-ng-disabled="$first" class="btn btn-sm btn-primary" data-ng-click="moveOptionUp($index);" data-uib-tooltip="{{'Move up' | translate}}">
                        <i class="fa-solid fa-chevron-up"></i>
                      </button>
                      <button data-ng-disabled="$last" class="btn btn-sm btn-primary" data-ng-click="moveOptionDown($index);" data-uib-tooltip="{{'Move down' | translate}}">
                        <i class="fa-solid fa-chevron-down"></i>
                      </button>
                      <span>
                        <button class="btn btn-sm" data-ng-class="option.hint1 || option.hint2 ? 'btn-primary' : 'btn-outline-secondary'" data-ng-click="addOptionHintDialog(option)" data-uib-tooltip="{{'Hint' | translate}}">
                          <i class="fa-solid fa-question-circle"></i>
                        </button>
                      </span>
                      <span>
                        <button class="btn btn-sm" data-ng-class="option.block_submission ? 'btn-danger' : 'btn-outline-secondary'" data-ng-click="flipBlockSubmission(option)" data-uib-tooltip="{{'Block the submission' | translate}}">
                          <i class="fa-solid fa-ban"></i>
                        </button>
                      </span>
                      <span>
                        <button class="btn btn-sm" data-ng-class="option.trigger_receiver.length ? 'btn-primary' : 'btn-outline-secondary'" data-ng-click="triggerReceiverDialog(option)" data-uib-tooltip="{{'Recipients' | translate}}">
                          <i class="fa-solid fa-user"></i>
                        </button>
                      </span>
                      <span data-ng-if="resources.node.enable_scoring_system">
                        <button class="btn btn-sm" data-ng-class="option.score_type !== 'none' ? 'btn-primary' : 'btn-outline-secondary'" data-ng-click="assignScorePointsDialog(option)" data-uib-tooltip="{{'Assign score points' | translate}}">
                          <i class="fa-solid fa-bolt"></i>
                          <span data-ng-if="option.score_type !== 'none'">
                            <span> {{option.score_points}} </span>
                            <span data-ng-switch="option.score_type">
                              <span data-ng-switch-when="addition"> (<span data-translate>Addition</span>)</span>
                              <span data-ng-switch-when="multiplier"> (<span data-translate>Multiplier</span>)</span>
                            </span>
                          </span>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-ng-if="field.editable && field.instance !== 'reference' && field.type === 'fieldgroup'" class="row">
          <div class="col-md-12">
            <div class="form-group">
              <div>
                <span data-translate>Questions</span>
                <button class="btn btn-sm btn-primary show-add-question-btn" data-ng-click="toggleAddQuestion()">
                  <i class="fa-solid fa-plus"></i>
                  <span data-translate>Add new question</span>
                </button>
                <button class="btn btn-sm btn-primary show-add-question-from-template-btn" data-ng-click="toggleAddQuestionFromTemplate()" data-ng-if="resources.fieldtemplates.length">
                  <i class="fa-solid fa-plus"></i>
                  <span data-translate>Add question from template</span>
                </button>
              </div>
              <div class="row" data-ng-if="field.editable && field.type === 'fieldgroup'">
                <div class="col-md-12" data-ng-if="showAddQuestion">
                  <div data-ng-include="'views/admin/questionnaires/add_field.html'"></div>
                </div>
                <div class="col-md-12" data-ng-if="showAddQuestionFromTemplate">
                  <div data-ng-include="'views/admin/questionnaires/add_field_from_template.html'"></div>
                </div>
              </div>
              <div class="configuredFields">
                <div data-ng-repeat="field in children | orderBy:['y', 'x']">
                  <div data-ng-include="'views/admin/questionnaires/fields.html'"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group" data-ng-if="field.instance === 'template'">UUID: {{field.id}}</div>
      </div>
    </div>
  </div>
</div>
