<div class="modal-header text-center separator">
  <div
    class="h3"
    id="modal-title"
    translate
  >
    Select a predefined command
  </div>
</div>
<div
  class="d-flex p-16 separator-bottom a-i-center"
  ng-hide="vm.newCommandTemplate"
>
  <form class="commandTemplatesSearchForm flex-grow p-r-16">
    <div class="input-group input-group-search">
      <input
        class="form-control"
        placeholder="{{ 'Search command by name or text' | translate }}"
        type="search"
        ng-model="commandsFilter.text"
        data-cy="commandTemplates--search-command"
      />
      <span class="input-group-addon">
        <i
          c8y-icon="search"
          ng-hide="commandsFilter.text.length"
        ></i>
        <i
          c8y-icon="times"
          title="{{ 'Clear`input`' | translate }}"
          ng-show="commandsFilter.text.length"
          ng-click="commandsFilter.text=''"
          data-cy="commandTemplates--icon-search"
        ></i>
      </span>
    </div>
  </form>
  <div class="m-l-auto">
    <button
      class="btn btn-default btn-xs"
      title="{{ 'Create a new command template' | translate }}"
      type="button"
      ng-click="vm.addNew()"
      ng-show="vm.canWrite && !vm.newCommandTemplate"
      data-cy="commandTemplates--new-command-template"
    >
      <i c8y-icon="plus-circle"></i>
      {{ 'New template' | translate }}
    </button>
  </div>
</div>
<div
  class="modal-inner-scroll"
  id="modal-body"
>
  <div
    class="modal-body bg-level-2"
    ng-if="vm.newCommandTemplate"
  >
    <form name="vm.forms.newCommandForm">
      <div class="form-group">
        <label translate>Name</label>
        <input
          class="form-control"
          placeholder="{{ 'e.g. My command template' | translate }}"
          required
          ng-model="vm.newCommandTemplate.name"
          data-cy="commandTemplates--predefined-command-name"
        />
      </div>
      <div class="form-group">
        <label translate>Category</label>
        <input
          class="form-control"
          placeholder="{{ 'e.g. My templates category' | translate }}"
          required
          ng-model="vm.newCommandTemplate.category"
          data-cy="commandTemplates--predefined-command-category"
        />
      </div>
      <div class="form-group">
        <label translate>Command template</label>
        <textarea
          class="form-control"
          placeholder="{{ vm.getCommandPlaceholder() }}"
          rows="1"
          required
          ng-model="vm.newCommandTemplate.command"
          data-cy="commandTemplates--command-template"
        ></textarea>
      </div>
      <div class="form-group">
        <label translate>Delivery type</label>
        <span ng-repeat="deliveryType in vm.standardDeliveryTypes">
          <label
            class="c8y-checkbox"
            title="{{ deliveryType | translate }}"
          >
            <input
              type="checkbox"
              ng-model="vm.commandDeliveryTypesSelected[deliveryType]"
              ng-required="vm.validateSelectedDeliveryTypes()"
            />
            <span></span>
            <span>{{ deliveryType | translate }}</span>
          </label>
        </span>
      </div>
    </form>
  </div>

  <c8y-ui-empty-state
    [icon]="'terminal'"
    [title]="'No command template available.' | translate"
    [subtitle]="'Add a new command template by clicking the button above.' | translate"
    ng-if="vm.commandTemplates.length === 0 && !vm.newCommandTemplate"
  ></c8y-ui-empty-state>

  <div
    class="list-group borderless-top command-templates-list"
    ng-hide="vm.newCommandTemplate"
  >
    <div
      class="list-group-item d-flex"
      ng-class="{ active: vm.result.commandTemplate === commandTemplate }"
      ng-repeat="commandTemplate in vm.commandTemplates | filter:commandsFilter.text"
      ng-click="vm.onTemplateSelected(commandTemplate)"
    >
      <div
        class="list-item-actions"
        ng-if="commandTemplate.id && vm.canWrite"
        ng-click="$event.stopPropagation()"
        data-cy="commandTemplates--list-item-dropdown"
      >
        <div
          class="dropdown settings"
          ng-class="{ open: isOpen }"
          uib-dropdown
          dropdown-append-to-body="true"
          is-open="isOpen"
        >
          <button
            class="dropdown-toggle c8y-dropdown"
            title="{{ 'Actions' | translate }}"
            aria-haspopup="true"
            type="button"
            uib-dropdown-toggle
          >
            <i c8y-icon="ellipsis-v"></i>
          </button>
          <ul
            class="dropdown-menu dropdown-menu-right dropdown-menu--modal"
            uib-dropdown-menu
          >
            <li>
              <button
                title="{{ 'Edit' | translate }}"
                type="button"
                ng-click="vm.edit(commandTemplate)"
              >
                <i c8y-icon="edit"></i>
                {{ 'Edit' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Remove' | translate }}"
                type="button"
                ng-click="vm.remove(commandTemplate)"
              >
                <i c8y-icon="delete"></i>
                {{ 'Remove' | translate }}
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="list-item-icon">
        <i c8y-icon="terminal"></i>
      </div>
      <div class="list-item-body">
        <div class="d-flex a-i-start">
          <div
            class="d-col flex-grow"
            style="max-width: 460px"
          >
            <span class="p-r-8">
              {{ commandTemplate.name | translate }}
            </span>
            <span class="list-group-item-text">
              <small ng-class="{ 'text-muted': vm.result.commandTemplate != commandTemplate }">
                {{ commandTemplate.command }}
              </small>
            </span>
          </div>
          <div
            class="d-col"
            style="max-width: 70px !important"
          >
            <span
              class="tag tag--info m-b-4"
              title=" {{ commandTemplate.deliveryTypes[0] | translate }}"
              ng-show="commandTemplate.deliveryTypes.length === 1"
            >
              {{ commandTemplate.deliveryTypes[0] | translate }}
            </span>
            <span
              class="tag tag--info"
              title=" {{ commandTemplate.category | translate }}"
              ng-show="commandTemplate.category"
            >
              {{ commandTemplate.category | translate }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-footer">
  <button
    class="btn btn-default"
    title="{{ 'Cancel' | translate }}"
    type="button"
    ng-click="vm.cancel()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    title="{{ 'Use' | translate }}"
    type="button"
    ng-click="vm.use(vm.commandDeliveryType)"
    ng-disabled="!vm.result.commandTemplate"
    ng-hide="vm.newCommandTemplate"
  >
    {{ 'Use' | translate }}
  </button>
  <button
    class="btn btn-primary"
    title="{{ 'Save' | translate }}"
    type="button"
    ng-click="vm.save()"
    ng-disabled="vm.forms.newCommandForm.$invalid"
    ng-show="vm.newCommandTemplate"
    data-cy="commandTemplates--save"
  >
    {{ 'Save' | translate }}
  </button>
</div>
