<div class="title_section divider">
    <div class="hidden-xs" *ngIf="applicationSettings?.logoBase64">
        <img class="logo_header_popup"
            src="data:image/{{applicationSettings.tipo}};base64,{{applicationSettings.logoBase64}}" />
    </div>
    <div class="title_header_popup">
        <h2 mat-dialog-title>
            <i class="fa fa-exclamation-triangle" [hidden]="!fileErrorDetail"></i><span> {{'label.file-upload.title' | translate}} </span>
        </h2>
    </div>
</div>

<mat-dialog-content class="none-overflow" [hidden]="fileErrorDetail">
    <h4>
        {{'label.file-upload.description' | translate}}
    </h4>

    <form [formGroup]="formGroup" autocomplete="off">
        <div class="row pt-2">
            <div class="col-12">
                <mat-form-field class="amd-form-control">
                    <input matInput [placeholder]="'label.description' | translate" formControlName="description"
                        maxlength="50" required>
                </mat-form-field>
            </div>
        </div>
        <div class="row pt-2" *ngIf="createMode">
            <div class="col-12">
                <mat-form-field class="amd-form-control">
                    <ngx-mat-file-input formControlName="file" [placeholder]="'label.file' | translate"
                        [accept]="'.xls,.xlsx,.csv'" required (change)="uploadFile($event.target.files)">
                    </ngx-mat-file-input>
                    <mat-icon matSuffix>folder</mat-icon>
                </mat-form-field>
            </div>
        </div>
        <div class="row pt-2" *ngIf="fileErrorDetail">
            <div class="col-12">
                <h4>
                    <b>Detalle de error</b>
                </h4>
            </div>
            <div class="col-12">
                <div class="example-container mat-elevation-z8">
                    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
                        <!-- Position Column -->
                        <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
                            <th mat-header-cell *matHeaderCellDef> {{ 'header.' + column | translate}} </th>
                            <td mat-cell *matCellDef="let element"> {{element[column] | translate}}</td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="row pt-2" *ngIf="!createMode">
            <div class="col-12">
                <mat-form-field class="amd-form-control">
                    <input matInput [placeholder]="'label.file' | translate" formControlName="filename" required>
                    <mat-icon matSuffix [matTooltip]="'label.file.tooltip' | translate" matTooltipPosition="above">
                        help_icon
                    </mat-icon>
                </mat-form-field>
            </div>
        </div>
    </form>

</mat-dialog-content>

<mat-dialog-content class="none-overflow" [hidden]="!fileErrorDetail">
    <h4>
        {{'label.file-upload.error.description' | translate}}
    </h4>

    <div class="row pt-2" *ngIf="fileErrorDetail">
        <!-- <div class="col-12">
            <h4>
                <b>{{'label.file-upload.error.subtitle' | translate}}</b>
            </h4>
        </div> -->
        <div class="col-12">
            <div class="example-container mat-elevation-z8">
                <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
                    <!-- Position Column -->
                    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
                        <th mat-header-cell *matHeaderCellDef> {{ 'header.' + column | translate}} </th>
                        <td mat-cell *matCellDef="let element"> {{element[column] | translate}}</td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
            </div>
        </div>
    </div>

</mat-dialog-content>
<!-- <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>{{'btn.cancel' | translate}}</button>
    <button mat-button (click)="retry()" *ngIf="fileErrorDetail">{{'btn.retry' | translate}}</button>
    <button mat-button (click)="ok()" cdkFocusInitial *ngIf="!fileErrorDetail"
        [disabled]="formGroup.invalid || !enabledOK">{{'btn.accept' | translate}}</button>
</mat-dialog-actions> -->
<div mat-dialog-actions class="border-top">
    <button mat-button mat-dialog-close [disabled]="loadingfile">{{'btn.cancel' | translate}}</button>
    <button mat-button (click)="retry()" *ngIf="fileErrorDetail">{{'btn.retry' | translate}}</button>
    <button mat-button (click)="accepted()" cdkFocusInitial *ngIf="!fileErrorDetail"
        [disabled]="formGroup.invalid || !enabledOK">{{'btn.accept' | translate}} 
    </button>
    <div class="spiner-example" *ngIf="loadingfile" style="height:10px;padding-top: 0px;padding-left: 10px;margin-bottom: 15px;">
        <div class="sk-spinner sk-spinner-circle">
            <div class="sk-circle1 sk-circle"></div>
            <div class="sk-circle2 sk-circle"></div>
            <div class="sk-circle3 sk-circle"></div>
            <div class="sk-circle4 sk-circle"></div>
            <div class="sk-circle5 sk-circle"></div>
            <div class="sk-circle6 sk-circle"></div>
            <div class="sk-circle7 sk-circle"></div>
            <div class="sk-circle8 sk-circle"></div>
            <div class="sk-circle9 sk-circle"></div>
            <div class="sk-circle10 sk-circle"></div>
            <div class="sk-circle11 sk-circle"></div>
            <div class="sk-circle12 sk-circle"></div>
        </div>
    </div>
    <!-- <div *ngIf="loadingfile" class="spinner-border" style="margin:auto" ></div> -->
</div>