<div data-ng-controller="alarmMappingCtrl as vm">
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      icon="c8y-business-rules"
      label="{{ 'Alarm mapping' | translate }}"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="c8y-business-rules"
      label="{{ 'Business rules' | translate }}"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>

  <c8y-ui-action-bar-set>
    <li
      class="navbar-form"
      action-bar-position="left"
    >
      <div class="input-group input-group-search">
        <input
          class="form-control"
          placeholder="{{ 'Filter' | translate }}…"
          type="search"
          ng-model="vm.searchString"
        />
        <span class="input-group-addon">
          <i
            c8y-icon="search"
            ng-if="vm.searchString.length === 0 || !vm.searchString"
          ></i>
          <i
            class="text-muted"
            c8y-icon="times"
            ng-if="vm.searchString.length > 0"
            ng-click="vm.searchString = ''"
          ></i>
        </span>
        <span
          class="sr-only"
          translate
        >
          Filter
        </span>
      </div>
    </li>

    <li>
      <div
        class="dropdown"
        uib-dropdown
        auto-close="outsideClick"
        is-open="status.isOpen"
      >
        <button
          class="dropdown-toggle c8y-dropdown"
          title="{{ 'Add alarm mapping' | translate }}"
          aria-haspopup="true"
          type="button"
          uib-dropdown-toggle
        >
          <span>
            <i c8y-icon="plus-circle"></i>
            {{ 'Add mapping' | translate }}
          </span>
        </button>
        <ul
          class="dropdown-menu dropdown-menu-right"
          uib-dropdown-menu
        >
          <li class="dropdown-form">
            <form
              name="newOptionForm"
              novalidate
            >
              <p class="legend form-block m-t-8 m-b-16 hidden-sm hidden-md hidden-lg">
                {{ 'Add mapping' | translate }}
              </p>
              <div class="form-group">
                <label
                  class="text-truncate"
                  title="{{ 'Alarm type to match' | translate }}"
                  for="newAlarmType"
                >
                  {{ 'Alarm type to match' | translate }}
                </label>
                <input
                  class="form-control"
                  id="newAlarmType"
                  placeholder="{{ 'e.g.' | translate }} c8y_Alarm"
                  type="text"
                  required
                  ng-model="vm.newOption.key"
                />
              </div>
              <div class="form-group">
                <label
                  class="text-truncate"
                  title="{{ 'New description' | translate }}"
                  for="newAlarmDescription"
                >
                  {{ 'New description' | translate }}
                </label>
                <input
                  class="form-control"
                  id="newAlarmDescription"
                  placeholder="{{ 'e.g. map alarm to warning' | translate }}"
                  type="text"
                  ng-model="vm.newOption.description"
                />
              </div>
              <div class="form-group">
                <label
                  class="test-truncate"
                  title="{{ 'New severity' | translate }}"
                >
                  {{ 'New severity' | translate }}
                </label>
                <label
                  class="c8y-radio input-sm a-i-center"
                  title="{{ severity.label | translate }}"
                  for="newSeverityValue{{ $index }}"
                  ng-repeat="severity in vm.severities.values()"
                >
                  <input
                    ng-class="{ active: vm.newOption.severity === severity.value }"
                    id="newSeverityValue{{ $index }}"
                    name="c8y-group"
                    type="radio"
                    value="{{ severity.value }}"
                    ng-model="vm.newOption.severity"
                  />
                  <span></span>
                  <i
                    ng-class="severity.class"
                    class="m-r-4 m-l-4 text-16 stroked-icon"
                    c8y-icon="{{ severity.icon }}"
                  ></i>
                  <span ng-bind="severity.label | translate"></span>
                </label>
              </div>
              <button
                class="btn btn-primary"
                title="{{ 'Add alarm mapping' | translate }}"
                type="submit"
                ng-click="save(vm.newOption)"
                ng-disabled="newOptionForm.$invalid"
              >
                {{ 'Add mapping' | translate }}
              </button>
            </form>
          </li>
        </ul>
      </div>
    </li>

    <c8y-refresh-btn></c8y-refresh-btn>
  </c8y-ui-action-bar-set>

  <c8y-help src="/docs/standard-tenant/alarm-mapping/#alarm-mapping"></c8y-help>

  <!-- empty state -->
  <c8y-ui-empty-state
    [icon]="'alarm'"
    [title]="'No alarm mappings to display.' | translate"
    [subtitle]="'Click the button on the action bar to add your first alarm mapping.' | translate"
    ng-if="options.length === 0 && !loading"
  >
    <p c8y-guide-docs>
      <small translate>
        Find out more in the
        <a c8y-guide-href="/docs/standard-tenant/alarm-mapping">user documentation</a>
        .
      </small>
    </p>
  </c8y-ui-empty-state>

  <div
    class="c8y-list__group m-b-24"
    ng-class="{ 'dd-low': (options | filter : vm.filter).length < 10 }"
    ng-if="!loading"
  >
    <div
      class="page-sticky-header c8y-list__item hidden-xs"
      ng-if="options.length > 0"
    >
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i class="p-l-24"></i>
        </div>
        <div class="c8y-list__item__body p-r-0">
          <div class="content-flex-60">
            <div class="col-3">
              {{ 'Alarm type' | translate }}
            </div>
            <div class="col-3 m-0">
              {{ 'Description' | translate }}
            </div>
            <div class="col-2">
              {{ 'Severity' | translate }}
            </div>
            <div class="col-2"></div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="c8y-list__item collapsible"
      ng-repeat="option in options | orderBy:'key' | filter:vm.searchString as filtered"
    >
      <div ng-class="{ expanded: isDetailExpanded }">
        <div class="c8y-list__item__block">
          <div class="c8y-list__item__icon">
            <i c8y-icon="alarm"></i>
          </div>
          <div class="c8y-list__item__body">
            <div class="content-flex-60">
              <div class="col-3">
                <span class="text-label-small visible-xs m-t-8">
                  {{ 'Alarm type' | translate }}
                </span>
                <button
                  class="btn-clean"
                  title="{{ option.key }}"
                  type="button"
                  ng-click="isDetailExpanded = !isDetailExpanded"
                >
                  {{ option.key }}
                </button>
              </div>
              <div class="col-3">
                <span class="text-label-small visible-xs m-t-8">
                  {{ 'Description' | translate }}
                </span>
                <small
                  class="text-muted"
                  ng-if="option.description"
                  ng-bind="option.description"
                ></small>
                <small
                  class="text-muted"
                  ng-if="!option.description"
                  ng-bind="'<kept as is>' | translate"
                ></small>
              </div>
              <div class="col-2 flex-grow d-flex a-i-center">
                <span class="text-label-small visible-xs m-t-8">
                  {{ 'Severity' | translate }}
                </span>
                <div class="list-item-icon">
                  <i
                    class="status stroked-icon"
                    ng-class="iconClass(option.severity) | lowercase"
                    c8y-icon="{{ icon(option.severity) }}"
                  ></i>
                </div>
                <span
                  class="text-lowercase"
                  title="{{ severities[option.severity].label | translate }}"
                >
                  {{ severities[option.severity].label | translate }}
                </span>
              </div>
              <div class="col-2 text-right showOnHover hidden-xs">
                <button
                  class="btn btn-dot btn-dot--danger d-inline-block"
                  aria-label="{{ 'Delete' | translate }}"
                  uib-tooltip="{{ 'Delete' | translate }}"
                  tooltip-trigger="'mouseenter'"
                  tooltip-popup-delay="500"
                  type="button"
                  ng-click="onClickDelete(option)"
                >
                  <i c8y-icon="minus-circle"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="c8y-list__item__actions">
            <button
              class="collapse-btn"
              title="{{ 'Expand' | translate }}"
              type="button"
              ng-click="isDetailExpanded = !isDetailExpanded"
            >
              <i c8y-icon="chevron-down"></i>
            </button>
          </div>
        </div>

        <div
          class="collapse"
          uib-collapse="!isDetailExpanded"
          data-ng-init="optionToEdit = getOptionCopy(option)"
        >
          <div class="c8y-list__item__collapse--container">
            <form
              name="optionForm"
              novalidate
            >
              <div class="row">
                <div class="form-group col-md-3">
                  <label
                    class="text-truncate"
                    title="{{ 'Alarm type to match' | translate }}"
                    for="alarmType{{ $index }}"
                  >
                    {{ 'Alarm type to match' | translate }}
                  </label>
                  <input
                    class="form-control"
                    id="alarmType{{ $index }}"
                    type="text"
                    disabled
                    ng-model="optionToEdit.key"
                  />
                </div>
                <div class="form-group col-md-3">
                  <label
                    class="text-truncate"
                    title="{{ 'New description' | translate }}"
                    for="alarmDescription{{ $index }}"
                  >
                    {{ 'New description' | translate }}
                  </label>
                  <input
                    class="form-control"
                    id="alarmDescription{{ $index }}"
                    type="text"
                    ng-model="optionToEdit.description"
                  />
                </div>
                <div class="form-group col-md-6">
                  <label
                    class="text-truncate"
                    title="{{ 'New severity' | translate }}"
                  >
                    {{ 'New severity' | translate }}
                  </label>
                  <div class="d-flex-sm flex-wrap">
                    <label
                      class="c8y-radio input-sm a-i-center"
                      ng-class="{ 'p-r-16': !$last }"
                      title="{{ severity.label | translate }}"
                      ng-repeat="severity in severities.values()"
                    >
                      <input
                        ng-class="{ active: optionToEdit.severity === severity.value }"
                        name="c8y-group"
                        type="radio"
                        value="{{ severity.value }}"
                        ng-model="optionToEdit.severity"
                      />
                      <span></span>
                      <i
                        ng-class="severity.class"
                        class="text-16 m-r-4 m-l-4 stroked-icon"
                        c8y-icon="{{ severity.icon }}"
                      ></i>
                      <span
                        title="{{ severity.label | translate }}"
                        ng-bind="severity.label | translate"
                      ></span>
                    </label>
                  </div>
                </div>
              </div>
              <button
                class="btn btn-danger visible-xs-inline-block"
                title="{{ 'Delete' | translate }}"
                type="button"
                ng-click="onClickDelete(option)"
              >
                <i c8y-icon="delete"></i>
                {{ 'Delete' | translate }}
              </button>
              <span></span>
              <button
                class="btn btn-primary"
                title="{{ 'Save' | translate }}"
                type="submit"
                ng-click="save(optionToEdit)"
                ng-disabled="optionForm.$invalid || optionForm.$pristine"
              >
                {{ 'Save' | translate }}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- no results empty state -->
    <c8y-ui-empty-state
      [icon]="'search'"
      [title]="'No results to display.' | translate"
      [subtitle]="'Refine your search terms or check your spelling.' | translate"
      ng-if="filtered.length === 0 && vm.searchString.length > 0"
    ></c8y-ui-empty-state>
  </div>
</div>
