<section class="red-upload-download-overlay">
    <div (click)="collapsed = !collapsed" [class.expanded]="!collapsed" class="red-upload-download-header">
        <div class="title flex-2">
            {{ 'upload-status.dialog.title' | translate : { len: uploadService.files.length } }}
        </div>
        <span><mat-icon *ngIf="uploadError" [svgIcon]="'iqser:alert-circle'"></mat-icon></span>

        <iqser-circle-button
            [icon]="'iqser:status-' + (collapsed ? 'expand' : 'collapse')"
            buttonId="expand-upload-status"
        ></iqser-circle-button>

        <iqser-circle-button (action)="closeDialog()" buttonId="close-upload-status" icon="iqser:close"></iqser-circle-button>
    </div>

    <div [hidden]="collapsed" class="upload-download-list">
        <div *ngFor="let dossierId of uploadService.activeDossierKeys">
            <div class="dossier-name-wrapper all-caps-label">
                <span>{{ uploadService.groupedFiles[dossierId][0].dossierName }}</span>
            </div>

            <div *ngFor="let model of uploadService.groupedFiles[dossierId]" [class.error]="model.error" class="upload-download-list-item">
                <div>
                    <div class="upload-download-line">
                        <div
                            [class.complete]="model.completed && !model.error"
                            [matTooltip]="model.file?.name"
                            class="upload-download-item-name flex-1"
                            matTooltipPosition="above"
                        >
                            {{ model.file?.name }}
                        </div>

                        <div *ngIf="!model.error" class="progress">{{ model.progress }}%</div>
                    </div>

                    <div *ngIf="model.error" [innerHTML]="model.error?.message" class="error-message"></div>
                </div>

                <div *ngIf="!model.error" class="upload-download-progress">
                    <mat-progress-bar
                        [class.green]="model.completed"
                        [class.primary]="true"
                        [value]="model.progress"
                        mode="determinate"
                    ></mat-progress-bar>
                </div>

                <div *ngIf="model.error || !model.completed" [class.error]="model.error" class="actions">
                    <iqser-circle-button
                        (action)="uploadItem(model)"
                        *ngIf="model.error && !model.sizeError && !model.typeError"
                        [tooltip]="'upload-status.dialog.actions.re-upload' | translate"
                        icon="iqser:refresh"
                        tooltipPosition="before"
                    ></iqser-circle-button>

                    <iqser-circle-button
                        (action)="cancelItem(model)"
                        [tooltip]="'upload-status.dialog.actions.cancel' | translate"
                        icon="iqser:close"
                        tooltipPosition="before"
                    ></iqser-circle-button>
                </div>
            </div>
        </div>
    </div>
</section>
