<alert type="{{ bootstrapClass }}">
  <table>
    <ng-container *ngIf="size === 'normal'; else slim">
      <tr>
        <td *ngIf="showIcon"
            rowspan="2"
            class="alert-panel-icon">
          <i [ngClass]="[icons.large3x]"
             class="alert-{{ bootstrapClass }} {{ typeIcon }}"
             aria-hidden="true"></i>
        </td>
        <td *ngIf="showTitle"
            class="alert-panel-title">{{ title }}</td>
      </tr>
      <tr>
        <td class="alert-panel-text">
          <ng-container *ngTemplateOutlet="content"></ng-container>
        </td>
      </tr>
    </ng-container>
    <ng-template #slim>
      <tr>
        <td *ngIf="showIcon"
            class="alert-panel-icon">
          <i class="alert-{{ bootstrapClass }} {{ typeIcon }}"
             aria-hidden="true"></i>
        </td>
        <td *ngIf="showTitle"
            class="alert-panel-title">{{ title }}</td>
        <td class="alert-panel-text">
          <ng-container *ngTemplateOutlet="content"></ng-container>
        </td>
      </tr>
    </ng-template>
  </table>
</alert>

<ng-template #content>
  <ng-content></ng-content>
</ng-template>

<div class="button-group text-right"
     *ngIf="backAction.observers.length > 0">
  <button class="btn btn-light tc_backButton"
          type="button"
          (click)="backAction.emit()"
          autofocus
          i18n>Back</button>
</div>
