<ng-container *ngIf="!isContextRoute">
  <c8y-title>{{ TITLE | translate }}</c8y-title>
</ng-container>

<div
  class="inner-scroll split-view__detail split-view__detail--selected"
  *ngIf="selectedAlarm$ | async"
>
  <div class="sticky-top bg-component">
    <div class="card-header gap-16 d-block-xs d-block-sm p-l-24 p-r-24 p-t-16 separator">
      <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"
          data-cy="c8y-alarms-info--title"
        >
          {{ (selectedAlarm$ | async)?.text | translate }}
        </div>
      </div>
      <div class="p-relative">
        <c8y-tabs-outlet
          outletName="alarms"
          orientation="horizontal"
        ></c8y-tabs-outlet>
      </div>
    </div>
    <div class="card-block overflow-visible p-l-24 p-r-24">
      <c8y-alarm-details [selectedAlarm]="selectedAlarm$ | async"></c8y-alarm-details>
    </div>
  </div>
</div>