<div class="configSection" data-ng-controller="AdminContextsCtrl">
  <div>
    <span data-translate>Channels</span>
    <button class="btn btn-sm btn-primary show-add-context-btn" data-ng-click="toggleAddContext()">
      <i class="fa-solid fa-plus"></i>
      <span data-translate>Add</span>
    </button>
  </div>
  <div class="row" data-ng-controller="AdminContextAddCtrl" data-ng-if="showAddContext">
    <div data-ng-form="newContext" class="addContext col-md-6">
      <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 data-ng-class="{'is-invalid': newContext.name.$error.required}">
          <input name="name" class="form-control" data-ng-model="new_context.name" type="text" required />
        </div>
      </div>
      <div class="form-group">
        <button id="add-btn" class="btn btn-primary" data-ng-disabled="newContext.$invalid"
                data-ng-click="add_context(); toggleAddContext()" type="submit">
          <i class="fa-solid fa-plus"></i>
          <span data-translate>Add</span>
        </button>
      </div>
    </div>
  </div>
  <div data-ng-repeat="context in resources.contexts">
    <form id="context-{{$index}}" name="editContext" data-ng-controller="AdminContextEditorCtrl" novalidate>
      <div class="configItem">
        <div class="editorHeader row" data-ng-click="toggleEditing(); $event.stopPropagation();">
          <span class="col-md-7">
            <span>{{context.name}}</span>
	    <span class="badge badge-secondary" data-ng-if="context.hidden" data-translate>Hidden</span>
          </span>
          <span class="col-md-5 clearfix">
            <span class="float-right">
              <button data-ng-if="!$first && !resources.node.show_contexts_in_alphabetical_order"
		      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 && !resources.node.show_contexts_in_alphabetical_order"
		      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="!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="editContext.$invalid"
                      data-ng-click="save_context(context)">
                <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="deleteContext(); $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">
                <div data-image-upload data-image-upload-model="context" data-image-upload-model-attr="picture" data-image-upload-id="{{context.id}}"></div>
              </div>
              <div class="form-group">
                <label data-translate>Name</label>
                <input name="name" class="form-control" data-ng-model="context.name" type="text" required>
                <div class="text-danger" data-ng-show="editContext.name.$error.required" data-translate>This field is mandatory</div>
              </div>
              <div class="form-group">
                <label data-translate>Description</label>
                <textarea name="description" class="form-control" data-ng-model="context.description"></textarea>
              </div>
              <div class="form-group">
                <label data-translate>Questionnaire</label>
                <select class="form-control" data-ng-model="context.questionnaire_id"
                        data-ng-options="item.id as item.name for item in resources.questionnaires"></select>
              </div>
              <div class="form-group">
                <label>
                  <span data-translate>Recipients</span>
                  <button class="btn btn-sm btn-primary add-receiver-btn" data-ng-click="toggleSelect()">
                    <i class="fa-solid fa-plus"></i>
                    <span data-translate>Add</span>
                  </button>
                </label>
                <div id="ReceiverContextAdder" class="row">
                  <div class="col-md-12" data-ng-if="showSelect">
                    <ui-select data-ng-model="selected.value" data-theme="bootstrap"
                               data-on-select='moveReceiver($item)'>
                      <ui-select-match data-ng-attr-placeholder="{{'Search' | translate}}">
                        <span data-ng-bind="$select.selected.name"></span>
                      </ui-select-match>
                      <ui-select-choices data-repeat="receiver in resources.users | filter: {role: 'receiver', name: $select.search} | filter:receiverNotSelectedFilter">
                        <span data-ng-bind-html="receiver.name | highlight: $select.search"></span>
                      </ui-select-choices>
                    </ui-select>
                    <br/>
                  </div>
                </div>
                <ol class="selectionList">
                  <li data-ng-repeat="receiver in context.receivers">
                    <span data-ng-controller="AdminContextReceiverSelectorCtrl">
                      <span data-ng-if="!context.show_receivers_in_alphabetical_order">
                        <span data-ng-if="!$first" data-ng-click="moveUp($index)"
                              data-uib-tooltip="{{'Move up' | translate}}">
                          <i class="fa-solid fa-chevron-up"></i>
                        </span>
                        <i data-ng-if="$first || $last" class="fa-solid fa-none"></i>
                        <span data-ng-if="!$last" data-ng-click="moveDown($index)"
                              data-uib-tooltip="{{'Move down' | translate}}">
                          <i class="fa-solid fa-chevron-down"></i>
                        </span>
                      </span>
                      <span data-ng-click="context.receivers.splice($index, 1)"
                            data-uib-tooltip="{{'Remove' | translate}}">
                        <i class="fa-solid fa-times"></i>
                      </span>
                    </span>
                    <span>{{admin_receivers_by_id[receiver].name}}</span>
                  </li>
                </ol>
              </div>
              <div class="form-group">
                <label>
                  <span data-translate>Expiration date</span> (<span data-translate>days</span>)
                </label>
                <div>
                      <span data-ng-class="{'is-invalid': editContext.timetolive.$invalid}">
                        <input class="form-control" name="timetolive" data-ng-model="context.tip_timetolive"
                               type="number" min="0" max="3650"/>
                      </span>
                  <div data-translate>Set the value to 0 to disable this feature.</div>
                </div>
              </div>
              <div class="form-group">
                <input data-ng-model="context.hidden" type="checkbox" />
                <label data-translate>Hidden</label>
              </div>
            </div>
          </div>
          <hr/>
          <div class="row">
            <div class="col-md-12">
              <button class="btn btn-primary" data-ng-click="show_advanced_settings = !show_advanced_settings"
                      data-ng-init="show_advanced_settings=false">
                <i data-ng-if="!show_advanced_settings" class="fa-solid fa-plus"></i>
                <i data-ng-if="show_advanced_settings" class="fa-solid fa-minus"></i>
                <span data-translate>Advanced</span>
              </button>
              <div id="ContextAdvancedSettingsBox">
                <div class="row" data-ng-show="show_advanced_settings">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label class="inline-checkbox">
                        <input data-ng-model="context.show_steps_navigation_interface" type="checkbox"/>
                        <span data-translate>Show the questionnaire navigation interface</span>
                      </label>
                    </div>
                    <div class="form-group">
                      <label class="inline-checkbox">
                        <input data-ng-model="context.allow_recipients_selection" type="checkbox"/>
                        <span data-translate>Allow whistleblowers to select their recipients</span>
                      </label>
                    </div>
                    <div data-ng-show="context.allow_recipients_selection" class="form-group well">
                      <div class="form-group">
                        <label class="inline-checkbox">
                          <input data-ng-model="context.select_all_receivers"
                                 data-ng-disabled="!context.allow_recipients_selection"
                                 type="checkbox"
                                 data-ng-click="context.maximum_selectable_receivers=0"/>
                          <span data-translate>Select all recipients by default</span>
                        </label>
                      </div>
                      <div class="form-group">
                        <label class="inline-checkbox">
                          <span data-translate>Maximum number of selectable recipients:</span>
                          <input class="form-control" data-ng-model="context.maximum_selectable_receivers"
                                 type="number" min="0" data-ng-disabled="context.select_all_receivers"/>
                          <div data-translate>Set the value to 0 to disable this feature.</div>
                        </label>
                      </div>
                      <div class="form-group">
                        <label class="inline-checkbox">
                          <input data-ng-model="context.show_receivers_in_alphabetical_order" type="checkbox"/>
                          <span data-translate>Show recipients in alphabetical order</span>
                        </label>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="inline-checkbox">
                        <input data-ng-model="context.show_recipients_details" type="checkbox"/>
                        <span data-translate>Show recipient details on the status page of the report</span>
                      </label>
                    </div>
                    <div class="form-group">
                      <label class="inline-checkbox">
                        <input data-ng-model="context.enable_comments" type="checkbox"/>
                        <span data-translate>Enable comments</span>
                      </label>
                    </div>
                    <div class="form-group">
                      <label class="inline-checkbox" data-ng-if="context.enable_comments">
                        <input data-ng-model="context.enable_two_way_comments" type="checkbox"/>
                        <span data-translate>Allow the whistleblower to write comments</span>
                      </label>
                    </div>
                    <div class="form-group">
                      <label class="inline-checkbox">
                        <input data-ng-model="context.enable_messages" type="checkbox"/>
                        <span data-translate>Enable private messages</span>
                      </label>
                    </div>
                    <div class="form-group" data-ng-if="context.enable_messages">
                      <label class="inline-checkbox">
                        <input data-ng-model="context.enable_two_way_messages" type="checkbox"/>
                        <span data-translate>Allow the whistleblower to send messages</span>
                      </label>
                    </div>
                    <div class="form-group">
                      <label class="inline-checkbox">
                        <input data-ng-model="context.enable_attachments" type="checkbox"/>
                        <span data-translate>Allow the whistleblower to add attachments</span>
                      </label>
                    </div>
                    <div class="form-group">
                      <label data-translate>Additional questionnaire</label>
                      <select class="form-control" data-ng-model="context.additional_questionnaire_id"
                              data-ng-options="item.id as item.name for item in resources.questionnaires">
                        <option data-ng-if="context.additional_questionnaire_id" value=''></option>
                      </select>
                    </div>
                    <div data-ng-if="resources.node.enable_scoring_system">
                      <label data-ng-translate>Scoring system options</label>
                      <div class="form-group well">
                        <table class="table table-bordered">
                          <thead>
                          <th data-translate>Threshold</th>
                          <th data-translate>Value</th>
                          </thead>
                          <tbody>
                          <tr>
                            <td data-translate>Medium</td>
                            <td><input class="form-control" data-ng-model="context.score_threshold_medium"
                                       type="number"/></td>
                          </tr>
                          <tr>
                            <td data-translate>High</td>
                            <td><input class="form-control" data-ng-model="context.score_threshold_high"
                                       type="number"/></td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <hr/>
          <div class="form-group">UUID: <a href="#/submission?context={{context.id}}" target="_blank">{{context.id}}</a></div>
        </div>
      </div>
    </form>
  </div>
</div>
