<ng-container *ngIf="!showOnlyMessage">
  <ng-container [ngSwitch]="layout" *ngIf="errorList?.length > 0">
    <ng-container *ngSwitchCase="'inline'">
      <button type="button" class="btn btn-link" [popover]="popTemplate"
        *ngIf="expand && errorList.length > 1; else mainError">
        <small class="text-danger d-block">
          <i class="fas fa-minus-circle mr-2" aria-hidden="true"></i>
          {{message | translate}}
        </small>
      </button>
      <ng-template #mainError>
        <ng-template [ngTemplateOutlet]="mainBlock" [ngTemplateOutletContext]="{error: errorList[0]}"></ng-template>
      </ng-template>

      <ng-template #popTemplate>
        <ng-template [ngTemplateOutlet]="mainBlock" [ngTemplateOutletContext]="{error: error}"
          *ngFor="let error of errorList"></ng-template>
      </ng-template>

      <ng-template #mainBlock let-error="error">
        <small class="text-danger d-block pt-lg-0 pt-md-0 pt-sm-1 pt-1">
          {{error?.message | translate:error?.parameter}}
        </small>
      </ng-template>
    </ng-container>

    <ng-container *ngSwitchCase="'alert'">
      <ng-template [ngTemplateOutlet]="collapseError" [ngTemplateOutletContext]="{error: error, index: i}"
        *ngFor="let error of errorList; let i = index; trackBy: trackByFn"></ng-template>
      <ng-template #collapseError let-error="error" let-index="index">
        <ng-container *ngIf="error?.children?.length > 0; else singleError">
          <div class="alert alert-danger p-1 accordion mb-0" [id]="'alert' + index">
            <button class="btn btn-link text-dark" type="button" data-toggle="collapse"
              [attr.data-target]="'#collapse' + index" aria-expanded="false">
              <i class="fas fa-minus-circle mr-2 text-danger" aria-hidden="true"></i>
              <span class="font-weight-bold">{{message | translate}}</span>
            </button>

            <div [id]="'collapse' + index" class="collapse child-errors" [attr.data-parent]="'#alert' + index">
              <div *ngFor="let childError of error.children" class="mb-0 pl-5 text-dark">
                {{childError?.message | translate:childError?.parameter}}
                <a class="text-underline" *ngIf="childError?.reference" href="javascript:void(0)"
                  [routerLink]="childError?.reference?.value">
                  {{childError?.reference?.key}}
                </a>
              </div>
            </div>
          </div>
        </ng-container>

        <ng-template #singleError>
          <div [class]="'alert ' + alertColorMap[error?.type] + ' flex-grow-1 mb-0'">
            <i class="fas fa-minus-circle mr-2" aria-hidden="true"></i>
            {{error?.message | translate:error?.parameter}}
          </div>
        </ng-template>
      </ng-template>

    </ng-container>
  </ng-container>

</ng-container>

<ng-container *ngIf="!hideAlert">
  <div *ngFor="let view of (view$ | async) as views">
    <div *ngIf="view?.show" [class]="'alert ' + alertColorMap[view?.messageType] + ' accordion mb-0 btn-text-transform row'">
      <i class="fa fa-exclamation-circle my-auto ml-4 mt-1 mr-2  text-danger" aria-hidden="true"></i>
      <span class="font-weight-bold my-auto">{{view?.message | translate}}</span>
      <button type="button" class="close  d-sm-block d-block d-lg-none d-md-none pull-right py-0 ml-auto pr-3 text-dark"
        (click)="closeError(view)" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="ml-lg-auto ml-md-auto ml-sm-4 ml-4 mr-3 pt-lg-0 pt-md-0 pt-sm-1 pt-1">
        <span *ngFor="let action of view?.actions">
          <button
            class="btn ml-lg-5 ml-md-5 ml-sm-4 ml-4 px-2 py-0 bg-white border-secondary btn btn-outline-primary ladda-button text-right"
            (click)="action.onClick(action?.label)" [ladda]="action.loader === action.label" [attr.data-style]="'zoom-in'">
            {{ action.label | translate }}</button>
        </span>
        <button type="button" class="close d-sm-none d-none d-lg-block d-md-block pull-right py-0 ml-2 text-dark"
          (click)="closeError(view)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="showOnlyMessage">
  <div [class]="'alert ' + alertColorMap[messageType] + ' flex-grow-1 mb-0'">
    <i class="fas fa-info-circle mr-2" aria-hidden="true"></i>
    {{message | translate}}
</div>

./alert.component.scss