<mat-sidenav-container autosize class="maarch-container" joyrideStep="welcome" stepPosition="center">
<mat-sidenav-content>
<mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;"><img
style="max-height: 100vh;" *ngIf="thumbnailUrl !== ''" [src]="thumbnailUrl | secureUrl | async" />
</mat-card>
<div class="bg-head">
<div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
<div class="bg-head-title-label">
<header-left></header-left>
</div>
<div class="bg-head-title-tool">
<header-right></header-right>
</div>
</div>
<div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
<mat-card *ngIf="homeMessage"
style="background: #135F7F;color: white;box-shadow: none;border: solid 2px white;width: 100%;border-radius: 20px;padding-bottom: 40px;">
<div style="display: flex;max-height: 250px;overflow: auto;">
<div style="padding-left: 10px;">
<span [innerHTML]="homeMessage"></span>
</div>
</div>
<div style="text-align: right;opacity: 0.5;">
<button mat-button routerLink="/about-us"
style="position:absolute;font-size:10px;right: 0px;bottom: 0px;">{{'lang.aboutUs' | translate}}</button>
</div>
</mat-card>
</div>
</div>
<div class="container" [class.fullContainer]="appService.getViewMode()">
<div class="container-content">
<mat-tab-group>
<mat-tab *ngIf="homeData !== undefined && homeData.isLinkedToMaarchParapheur">
<ng-template matTabLabel>
<span [class.noDoc]="nbMpDocs === 0" matBadge="{{nbMpDocs}}"
matBadgeOverlap="false">{{'lang.maarchParapheurDocuments' | translate}}</span>
</ng-template>
<app-maarch-parapheur-list (triggerEvent)="updateNbMpDocs($event)"></app-maarch-parapheur-list>
</mat-tab>
<mat-tab label="{{'lang.myLastResources' | translate}}" *ngIf="homeData !== undefined">
<div *ngIf="loading" style="display:flex;height:100%;">
<mat-spinner style="margin:auto;"></mat-spinner>
</div>
<table *ngIf="!loading" mat-table [dataSource]="dataSource" matSort matSortActive="res_id"
matSortDisableClear matSortDirection="asc" style="width:100%;table-layout: fixed;">
<!-- Number Column -->
<ng-container matColumnDef="res_id">
<td class="first_col" mat-cell *matCellDef="let row"
[ngStyle]="{'width': appService.getViewMode() ? '30%' : '15%'}">
<div *ngIf="row.closing_date == null && appService.getViewMode()"
id="{{row.res_id}}_creation_date"
style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
title='{{row.creation_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'>
<i class="fa fa-calendar" title="{{'lang.creationDate' | translate}}"></i>
{{row.creation_date | timeAgo}}
</div>
<div style="overflow: hidden;text-overflow: ellipsis;">
<mat-icon [ngStyle]="{'color': row.priority_color}" color="primary"
class="{{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}} {{row.status_icon}} {{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}}-2x"
title="{{row.status_label}} ({{row.status_id}})"></mat-icon>
<span *ngIf="row.confidentiality === 'Y'"
class="watermark">{{'lang.confidential' | translate}}</span>
</div>
<div style="padding-top: 5px;color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
title="{{row.alt_identifier}} (n°{{row.res_id}})">
{{row.alt_identifier}}
</div>
</td>
</ng-container>
<ng-container matColumnDef="subject">
<td mat-cell *matCellDef="let row"
style="width:45%;overflow:hidden;text-overflow: ellipsis;padding: 5px;vertical-align: middle;">
<div *ngIf="row.closing_date == null && appService.getViewMode()"
style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;text-align: right;">
<i class="fa fa-stopwatch" title="{{'lang.processLimitDate' | translate}}"></i>
<span [innerHTML]="row.process_limit_date | timeLimit"
title='{{row.process_limit_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'></span>
</div>
<div style="overflow: hidden;line-height: 1.5em;height: 3em;overflow: hidden;"
title="{{row.subject}}">
<span>{{row.subject}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="creation_date">
<td mat-cell *matCellDef="let row"
style="text-align: right;width:15%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: middle;">
<div *ngIf="row.closing_date == null" id="{{row.res_id}}_creation_date"
style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
title='{{row.creation_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'>
<i class="fa fa-calendar" title="{{'lang.creationDate' | translate}}"></i>
{{row.creation_date | timeAgo}}
</div>
<div *ngIf="row.closing_date == null"
style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;">
<i class="fa fa-stopwatch" title="{{'lang.processLimitDate' | translate}}"></i>
<span [innerHTML]="row.process_limit_date | timeLimit"
title='{{row.process_limit_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'></span>
</div>
<div *ngIf="row.closing_date != null"
style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;">
<i class="fa fa-lock" title="{{'lang.closingDate' | translate}}"></i>
<span
title='{{row.closing_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'>{{row.closing_date | timeAgo}}</span>
</div>
<div>
<button mat-icon-button (click)="$event.stopPropagation();viewDocument(row);"
(mouseenter)="viewThumbnail(row);" (mouseleave)="closeThumbnail();"
[disabled]="!row.hasDocument" title="{{row.hasDocument ? this.translate.instant('lang.viewResource') : this.translate.instant('lang.noDocument')}}">
<mat-icon color="primary" class="fa" [ngClass]="[row.hasDocument ? 'fa-eye' : 'fa-eye-slash']"></mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="goToDetail(row);"
style="cursor:pointer;"></tr>
</table>
</mat-tab>
</mat-tab-group>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>