<div class="vitamui-sidepanel">
    <div class="vitamui-sidepanel-header">
        <button class="btn-close" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>

        <div class="title">
            <h2>{{securisation?.id}}</h2>
        </div>

        <ng-container *ngIf="securisation.events[securisation.events.length - 1].outcome !== 'WARNING'">
            <mat-form-field class="vitamui-mat-select">
                <mat-select placeholder="Selectionnez un contrat d'accès" panelclass="vitamui-mat-select" (selectionChange)="updateAccessContractId($event)">
                    <mat-option *ngFor='let accessContract of accessContracts'
                                [value]="accessContract.identifier">{{accessContract.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
            <button mat-button class="btn btn-primary button-maring" (click)="downloadReport()" 
                    [disabled]="!accessContractId">Télécharger le rapport</button>
        </ng-container>
    </div>
    <div class="vitamui-sidepanel-body">
        <mat-tab-group class="preview-tab-group">
            <mat-tab label="Informations" i18n-label="History tab@@userPreviewTabVerification">
                <app-securisation-information-tab [securisation]="securisation"></app-securisation-information-tab>
            </mat-tab>

            <mat-tab label="Vérification" i18n-label="History tab@@userPreviewTabVerification">
                <app-securisation-check-tab [id]="securisation?.id" [securisation]="securisation"></app-securisation-check-tab>
            </mat-tab>

            <mat-tab label="Historique" i18n-label="History tab@@userPreviewTabHistory">
                <vitamui-common-operation-history-tab [id]="securisation?.id" [identifier]="securisation?.id" collectionName="operation">
                </vitamui-common-operation-history-tab>
            </mat-tab>
        </mat-tab-group>
    </div>
</div>