<ion-header *ngIf="!loadingdocument" [translucent]="true">
    <ion-toolbar color="light">
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>
        <ion-segment value="favorite" [value]="signaturesService.sideNavRigtDatas.mode"
            (ionChange)="signaturesService.sideNavRigtDatas.mode=$event.detail.value">
            <ion-segment-button value="mainDocumentDetail" (click)="openMainDocumentDetail();">
                <ion-label color="primary">{{'lang.informations' | translate}}</ion-label>
                <ion-icon color="primary" name="information-circle"></ion-icon>
            </ion-segment-button>
            <ion-segment-button value="documentList" (click)="openDocumentList();">
                <ion-label color="primary">{{'lang.attachedElements' | translate | ucfirst}}</ion-label>
                <ion-icon color="primary" name="document-attach-outline"></ion-icon>
                <ion-badge color="danger" style="position: absolute;top: 10px;right: 40%;">
                    {{mainDocument.attachments.length + 1}}
                </ion-badge>
            </ion-segment-button>
            <ion-segment-button value="linkeddoc"
                *ngIf="mainDocument.linkedDocuments !== undefined && mainDocument.linkedDocuments.length > 0"
                (click)="openDocumentList();">
                <ion-label color="primary">{{'lang.associatedDocuments' | translate | ucfirst}}</ion-label>
                <ion-icon color="primary" name="link-outline"></ion-icon>
                <ion-badge color="danger" style="position: absolute;top: 10px;right: 40%;">
                    {{mainDocument.linkedDocuments.length}}
                </ion-badge>
            </ion-segment-button>
            <ion-segment-button value="visaWorkflow" (click)="openVisaWorkflow();">
                <ion-label color="primary">{{'lang.circuit' | translate}}</ion-label>
                <ion-icon color="primary" name="list-outline"></ion-icon>
                <ion-badge color="danger" style="position: absolute;top: 10px;right: 40%;">
                    {{mainDocument.workflow.length}}
                </ion-badge>
            </ion-segment-button>
        </ion-segment>
        <ion-buttons slot="end">
            <ion-button color="primary" (click)="openAction()">
              <ion-icon slot="icon-only" name="settings-sharp"></ion-icon>
            </ion-button>
          </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-toolbar class="ion-text-center" color="primary"
    *ngIf="authService.user.substitute !== null && !this.signaturesService.annotationMode && docList[currentDoc]">
    <ion-label style="font-size: 13px;">{{'lang.substitutionInfo' | translate}}</ion-label>
</ion-toolbar>
<ion-toolbar class="ion-text-center" color="danger" *ngIf="mainDocument.id !== 0 && mainDocument.status !== 'READY'">
    <ion-label style="font-size: 13px;">{{'lang.convertingDocument' | translate}}</ion-label>
