<div class="card-header separator bg-inherit sticky-top">
  <span
    class="card-title h4"
    translate
  >
    Alarms/events
  </span>
</div>
<div
  class="p-t-8"
  ng-if="vm.configs.length === 0"
>
  <c8y-ui-empty-state
    [icon]="'online1'"
    [title]="'No alarms/events found.' | translate"
    [horizontal]="true"
  >
    <p c8y-guide-docs>
      <small translate>
        Find out more in the
        <a c8y-guide-href="/docs/cockpit/data-explorer/#to-add-alarms-or-events">
          user documentation
        </a>
        .
      </small>
    </p>
  </c8y-ui-empty-state>
</div>

<div
  class="c8y-data-point-list c8y-list__group bg-inherit"
  ng-form="forms.alarmsEventsTimelineForm"
>
  <div
    class="c8y-data-point c8y-list__item bg-inherit"
    data-cy="c8y-data-point-alarm-event-list"
    ng-repeat="cfg in vm.configs | orderBy: 'label'"
    ng-form="forms.alarmsEventsTimelineChildForm{{ $index }}"
  >
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__check p-r-0 a-s-center">
        <label class="c8y-switch c8y-switch--inline">
          <input
            name="active"
            type="checkbox"
            ng-model="cfg.__active"
          />
          <span></span>
          <span
            class="sr-only"
            translate
          >
            Activity switch
          </span>
        </label>
      </div>

      <div
        class="c8y-list__item__colorpicker p-l-0 a-s-center"
        title="{{ 'Change color' | translate }}"
      >
        <div class="c8y-colorpicker">
          <label
            class="sr-only"
            for="colorpicker-{{ $index }}"
          >
            {{ 'Color picker' | translate }}
          </label>
          <input
            id="colorpicker-{{ $index }}"
            type="color"
            ng-model="cfg.color"
          />
          <span style="background-color:{{ cfg.color }}"></span>
        </div>
      </div>

      <div class="c8y-list__item__body text-truncate">
        <button
          class="btn-clean data-point-label text-truncate"
          aria-expanded="{{ isCollapsed || false }}"
          ng-click="isCollapsed = !isCollapsed"
        >
          <span
            class="text-truncate"
            title="{{ cfg.label }}"
            name="label"
          >
            {{ cfg.label }}
          </span>
          <small
            class="text-truncate text-muted icon-flex"
            *ngIf="cfg.__target.name"
          >
            <i c8y-icon="exchange"></i>
            <span
              class="text-truncate"
              title="{{ cfg.__target.name }}"
            >
              {{ cfg.__target.name }}
            </span>
          </small>
        </button>
      </div>
      <div
        class="c8y-list__item__actions"
        ng-class="{ expanded: isCollapsed }"
      >
        <button
          class="collapse-btn"
          title="{{ 'Expand' | translate }}"
          aria-expanded="{{ isCollapsed || false }}"
          type="button"
          ng-click="isCollapsed = !isCollapsed"
        >
          <i c8y-icon="chevron-down"></i>
        </button>

        <div
          class="dropdown settings"
          is-open="isopen"
          uib-dropdown
          dropdown-append-to-body="true"
        >
          <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 text-right"
            uib-dropdown-menu
          >
            <li>
              <button
                title="{{ 'Remove' | translate }}"
                type="button"
                ng-click="vm.remove(cfg)"
              >
                <i c8y-icon="minus-circle"></i>
                {{ 'Remove' | translate }}
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div uib-collapse="!isCollapsed">
      <div class="data-point-details c8y-list__item__collapse--container">
        <div class="form-group form-group-sm">
          <label
            for="label-{{ $index }}"
            translate
          >
            Label
          </label>
          <input
            class="form-control"
            id="label-{{ $index }}"
            name="label"
            ng-model="cfg.label"
            ng-model-options="{debounce: 300}"
          />
        </div>
        <div class="tight-grid">
          <div class="form-group form-group-sm col-xs-6 col-sm-4">
            <label
              for="dataType-{{ $index }}"
              translate
            >
              Data type
            </label>
            <div class="c8y-select-wrapper">
              <select
                class="form-control"
                id="dataType-{{ $index }}"
                ng-options="tt.value as (tt.label | translate) for tt in vm.timelineTypes"
                ng-model="cfg.timelineType"
                ng-init="cfg.timelineType = cfg.timelineType || vm.timelineTypes[0].val"
              ></select>
              <span></span>
            </div>
          </div>

          <div class="form-group form-group-sm col-xs-6 col-sm-8">
            <label for="alarmEventType-{{ $index }}">
              {{ 'Alarm/event type' | translate }}
            </label>
            <input
              class="form-control"
              id="alarmEventType-{{ $index }}"
              name="alarmEventType"
              ng-model="cfg.filters.type"
              ng-model-options="{debounce: 300}"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card-footer bg-inherit">
  <button
    class="btn btn-default btn-sm"
    title="{{ 'Add alarm/event' | translate }}"
    type="button"
    ng-click="vm.add()"
  >
    <i c8y-icon="plus-circle"></i>
    {{ 'Add alarm/event' | translate }}
  </button>
</div>
