<div
  class="card"
  data-cy="ng1-alarm-list-of-severity-{{ title.class }}"
>
  <!-- heading -->
  <div
    class="card-header separator"
    ng-if="title || !hideHeaderActions"
  >
    <div class="card-icon">
      <div class="p-relative">
        <i
          ng-class="title.class"
          class="status stroked-icon"
          c8y-icon="{{ title.icon }}"
        ></i>
      </div>
    </div>
    <!-- title -->
    <div
      class="card-title"
      ng-if="title"
    >
      <span>{{ title.text | translate }}</span>
    </div>
    <div
      class="header-actions"
      ng-if="!hideHeaderActions"
    >
      <!-- realtime -->
      <c8y-realtime-btn></c8y-realtime-btn>

      <!-- refresh -->
      <button
        class="btn btn-link"
        title="{{ 'Refresh alarm list contents' | translate }}"
        type="button"
        ng-click="refresh()"
      >
        <i
          ng-class="{ 'icon-spin': refreshLoading }"
          c8y-icon="refresh"
        ></i>
        <span translate>Reload</span>
      </button>
    </div>
  </div>
  <!-- /.card-header-actions -->

  <!-- alarm-list -->
  <div class="card-inner-scroll">
    <!-- empty state -->
    <c8y-ui-empty-state
      [icon]="'c8y-alert-idle'"
      [title]="'No alarms to display.' | translate"
      ng-if="filteredAlarms.length === 0 && !refreshLoading"
      data-cy="alarm-list--empty-state"
    >
      <p c8y-guide-docs>
        <small translate>
          Find out more in the
          <a
            c8y-guide-href="/docs/device-management-application/monitoring-and-controlling-devices/#working-with-alarms"
          >
            user documentation
          </a>
          .
        </small>
      </p>
    </c8y-ui-empty-state>

    <!-- loading -->
    <div
      class="card-block"
      ng-show="refreshLoading && !paging.more"
    >
      <c8y-rectangle-spinner
        class="spinner-inline m-t-4 m-b-4"
        message="'Retrieving alarms…' | translate"
      ></c8y-rectangle-spinner>
    </div>

    <div
      class="c8y-list__group"
      ng-if="filteredAlarms.length > 0"
    >
      <div
        class="c8y-list__item"
        ng-class="{ 'realtime-animation-list': realtimeAnimation, expanded: isOpen(alarm) }"
        ng-repeat="alarm in filteredAlarms track by alarm.id"
        data-cy="ng1-alarm-list-repeat"
      >
        <div class="c8y-list__item__block">
          <!-- status -->

          <div class="c8y-list__item__icon">
            <div class="alarm-icons">
              <!-- icon severity-->
              <button
                class="btn-clean severity"
                aria-label="{{ 'Severity' | translate }}: {{ alarm.severity | translate }}"
                uib-tooltip="{{ 'Severity' | translate }}: {{ alarm.severity | translate }}"
                tooltip-placement="right"
                tooltip-trigger="'mouseenter'"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
                type="button"
              >
                <i
                  class="status stroked-icon"
                  ng-class="alarm.severity | lowercase"
                  c8y-icon="{{ icon(alarm.severity) }}"
                ></i>
              </button>
              <button
                class="btn-clean status"
                aria-label="{{ 'Status' | translate }}: {{ alarm.status | translate }}"
                uib-tooltip="{{ 'Status' | translate }}: {{ alarm.status | translate }}"
                tooltip-placement="right"
                tooltip-trigger="'mouseenter'"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
                type="button"
              >
                <i c8y-icon="{{ icon(alarm.status) }}"></i>
              </button>
            </div>
          </div>
          <div class="c8y-list__item__body p-r-8">
            <!-- Alarm description -->
            <div class="text-break-word">{{ translateAlarmText(alarm) }}</div>
            <div class="c8y-list__item__footer">
              <!-- badge -->
              <div
                class="span m-r-4"
                ng-if="alarm.count > 1"
              >
                <button
                  class="btn-clean"
                  aria-label="{{ 'Number of occurrences' | translate }}. {{
                    'First occurrence' | translate
                  }} {{ alarm.firstOccurrenceTime | absoluteDate }} ({{
                    'device time' | translate
                  }})."
                  uib-tooltip="{{ 'Number of occurrences' | translate }}. {{
                    'First occurrence' | translate
                  }} {{ alarm.firstOccurrenceTime | absoluteDate }} ({{
                    'device time' | translate
                  }})."
                  tooltip-placement="right"
                  tooltip-trigger="'mouseenter'"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                  type="button"
                >
                  <span class="badge badge-info">
                    {{ alarm.count }}
                  </span>
                </button>
              </div>
              <!-- Date -->
              <small
                class="text-muted icon-flex m-r-8"
                title="{{ 'Last occurrence of this alarm (device time).' | translate }}"
              >
                <i c8y-icon="clock-o"></i>
                {{ alarm.time | absoluteDate }}
              </small>
              &nbsp;
              <!-- device -->
              <br class="visible-xs" />
              <div class="flex-grow m-r-8">
                <a
                  class="text-muted"
                  title="{{ alarm.source.name || alarm.source.id }}"
                  ng-href="{{ getDeviceLinkFromAlarm(alarm) }}"
                  ng-hide="hideDevice || !getDeviceLinkFromAlarm(alarm)"
                >
                  <small class="icon-flex">
                    <i c8y-icon="exchange"></i>
                    {{ alarm.source.name || alarm.source.id }}
                  </small>
                </a>
                <span
                  class="text-muted"
                  ng-hide="hideDevice || getDeviceLinkFromAlarm(alarm)"
                >
                  <small class="word-break icon-flex">
                    <i c8y-icon="cog"></i>
                    {{ alarm.source.name || alarm.source.id }}
                  </small>
                </span>
              </div>
              <span class="showOnHover">
                <button
                  class="btn btn-default btn-xs"
                  aria-label="{{ 'Acknowledge' | translate }}"
                  uib-tooltip="{{ 'Acknowledge' | translate }}"
                  tooltip-popup-delay="500"
                  tooltip-trigger="'mouseenter'"
                  tooltip-append-to-body="true"
                  type="button"
                  ng-disabled="changingStatus"
                  ng-click="changeStatus(alarm, 'ACKNOWLEDGED')"
                  ng-if="alarm.status == 'ACTIVE'"
                >
                  <i c8y-icon="bell-slash"></i>
                </button>
                <button
                  class="btn btn-default btn-xs"
                  aria-label="{{ 'Clear`alarm`' | translate }}"
                  uib-tooltip="{{ 'Clear`alarm`' | translate }}"
                  tooltip-append-to-body="true"
                  tooltip-trigger="'mouseenter'"
                  tooltip-popup-delay="500"
                  type="button"
                  ng-disabled="changingStatus"
                  ng-click="changeStatus(alarm, 'CLEARED')"
                  ng-if="!(alarm.status == 'CLEARED')"
                >
                  <i c8y-icon="check-circle"></i>
                </button>
              </span>
            </div>
          </div>

          <div class="c8y-list__item__actions">
            <!-- toggle collapse -->
            <button
              class="collapse-btn"
              ng-class="{ active: isOpen(alarm) }"
              title="{{ 'Expand' | translate }}"
              type="button"
              ng-click="toggle(alarm);"
            >
              <i c8y-icon="chevron-down"></i>
            </button>

            <!-- TBD: since the buttons are available, we display the dropdown only when
              we can create smart rules -->
            <div
              class="dropdown settings"
              ng-if="smartRules"
              is-open="false"
              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"
                uib-dropdown-menu=""
              >
                <li>
                  <button
                    title="{{ 'Acknowledge' | translate }}"
                    type="button"
                    ng-click="changeStatus(alarm, 'ACKNOWLEDGED')"
                    ng-if="alarm.status == 'ACTIVE'"
                  >
                    <i c8y-icon="bell-slash"></i>
                    {{ 'Acknowledge' | translate }}
                  </button>
                </li>
                <li>
                  <button
                    title="{{ 'Clear alarm' | translate }}"
                    type="button"
                    ng-click="changeStatus(alarm, 'CLEARED')"
                    ng-if="!(alarm.status == 'CLEARED')"
                  >
                    <i c8y-icon="check-circle"></i>
                    {{ 'Clear`alarm`' | translate }}
                  </button>
                </li>
                <li>
                  <c8y-if-allowed cfg="smartRulesSvc.permissionsCfgs.create">
                    <button
                      title="{{ 'Create smart rule' | translate }}"
                      type="button"
                      ng-click="createSmartRule(alarm)"
                    >
                      <i c8y-icon="cogs"></i>
                      {{ 'Create smart rule' | translate }}
                    </button>
                  </c8y-if-allowed>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- collapse -->
        <div
          class="collapse"
          uib-collapse="!isOpen(alarm)"
        >
          <div
            class="c8y-list__item__collapse--container"
            ng-if="isFitSeverity(alarm) && isOpen(alarm)"
          >
            <div class="content-flex-80">
              <div class="col-6">
                <ul class="list-unstyled small m-b-16">
                  <li class="p-t-4 p-b-4 d-flex separator-top-bottom">
                    <label class="small m-b-0 m-r-8">{{ 'Status' | translate }}</label>
                    <span class="m-l-auto">{{ statusText(alarm) }}</span>
                  </li>
                  <li
                    class="p-t-4 p-b-4 d-flex separator-bottom"
                    ng-repeat="(key, label) in getStandardKeys(alarm, ['text'])"
                  >
                    <label class="small m-b-0 m-r-8">{{ label | translate }}</label>
                    <span class="m-l-auto">{{ alarm[key] }}</span>
                  </li>
                  <li
                    class="p-t-4 p-b-4 d-flex separator-bottom"
                    ng-repeat="key in getNonStandardKeys(alarm)"
                  >
                    <label class="small m-b-0 m-r-8">{{ key | humanize2 }}</label>
                    <span class="m-l-auto">{{ alarm[key] | checkForDate: true : 'medium' }}</span>
                  </li>
                </ul>
              </div>

              <div
                class="col-6"
                ng-show="auditList[alarm.id].length > 0"
              >
                <div class="legend form-block m-t-0">{{ 'Change log' | translate }}</div>
                <div
                  c8y-audit-list
                  data="auditList[alarm.id]"
                  refresh="auditRefresh[alarm.id]"
                  filter="{source: alarm.id}"
                  hide-device="hideDevice"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="card-footer"
      ng-show="paging.more"
    >
      <c8y-load-more change-page-size></c8y-load-more>
    </div>
  </div>
</div>
