<div
  class="alert animated fadeInRightBig m-t-16"
  data-cy="c8y-alert--message"
  *ngFor="let alert of alerts | async"
  [ngClass]="[getClass(alert), isDetailsShow(alert) ? 'expanded' : '']"
>
  <button
    class="close"
    title="{{ 'Close' | translate }}"
    type="button"
    (click)="close(alert)"
  >
    <span
      aria-hidden="true"
      data-cy="alert--close-alert-message"
    >
      <i c8yIcon="times"></i>
    </span>
    <span class="sr-only">{{ 'Close' | translate }}</span>
  </button>

  <div *ngIf="!isTemplateRef(alert.text); else template(alert.text)">
    <strong
      class="message"
      *ngIf="!alert.allowHtml"
      [textContent]="alert.text | translate"
    ></strong>
    <strong
      class="message"
      *ngIf="alert.allowHtml"
      [innerHTML]="alert.text | translate"
    ></strong>
  </div>
  <p
    class="text-muted m-t-8"
    *ngIf="hasDetails(alert) && !isDetailsShow(alert)"
  >
    <button
      class="btn btn-clean"
      title="{{ 'Show details' | translate }}"
      (click)="showDetails(alert)"
    >
      <i c8yIcon="chevron-down"></i>
      {{ 'Show details' | translate }}
    </button>
  </p>
  <p
    class="text-muted m-t-8"
    *ngIf="hasDetails(alert) && isDetailsShow(alert)"
  >
    <button
      class="btn btn-clean"
      title="{{ 'Hide details' | translate }}"
      (click)="closeDetails()"
    >
      <i c8yIcon="chevron-up"></i>
      {{ 'Hide details' | translate }}
    </button>
  </p>
  <div *ngIf="isDetailsShow(alert)">
    <div *ngIf="!isTemplateRef(detailDisplayedAlert.contents); else template(alert.detailedData)">
      <pre><code [textContent]="detailDisplayedAlert.contents | translate"></code></pre>
    </div>
  </div>
</div>