<div class="content-container" iqserHasScrollbar>
    <div [translate]="'reports-screen.title'" class="heading-xl"></div>

    <div [translate]="'reports-screen.setup'" class="description"></div>
    <div *ngIf="!isDocumine" [translate]="'reports-screen.description'" class="description"></div>

    <div *ngIf="!isDocumine && placeholders$ | async as placeholders" class="placeholders">
        <div [translate]="'reports-screen.table-header.placeholders'" class="all-caps-label"></div>
        <div [translate]="'reports-screen.table-header.description'" class="all-caps-label"></div>
        <ng-container *ngFor="let placeholder of placeholders">
            <div class="placeholder">{{ placeholder.placeholder }}</div>
            <div
                [innerHTML]="placeholder.descriptionTranslation | translate: { attribute: placeholder.attributeName }"
                class="description"
            ></div>
        </ng-container>
    </div>
</div>

<div *ngIf="availableTemplates$ | async as availableTemplates" class="right-container" iqserHasScrollbar>
    <div class="header">
        <div [translate]="'reports-screen.report-documents'" class="heading"></div>

        <iqser-circle-button
            (action)="fileInput.click()"
            *allow="roles.reportTemplates.upload; if: currentUser.isAdmin"
            [tooltip]="'reports-screen.upload-document' | translate"
            [attr.help-mode-key]="'upload_report'"
            icon="iqser:upload"
        ></iqser-circle-button>
    </div>

    <div
        (click)="fileInput.click()"
        *allow="roles.reportTemplates.upload; if: currentUser.isAdmin && !availableTemplates?.length"
        [translate]="'reports-screen.upload-document'"
        class="template upload-button"
    ></div>

    <div *ngFor="let template of availableTemplates" class="template">
        <div class="name">
            {{ template.fileName }} {{ template.multiFileReport ? ('reports-screen.multi-file-report' | translate) : '' }}
        </div>

        <div class="actions">
            <iqser-circle-button
                (action)="download(template)"
                *allow="roles.reportTemplates.download"
                [iconSize]="12"
                [size]="18"
                icon="iqser:download"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="deleteTemplate(template)"
                *allow="roles.reportTemplates.delete; if: currentUser.isAdmin"
                [iconSize]="12"
                [size]="18"
                icon="iqser:trash"
            ></iqser-circle-button>
        </div>
    </div>
</div>

<input #fileInput (change)="uploadTemplate($event)" hidden type="file" />
