@if (selectedAlarm) {
  <div
    class="card-header p-24 m-b-16 bg-component separator-bottom sticky-top"
    style="margin: 0 -24px"
  >
    <h4
      class="m-0"
      data-cy="c8y-alarm-details-title"
    >
      {{ selectedAlarm.text | translate }}
    </h4>
  </div>
}

<c8y-icon-panel [sections]="alarmInfoSections">
  @if (showSections && !hiddenSections?.source) {
    <div
      class="col-xs-12 col-md-6 d-flex p-b-8"
      data-cy="c8y-alarm-details--source-wrapper"
    >
      <div class="border-all fit-w d-flex">
        <div class="p-8">
          <i
            class="icon-24 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 text-left"
              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>
            @if (showSourceNavigationLink$ | async) {
              <button
                class="btn-link p-0 text-left"
                title="{{
                  linkTitle
                    | translate
                      : { appName: userDeviceManagementApp$ | async | humanizeAppName | async }
                }}"
                type="button"
                (click)="goToAlarmSource(selectedAlarm?.id)"
                data-cy="alarm-details-device-management-link"
              >
                {{ userDeviceManagementApp$ | async | humanizeAppName | async }}
                <i c8yIcon="external-link"></i>
              </button>
            }
          </p>
        </div>
      </div>
    </div>
  }

  @if (showSections && !hiddenSections?.type) {
    <div
      class="col-xs-12 col-md-6 d-flex p-b-8"
      data-cy="c8y-alarm-details--severity-type-wrapper"
    >
      <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"
          data-cy="c8y-alarm-details--last-updated-icon"
        ></i>
      </div>
      <div class="p-t-8 p-b-0 p-r-8 flex-grow">
        <div class="content-flex-50">
          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.occurrenceCount) {
            <div
              class="col-4 p-b-8"
              data-cy="c8y-alarm-details--number-of-occurrences-wrapper"
            >
              <p class="text-label-small m-b-0 m-r-8">
                {{ 'Number of occurrences' | translate }}
              </p>
              <p>
                <span
                  class="badge badge-info"
                  data-cy="c8y-alarm-details--badge"
                >
                  {{ selectedAlarm?.count }}
                </span>
              </p>
            </div>
          }
          @if (selectedAlarm?.count > 1 && showSections && !hiddenSections?.firstOccurrence) {
            <div
              class="col-4 p-b-8"
              data-cy="c8y-alarm-details--first-occurrence-wrapper"
            >
              <p class="text-label-small m-b-0 m-r-8">{{ 'First occurrence' | translate }}</p>
              <p class="small">
                {{ selectedAlarm?.creationTime | c8yDate: 'medium' }}
                <button
                  class="btn-help btn-help--sm"
                  [attr.aria-label]="'Help' | translate"
                  popover="{{
                    'Time in which the alarm was created. The time shown corresponds to the server\'s time. Device time can be different from server time.'
                      | translate
                  }}"
                  placement="right"
                  triggers="focus"
                  container="body"
                  type="button"
                ></button>
              </p>
            </div>
          }
          @if (showSections && !hiddenSections?.lastOccurrence) {
            <div
              class="col-4 p-b-8"
              data-cy="c8y-alarm-details--last-updated-wrapper"
            >
              <p class="text-label-small m-b-0 m-r-8">{{ 'Last occurrence' | translate }}</p>
              <p class="small">
                {{ selectedAlarm?.lastUpdated | c8yDate: 'medium' }}
                <button
                  class="btn-help btn-help--sm"
                  [attr.aria-label]="'Help' | translate"
                  popover="{{
                    'Time in which the alarm was last updated. The time shown corresponds to the server\'s time. Device time can be different from server time.'
                      | translate
                  }}"
                  placement="right"
                  triggers="focus"
                  container="body"
                  type="button"
                ></button>
              </p>
            </div>
          }
        </div>
      </div>
    </div>
  </div>

  @if (customFragments && showSections && !hiddenSections?.customData) {
    <div
      class="col-xs-12 col-md-12 p-b-16"
      data-cy="c8y-alarm-details--custom-fragments-wrapper"
    >
      <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>
  }
</c8y-icon-panel>

@if (showActions) {
  <c8y-sv-details-actions [actions]="alarmActions">
    @for (button of selectedAlarm | alarmDetailsButton: selectedAlarmMO | async; track $index) {
      <button
        class="btn btn-default btn-sm no-swing"
        [title]="button.title | translate"
        type="button"
        [ngClass]="button.additionalButtonClasses"
        (click)="detailsButtonAction(button, selectedAlarm!)"
        [disabled]="button.disabled"
      >
        <i
          [c8yIcon]="button.icon"
          [ngClass]="button.additionalIconClasses"
        ></i>
        @if (button.label) {
          <span>{{ button.label | translate }}</span>
        }
      </button>
    }
  </c8y-sv-details-actions>
}

@if (showSections && !hiddenSections?.auditLogs) {
  <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>
    <div class="legend form-block">{{ 'Audit logs' | translate }}</div>

    @if (isLoading || auditLog?.data.length) {
      @if (isLoading) {
        <c8y-loading></c8y-loading>
      }

      @if (!isLoading) {
        <c8y-list-group data-cy="c8y-alarms-details--audit-logs">
          <c8y-li-timeline *c8yFor="let log of auditLog; loadMore: 'hidden'">
            {{ log.creationTime | c8yDate: 'mediumDate' }}
            {{ log.creationTime | c8yDate: '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">
                  @if (log.user) {
                    <span class="m-r-16 small">
                      <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>
      }
    } @else {
      <ng-container [ngTemplateOutlet]="noAuditLogAvailable"></ng-container>
    }
  </div>
}