<div class="d-flex row tight-grid flex-wrap a-i-stretch">
  <div class="col-xs-12 col-md-6 d-flex p-b-8">
    <div class="border-all fit-w d-flex">
      <div class="p-8">
        <i
          class="icon-24 text-gray-dark m-t-4 c8y-icon"
          [c8yIcon]="selectedAlarm.status | AlarmStatusToIcon"
        ></i>
      </div>
      <div class="p-t-8 p-b-8 p-r-8">
        <p class="text-label-small m-b-0 m-r-8">{{ 'Status' | translate }}</p>
        <p class="small">{{ statusMessage }}</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6 d-flex p-b-8">
    <div class="border-all fit-w d-flex">
      <div class="p-8">
        <i
          class="icon-24 text-gray-dark m-t-4 stroked-icon status"
          [c8yIcon]="selectedAlarm.severity | AlarmSeverityToIcon"
          [ngClass]="selectedAlarm.severity?.toString() | lowercase"
        ></i>
      </div>
      <div class="p-t-8 p-b-8 p-r-8">
        <p class="text-label-small m-b-0 m-r-8">{{ 'Severity' | translate }}</p>
        <p class="small">{{ SEVERITY_LABELS[selectedAlarm.severity] | translate }}</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6 d-flex p-b-8">
    <div class="border-all fit-w d-flex">
      <div class="p-8">
        <i
          class="icon-24 text-gray-dark m-t-4 stroked-icon status"
          c8yIcon="contactless-payment"
        ></i>
      </div>
      <div class="p-t-8 p-b-8 p-r-8">
        <p class="text-label-small m-b-0 m-r-8">{{ 'Source' | translate }}</p>
        <p class="small">
          <button
            class="btn-link text-muted p-0 m-r-8"
            title="{{ selectedAlarm.source.name }}"
            type="button"
            routerLink="{{ selectedAlarmMO | assetLink }}"
          >
            <small class="icon-flex">
              <i c8yIcon="exchange"></i>
              {{ selectedAlarm.source.name || selectedAlarm.source.id }}
            </small>
          </button>
          <ng-container *ngIf="showSourceNavigationLink">
            <button
              class="btn-link p-0"
              title="{{
                linkTitle
                  | translate: { appName: userDeviceManagementApp | humanizeAppName | async }
              }}"
              type="button"
              (click)="goToAlarmSource(selectedAlarm.id)"
              data-cy="alarm-details-device-management-link"
            >
              {{ userDeviceManagementApp | humanizeAppName | async }}
              <i c8yIcon="external-link"></i>
            </button>
          </ng-container>
        </p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6 d-flex p-b-8">
    <div class="border-all fit-w d-flex">
      <div class="p-8">
        <span
          class="circle-icon-wrapper"
          [ngStyle]="{ 'background-color': typeColor }"
        >
          <i
            class="stroked-icon"
            c8yIcon="bell"
          ></i>
        </span>
      </div>
      <div class="p-t-8 p-b-8 p-r-8 min-width-0">
        <p class="text-label-small m-b-0 m-r-8">{{ 'Type' | translate }}</p>
        <p
          class="small text-truncate"
          title="{{ selectedAlarm.type }}"
        >
          <code>{{ selectedAlarm.type }}</code>
        </p>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-md-12 p-b-16">
    <div class="border-all fit-w d-flex">
      <div class="p-8">
        <i
          class="icon-24 text-gray-dark m-t-4"
          c8yIcon="calendar"
        ></i>
      </div>
      <div class="p-t-8 p-b-0 p-r-8 flex-grow">
        <div class="content-flex-50">
          <div class="col-4 p-b-8">
            <p class="text-label-small m-b-0 m-r-8">{{ 'Last updated' | translate }}</p>
            <p class="small">
              {{ lastUpdated | c8yDate: 'medium' }}
            </p>
          </div>
          <div
            class="col-4 p-b-8"
            *ngIf="selectedAlarm.count > 1"
          >
            <p class="text-label-small m-b-0 m-r-8">{{ 'Number of occurrences' | translate }}</p>
            <p>
              <span class="badge badge-info">{{ selectedAlarm.count }}</span>
            </p>
          </div>
          <div
            class="col-4 p-b-8"
            *ngIf="selectedAlarm.count > 1"
          >
            <p class="text-label-small m-b-0 m-r-8">{{ 'First occurrence' | translate }}</p>
            <p class="small">
              {{ selectedAlarm.creationTime | c8yDate: 'medium' }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    class="col-xs-12 col-md-12 p-b-16"
    *ngIf="customFragments"
  >
    <div class="border-all fit-w d-flex">
      <div class="p-8">
        <i
          class="icon-24 text-gray-dark m-t-4"
          c8yIcon="outgoing-data"
        ></i>
      </div>
      <div
        class="p-t-8 p-b-0 p-r-8 flex-grow"
        data-cy="alarm-details-custom-data"
      >
        <p class="text-label-small m-b-4 m-r-8">{{ 'Custom data' | translate }}</p>
        <pre><code>{{ customFragments | json }}</code></pre>
      </div>
    </div>
  </div>
</div>

<div class="d-flex flex-wrap gap-8">
  <button
    class="btn btn-default btn-sm"
    [title]="'Reload audit logs' | translate"
    type="submit"
    (click)="reloadAuditLog(true, true)"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': isLoading }"
    ></i>
    {{ 'Reload audit logs' | translate }}
  </button>

  <button
    class="btn btn-default btn-sm"
    [title]="
      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE
        ? (ACKNOWLEDGE_LABEL | translate)
        : (REACTIVATE_LABEL | translate)
    "
    type="submit"
    (click)="
      onUpdateDetails(
        selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE
          ? ACKNOWLEDGED_STATUS_VALUE
          : ACTIVE_STATUS_VALUE
      )
    "
    [disabled]="selectedAlarm.status === CLEARED_STATUS_VALUE || isAlarmStatusChanging"
  >
    <i
      [c8yIcon]="selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE ? BELL_SLASH_ICON : BELL_ICON"
    ></i>
    {{
      selectedAlarm.status !== ACKNOWLEDGED_STATUS_VALUE
        ? (ACKNOWLEDGE_LABEL | translate)
        : (REACTIVATE_LABEL | translate)
    }}
  </button>

  <button
    class="btn btn-default btn-sm"
    [title]="'Create smart rule' | translate"
    type="submit"
    *ngIf="isCreateSmartRulesButtonAvailable"
    (click)="createSmartRule()"
  >
    <i c8yIcon="c8y-icon c8y-icon-smart-rules"></i>
    {{ 'Create smart rule' | translate }}
  </button>
  <button
    class="btn btn-default btn-sm"
    [title]="'Clear`alarm`' | translate"
    type="submit"
    (click)="onUpdateDetails(CLEARED_STATUS_VALUE)"
    [disabled]="selectedAlarm.status === CLEARED_STATUS_VALUE"
  >
    <i c8yIcon="c8y-alert-idle"></i>
    {{ 'Clear`alarm`' | translate }}
  </button>

  <button
    *ngFor="let button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async"
    class="btn btn-default btn-sm"
    [ngClass]="button.additionalButtonClasses"
    [title]="button.title | translate"
    type="button"
    (click)="detailsButtonAction(button, selectedAlarm)"
    [disabled]="button.disabled"
  >
    <i [ngClass]="button.additionalIconClasses" [c8yIcon]="button.icon"></i>
    <span *ngIf="button.label">{{ button.label | translate }}</span>
  </button>
</div>

<ng-template #noAuditLogAvailable>
  <div class="p-16">
    <c8y-ui-empty-state
      [icon]="'archive'"
      [title]="'No audit logs found.' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
  </div>
</ng-template>

<div class="legend form-block">{{ 'Audit logs' | translate }}</div>

<ng-container *ngIf="isLoading || auditLog?.data.length; else noAuditLogAvailable">
  <c8y-loading *ngIf="isLoading"></c8y-loading>

  <c8y-list-group
    data-cy="c8y-alarms-details--audit-logs"
    *ngIf="!isLoading"
  >
    <c8y-li-timeline *c8yFor="let log of auditLog; loadMore: 'hidden'">
      {{ log.creationTime | date: 'mediumDate' }}
      {{ log.creationTime | date: 'mediumTime' }}
      <c8y-li>
        <c8y-li-body>
          <p class="text-truncate-wrap separator-bottom p-b-4">
            {{ log | auditChangesMessage }}
          </p>
          <div class="c8y-list__item__footer">
            <span
              class="m-r-16 small"
              *ngIf="log.user"
            >
              <span class="text-label-small">
                {{ 'by`user`' | translate }}
              </span>
              {{ log.user }}
            </span>
            <span class="small">
              <span class="text-label-small">
                {{ 'device time' | translate }}
              </span>
              {{ log.time | c8yDate: 'medium' }}
            </span>
          </div>
        </c8y-li-body>
      </c8y-li>
    </c8y-li-timeline>
  </c8y-list-group>
</ng-container>