<div class="root-window" *ngIf="show">
    <!-- Generate BG shade for below modal -->
</div>

<div class="dialogue-sm {{roundedgeclass}}" [@animation]="{value: 'visible', params: {transitionParams: transitionOptions}}" *ngIf="show">
    <div role="dialog" attr.aria-labelledby="componentId" class="dialogue-content">
        <header class="{{themeCss}}" [ngClass]="{'dialogue-material-design':materialDesign ,'dialogue-header':!materialDesign}">
            <div id="{{componentId}}" tabindex="1" class="dialogue-table">
                <div class="tablerow">
                    <div class="tablecol">
                        {{title}}
                    </div>
                    <div tabindex="1" aria-label="close button" class="tablecol float-right">
                        <div *ngIf="closable" class="icon-style">
                            <amexio-c-icon [key]="'window_close'" (onClick)="onCloseClick()"></amexio-c-icon>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="dialogue-middle" [ngStyle]="{'text-align':custom ? contentalign :'center'}">
            <span role="dialog" attr.aria-labelledby="componentId" class="dialogue-icon">
        <span  [ngClass]="{'dialogue-success': messagetype  == 'help','dialogue-danger':messagetype  == 'error',
                      'dialogue-warning': messagetype  == 'warning'}"
          *ngIf="messagetype  || messagetype  != '' ">
          <amexio-c-icon [key]="'window-msgtype-'+ messagetype "></amexio-c-icon>
        </span>
            <ng-container *ngIf="!custom">
                <span id="{{componentId}}" tabindex="1" class="dialogue-message">
            {{message}}
          </span>
            </ng-container>
            </span>
            <ng-container *ngIf="custom">
                <ng-content select="amexio-body"></ng-content>
            </ng-container>

        </div>
        <footer *ngIf="custom" class="dialogue-footer" [ngClass]="{'flex-start':(footeralign=='left'),'flex-end':(footeralign=='right'),'flex-center':(footeralign=='center')}">
            <ng-content select="amexio-action"></ng-content>
        </footer>

        <footer *ngIf="!custom" class="dialogue-footer" [ngClass]="{'dialogue-material-design-footer':materialDesign ,
                        'dialogue-footer':!materialDesign, 'flex-start':(footeralign=='left'),
                        'flex-end':(footeralign=='right'),'flex-center':(footeralign=='center')}">
            <amexio-button *ngIf="type =='confirm'" [size]="buttonsize" [label]="secondaryactionlabel" [type]="defaultStyle" (onClick)="getStatus('cancel')"></amexio-button>
            <div class="custom-btn">
                <amexio-button *ngIf="type =='confirm' || type == 'alert'" [size]="buttonsize" [label]="primaryactionlabel" [ngStyle]="{'color':materialDesign ? 'blue':'white'}" [type]="buttontype" (onClick)="getStatus('ok')">
                </amexio-button>
            </div>

        </footer>
    </div>
</div>