<div fxLayout="row">
  <div fxFlex="100">
    <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
      <div fxFlex="95" fxLayoutAlign="start start">
        <span class="page-title">{{data.alertTitle || alertTypeEnum[data.type]}}</span>
      </div>
      <button tabindex="8" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose(false)">X</button>
    </mat-card-header>    
    <mat-card-content class="padding-gap-x-large">
      <form fxLayout="column">
        <div *ngIf="warningMessage && warningMessage !== ''" fxFlex="100" class="alert alert-warn">
          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
          <span>{{warningMessage}}</span>
        </div>
        <div *ngIf="informationMessage && informationMessage !== ''" fxFlex="100" class="alert alert-info">
          <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
          <span>{{informationMessage}}</span>
        </div>
        <p *ngIf="data.titleMessage && !flgShowInput" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
        <div *ngIf="messageObjs?.length>0">
          <div *ngFor="let objs of messageObjs; index as i;">
            <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.gt-md="space-between start">
              <div *ngFor="let obj of objs; index as j;" fxLayout="column" fxFlex="100" fxFlex.gt-md="{{obj.width}}">
                <h4 fxLayoutAlign="start" class="font-bold-500">{{obj.title}}</h4>
                <span *ngIf="obj && (!!obj.value || obj.value === 0); else emptyField">
                  <span class="foreground-secondary-text" [ngSwitch]="obj.type">
                    <ng-container *ngSwitchCase="dataTypeEnum.ARRAY" fxLayout="row wrap" fxLayoutAlign="space-between stretch">
                      <div *ngFor="let arrayObj of obj.value" [innerHTML]="arrayObj"></div>
                    </ng-container>
                    <ng-container *ngSwitchCase="dataTypeEnum.DATE_TIME">{{(obj.value * 1000) | date:'dd/MMM/y HH:mm'}}</ng-container>
                    <ng-container *ngSwitchCase="dataTypeEnum.NUMBER">{{obj.value | number:'1.0-3'}}</ng-container>
                    <ng-container *ngSwitchCase="dataTypeEnum.BOOLEAN">{{obj.value === true ? 'True' : 'False'}}</ng-container>
                    <ng-container *ngSwitchDefault>{{obj.value}}</ng-container>
                  </span>
                </span>
                <ng-template #emptyField>
                  <span fxFlex="100" class="foreground-secondary-text">&nbsp;</span>
                </ng-template>
                <mat-divider class="w-100 my-1" />
              </div>    
            </div>
          </div>
        </div>
        <div *ngIf="flgShowInput" fxLayout="column" class="bordered-box my-2 p-2">
          <p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
          <div fxLayout="row wrap" fxLayoutAlign="space-between center">
            <ng-container *ngFor="let getInput of getInputs; index as i">
              <mat-form-field *ngIf="!getInput.advancedField || showAdvanced" [fxFlex]="getInput.width">   
                <mat-label>{{getInput.placeholder}}</mat-label>
                <input matInput required [autoFocus]="i === 0" name="input{{i}}" [min]="getInput.min" [step]="getInput.step" [type]="getInput.inputType | lowercase" [tabindex]="i+1" [(ngModel)]="getInput.inputValue">
                <mat-error *ngIf="!getInput.inputValue">{{getInput.placeholder}} is required.</mat-error>
                <mat-hint>{{getInput.hintFunction ? getInput.hintFunction(getInput.inputValue) : getInput.hintText}}</mat-hint>
              </mat-form-field>
          </ng-container>
          </div>        
        </div>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button mat-button color="primary" type="reset" class="mr-1" tabindex="1" (click)="onClose(false)">{{noBtnText}}</button>
          <button *ngIf="hasAdvanced" mat-button color="primary" type="button" class="mr-1" tabindex="2" (click)="onShowAdvanced()">
            <p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
            <ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
          </button>
          <button *ngIf="flgShowInput" autoFocus mat-button color="primary" type="submit" tabindex="3" default (click)="onClose(getInputs)">{{yesBtnText}}</button>
          <button *ngIf="!flgShowInput" autoFocus mat-button color="primary" type="submit" tabindex="4" default (click)="onClose(true)">{{yesBtnText}}</button>
        </div>
      </form>
    </mat-card-content>
  </div>
</div>
