<form *ngIf="form && componentContext$ | async as ctx" [formGroup]="form">
    <div>
        <redaction-select
            [disabled]="!canEditDossier"
            [label]="'report-type.label' | translate : { length: reportTypesLength }"
            [optionTemplate]="reportTemplateOptionTemplate"
            [options]="availableReportTypes"
            [valueMapper]="reportTemplateValueMapper"
            class="mr-16"
            formControlName="reportTemplateIds"
        ></redaction-select>

        <redaction-select
            *deny="roles.getRss"
            [disabled]="!canEditDossier"
            [label]="'download-type.label' | translate : { length: downloadFileTypesLength }"
            [options]="downloadTypes"
            formControlName="downloadFileTypes"
        ></redaction-select>
    </div>
    <ng-container *allow="roles.watermarks.read">
        <p class="heading">{{ 'dossier-watermark-selector.heading' | translate }}</p>
        <ng-container *ngIf="ctx.existsWatermarks; else noWatermarks">
            <redaction-watermark-selector
                [dossierTemplateId]="dossier.dossierTemplateId"
                [isReadonly]="!canEditDossier"
                [label]="'dossier-watermark-selector.watermark' | translate"
                formControlName="watermarkId"
            >
            </redaction-watermark-selector>

            <redaction-watermark-selector
                [dossierTemplateId]="dossier.dossierTemplateId"
                [isReadonly]="!canEditDossier"
                [label]="'dossier-watermark-selector.preview' | translate"
                formControlName="previewWatermarkId"
            >
            </redaction-watermark-selector>
        </ng-container>
    </ng-container>
    <ng-template #noWatermarks>
        <p [innerHTML]="'dossier-watermark-selector.no-watermark' | translate" class="no-watermark"></p>
    </ng-template>
</form>

<ng-template #reportTemplateOptionTemplate let-option="option">
    {{ option.fileName }} {{ option.multiFileReport ? ('reports-screen.multi-file-report' | translate) : '' }}
</ng-template>
