<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-menu-button menu="left-menu"></ion-menu-button>
        </ion-buttons>
        <ion-title class="ion-text-center">{{'lang.newDocumentToVisa' | translate}}</ion-title>
        <ion-buttons slot="end">
            <ion-menu-button menu="right-menu">
                <ion-icon name="list-outline"></ion-icon>
            </ion-menu-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div style="display: flex;flex-direction: column;height: 100%;">
        <ion-list *ngIf="filesToUpload.length > 0">
            <ion-list-header>
                <ion-label color="primary">{{'lang.documentsToUpload' | translate}}</ion-label>
            </ion-list-header>
            <ion-item *ngFor="let file of filesToUpload;let i=index">
                <ion-buttons slot="start">
                    <ion-button fill="clear" slot="icon-only" shape="round" color="primary"
                        [title]="file.mainDocument ? ('lang.docToSign' | translate) : ('lang.attachDocToSign' | translate)"
                        (click)="file.mainDocument=!file.mainDocument">
                        <ion-icon *ngIf="file.mainDocument" slot="icon-only" name="pencil-outline"></ion-icon>
                        <ion-icon *ngIf="!file.mainDocument" slot="icon-only" name="document-attach-outline"></ion-icon>
                    </ion-button>
                </ion-buttons>
                <ion-item style="width: 100%;">
                    <ion-label position="floating" color="secondary">{{'lang.reference' | translate}}</ion-label>
                    <ion-input placeholder="{{'lang.fileReference' | translate}}" matInput type="text" [(ngModel)]="file.reference" [disabled]="!file.mainDocument"></ion-input>
                </ion-item>
                <ion-item style="width: 100%;">
                    <ion-label position="floating" color="secondary">{{'lang.subject' | translate}} *</ion-label>
                    <ion-input placeholder="{{'lang.filename' | translate}}" matInput type="text" [(ngModel)]="file.title"></ion-input>
                </ion-item>
                <ion-buttons slot="end">
                    <ion-button [disabled]="!file.mainDocument" fill="clear" slot="icon-only" shape="round" color="primary"
                        [title]="'lang.setSignaturesPosition' | translate" (click)="signPos(i)">
                        <i *ngIf="filesToUpload[i].signPos !== undefined && filesToUpload[i].signPos.length > 0" class="badge-sign-pos"></i>
                        <ion-icon slot="icon-only" name="contract-outline"></ion-icon>
                    </ion-button>
                    <ion-button fill="clear" slot="icon-only" shape="round" color="danger"
                        [title]="'lang.delete' | translate" (click)="deleteFile(i)">
                        <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
                    </ion-button>
                </ion-buttons>
            </ion-item>
        </ion-list>
        <input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;" multiple accept="application/pdf">
        <div class="dnd-area" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)">
            <ion-button fill="outline" color="medium" size="large" (click)="docToUpload.click()">
                {{'lang.chooseDocuments' | translate}}
            </ion-button>
            <ion-item lines="none" class="ion-text-center no-background">
                <ion-label color="medium">
                    {{'lang.dndDocuments' | translate}}
                </ion-label>
            </ion-item>
        </div>
    </div>
</ion-content>
<ion-footer class="ion-no-border">
    <div class="ion-text-center" style="background: white;">
        <ion-button color="primary" shape="round" size="large" fill="outline" (click)="onSubmit()">
            <ion-label style="font-size: 13px;">{{'lang.validate' | translate}}</ion-label>
        </ion-button>
    </div>
</ion-footer>
<ng-template #rightContent>
    <app-visa-workflow #appVisaWorkflow style="display: contents;" [editMode]="true">
    </app-visa-workflow>
</ng-template>