<div
  class="inner-scroll split-view__detail split-view__detail--selected"
  *ngIf="selectedAlarm$ | async"
>
  <div
    class="card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator sticky-top bg-component"
  >
    <button
      class="btn btn-clean text-primary visible-sm visible-xs"
      [title]="'Back' | translate"
      (click)="back()"
    >
      <i c8yIcon="chevron-left"></i>
      <span>{{ 'Back' | translate }}</span>
    </button>

    <div class="flex-no-shrink a-s-start"></div>
    <div class="flex-grow d-col">
      <div class="text-break-word flex-grow text-16">
        {{ (selectedAlarm$ | async)?.text | translate }}
      </div>
    </div>
  </div>
  <div
    class="card-block overflow-visible p-l-24 p-r-24"
    *ngIf="!isLoading; else loading"
  >
    <c8y-alarm-details
      [isSmartRulesServiceSubscribed]="isSmartRulesServiceSubscribed"
      [hasAnyRoleAllowingToCreateSmartRule]="hasAnyRoleAllowingToCreateSmartRule"
      [selectedAlarm]="selectedAlarm$ | async"
    ></c8y-alarm-details>
  </div>
  <ng-template #loading>
    <div class="d-flex d-col a-i-center j-c-center fit-h">
      <c8y-loading></c8y-loading>
    </div>
  </ng-template>
</div>