</ion-toolbar>
<ion-content *ngIf="!loadingdocument" #mainContent>
    <ng-container *ngIf="mainDocument.notes !== undefined && mainDocument.notes !== null">
        <ion-fab-button *ngIf="!expandedNote" ngDraggable [bounds]="myBounds" [inBounds]="true"
            (movingOffset)="signaturesService.dragging=true" (endOffset)="signaturesService.dragging=false"
            [title]="'lang.expandNote' | translate" (click)="expandedNote = true;"
            style="top: 40px;right: 40px;z-index:2;position:absolute;" [disabled]="signaturesService.dragging">
            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
        </ion-fab-button>
        <div ngDraggable (movingOffset)="signaturesService.dragging=true" (endOffset)="signaturesService.dragging=false"
            [bounds]="myBounds" [inBounds]="true" *ngIf="expandedNote" class="note">
            <div class="note-title">
                <i class="far fa-sticky-note" style="padding-right: 5px;"></i>
                <span style="flex:1;">{{'lang.note' | translate}}</span>
                <i class="fa fa-minus-square" style="cursor: pointer;" (click)="expandedNote = false;"
                    [title]="'lang.collapseNote' | translate"></i>
            </div>
            <div class="note-creator">
                {{mainDocument.notes.creator}} :
            </div>
            <div class="note-content">
                {{mainDocument.notes.value}}
            </div>
        </div>
    </ng-container>
    <div style="display: contents;">
        <drag-scroll style="overflow:auto;height: 100%;width: 100%;margin: auto;"
            [drag-scroll-disabled]="(signaturesService.dragging || signaturesService.resizing) && signaturesService.mobileMode"
            [drag-disabled]="(signaturesService.dragging || signaturesService.resizing) && !signaturesService.mobileMode"
            [style.maxWidth.px]="signaturesService.workingAreaWidth" #nav (click)="currentDoc == 0 ? openAction() : false"  (dblclick)="currentDoc == 0 ? openNoteEditor($event) : false">
            <div style="position:relative;cursor: grab;" [style.width.px]="signaturesService.workingAreaWidth"
                [style.height.px]="signaturesService.workingAreaHeight" id="myBounds" #myBounds>
                <app-document-note-list *ngIf="currentDoc == 0 && !loadingImage">
                </app-document-note-list>
                <app-document-sign-list *ngIf="currentDoc === 0 && !loadingImage" [bounds]="myBounds">
                </app-document-sign-list>
                <ion-img
                    *ngIf="docList[currentDoc] !== undefined && !signaturesService.empty(docList[currentDoc].imgContent[pageNum])"
                    class="img-content" [src]="docList[currentDoc].imgContent[pageNum]"
                    [style.width.px]="signaturesService.workingAreaWidth"
                    [style.height.px]="signaturesService.workingAreaHeight" (ionImgDidLoad)="imageLoaded($event)" #img>
                </ion-img>
                <!--<ngx-extended-pdf-viewer style="display: none;" [src]="pdfname" [useBrowserLocale]="true"
                    [textLayer]="false" [showHandToolButton]="true" (pdfLoaded)="onPagesLoaded($event)">
                </ngx-extended-pdf-viewer>-->
            </div>
        </drag-scroll>
    </div>
    <section class="page-info"
        *ngIf="!signaturesService.dragging && !signaturesService.resizing && docList[currentDoc]">
        <div class="page-info-doc">{{docList[currentDoc].title}}</div>
        <div class="page-info-page">{{'lang.page' | translate}} {{ pageNum }} / {{ totalPages }}</div>
    </section>
    <ng-container *ngIf="!signaturesService.dragging && !signaturesService.resizing && !loadingImage">
        <ion-fab-button *ngIf="pageNum > 1 && !loadingImage" (click)="prevPage()" class="paginate-left">
            <ion-icon name="chevron-back-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button *ngIf="pageNum < totalPages && !loadingImage" (click)="nextPage()" 
            class="paginate-right">
            <ion-icon name="chevron-forward-outline"></ion-icon>
        </ion-fab-button>
    </ng-container>

</ion-content>
<ion-footer *ngIf="!loadingImage && currentDoc === 0" class="ion-no-border footer-buttons">
    <ion-button *ngFor="let action of actionsList" [color]="action.color" shape="round" size="large" fill="outline" (click)="launchEvent(action)">
        <ion-icon *ngIf="action.logo !== ''" [slot]="'start'" [name]="action.logo"></ion-icon>
        <ion-label style="font-size: 13px;">{{action.label | translate}}</ion-label>
    </ion-button>
</ion-footer>

<ng-template #rightContent>
    <app-visa-workflow [visaWorkflow]="mainDocument.workflow" [snavRightComponent]="this.snavRight"
        *ngIf="signaturesService.sideNavRigtDatas.mode == 'visaWorkflow'" style="display: contents;">
    </app-visa-workflow>
    <app-document-list #appDocumentList [currentDocId]="currentDoc" [snavRightComponent]="this.snavRight"
        [docList]="docList" *ngIf="signaturesService.sideNavRigtDatas.mode == 'documentList'"
        (triggerEvent)="loadDoc($event)" style="display: contents;"></app-document-list>
    <app-main-document-detail #appMainDocumentDetail [snavRightComponent]="this.snavRight" [mainDocument]="mainDocument"
        *ngIf="signaturesService.sideNavRigtDatas.mode == 'mainDocumentDetail'" style="display: contents;">
    </app-main-document-detail>
</ng-template>