<ng-container *ngIf="editInProgress; else elseTemplate">
    <div class="editInProgress">
        <i class="fas fa-file-word bounce"></i>
        <div>
            {{lang.editInProgress}}
        </div>
        <div>
            <button mat-button (click)="cancelTemplateEdition()">{{lang.cancel}}</button>
        </div>
    </div>
</ng-container>
<ng-template #elseTemplate>
    <ng-container *ngIf="noFile; else elseHaveFile">
        <div class="noFile">
            <i class="far fa-times-circle"></i>
            {{lang.noFile}}
        </div>
    </ng-container>
    <ng-template #elseHaveFile>
        <div class="example-loading-shade" *ngIf="loading">
            <mat-progress-spinner [mode]="loadingInfo.mode" [value]="loadingInfo.percent"></mat-progress-spinner>
            <div class="percent">{{loadingInfo.percent}} %</div>
            <div style="padding-top: 10px;">{{loadingInfo.message}}</div>
        </div>
        <div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop
            (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode">
            <i class="fa fa-file-upload upload-icon"></i><br />
            {{lang.dragAndDrop}}<br />{{lang.or}}
            <div style="display: flex;">
                <div style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;">
                    <plugin-select-search #templateList *ngIf="listTemplates.length > 0" [label]="lang.chooseModel"
                        [placeholderLabel]="lang.chooseModel" [datas]="listTemplates" [class]="'input-form-filled'"
                        [formControlSelect]="templateListForm"
                        (afterSelected)="editTemplate($event)" style="width: 240px;text-align: left;font-weight:normal;font-size: 13px;">
                    </plugin-select-search>
                </div>
                <button mat-button (click)="docToUpload.click()" class="button-form-primary-alt"
                    style="align-items: center;justify-content: center;text-align: center;display: flex;">{{lang.chooseFile}}</button>
            </div>
        </div>
        <input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;">
        <div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode">
            <div *ngIf="!loading && file.content !== null" class="viewer-tools">
                <button *ngIf="infoPanel !== null" mat-icon-button (click)="infoPanel.toggle()"
                    [matTooltip]="lang.informations">
                    <mat-icon class="fa fa-info-circle"></mat-icon>
                </button>
                <button *ngIf="editMode" mat-icon-button (click)="docToUpload.click()"
                    [matTooltip]="lang.uploadAnOtherFile">
                    <mat-icon class="fa fa-file-upload"></mat-icon>
                </button>
                <button mat-icon-button (click)="downloadOriginalFile()" [matTooltip]="lang.downloadOriginalFile">
                    <mat-icon class="fa fa-download"></mat-icon>
                </button>
                <button *ngIf="file.contentView !== undefined" mat-icon-button (click)="openPdfInTab()" matTooltip="Ouvrir dans un nouvel onglet">
                    <mat-icon class="fas fa-external-link-alt"></mat-icon>
                </button>
                <button *ngIf="editMode" mat-icon-button (click)="cleanFile()" [matTooltip]="lang.removeFile">
                    <mat-icon class="fa fa-trash" color="warn"></mat-icon>
                </button>
            </div>
            <pdf-viewer *ngIf="file.src!==null" [src]="file.src" [render-text]="true" [autoresize]="true"
                [original-size]="false" [show-all]="true" (error)="onError($event)" style="width:100%;"></pdf-viewer>
        </div>
        <div *ngIf="file.content !== null && noConvertedFound" class="no-doc-container" appUploadFileDragDrop
            (onFileDropped)="dndUploadFile($event)" [disabled]="!editMode">
            <div class="loaded-file"><i class="fa fa-file"></i>&nbsp;<a
                    (click)="downloadOriginalFile()">{{file.name}}</a>&nbsp;<b>{{lang.loaded}}</b></div>

            <div class="no-view"><i class="far fa-eye-slash no-view-icon"></i><br />{{lang.noAvailablePreview}}</div>

        </div>
    </ng-template>
</ng-template>