<ng-container *ngFor="let alertGroup of alerts.alertGroups">
  <div
    *ngIf="alertGroup?.value?.alerts?.length"
    class="alert"
    role="alert"
    [ngClass]="'alert-' + alertGroup.type"
  >
    <button
      class="close"
      type="button"
      *ngIf="
        alertGroup.value.alertDismissal.dismissStrategy === dismissAlertStrategy.TEMPORARY ||
        alertGroup.value.alertDismissal.dismissStrategy ===
          dismissAlertStrategy.TEMPORARY_OR_PERMANENT
      "
      (click)="alerts.dismissAlertGroup(alertGroup.type, dismissPermanently.checked)"
    >
      <span aria-hidden="true">×</span>
      <span class="sr-only">Close</span>
    </button>
    <div *ngFor="let alertItem of alertGroup.value.alerts; let i = index" class="m-t-8">
      <ng-container *ngIf="!isTemplateRef(alertItem.text); else template(alertItem.text)">
        <p
          *ngIf="!alertItem.allowHtml"
          [textContent]="alertItem.text | translate"
          class="message"
        ></p>
        <p *ngIf="alertItem.allowHtml" [innerHTML]="alertItem.text | translate" class="message"></p>
      </ng-container>

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

    <label
      title="{{ 'Don\'t show again' | translate }}"
      class="c8y-checkbox m-t-16"
      [class.hidden]="
        alertGroup.value.alertDismissal.dismissStrategy !==
        dismissAlertStrategy.TEMPORARY_OR_PERMANENT
      "
    >
      <input type="checkbox" #dismissPermanently />
      <span></span>
      <span>{{ "Don't show again" | translate }}</span>
    </label>
  </div>
</ng-container>