<div class="workspace-loading-overlay">
    <div class="workspace-loading-overlay__card">
        <div class="workspace-loading-overlay__header">
            @if (xtreamImport.xtreamImportSourceLabel()) {
                <span
                    class="workspace-loading-overlay__badge"
                    [class.workspace-loading-overlay__badge--remote]="
                        xtreamImport.xtreamImportPhaseTone() === 'remote'
                    "
                >
                    {{ xtreamImport.xtreamImportSourceLabel() }}
                </span>
            }
            <h3>{{ xtreamImport.xtreamImportTitleLabel() }}</h3>
        </div>
        @if (xtreamImport.xtreamImportPhaseLabel()) {
            <p
                class="workspace-loading-overlay__phase"
                aria-live="polite"
            >
                {{ xtreamImport.xtreamImportPhaseLabel() }}
            </p>
        }
        @if (xtreamImport.xtreamImportDetailLabel()) {
            <p class="workspace-loading-overlay__detail">
                {{ xtreamImport.xtreamImportDetailLabel() }}
            </p>
        }
        @if (
            xtreamImport.xtreamActiveImportCount() !== 0 &&
            xtreamImport.xtreamActiveItemsToImport() !== 0
        ) {
            <mat-progress-bar
                mode="determinate"
                [value]="
                    (xtreamImport.xtreamActiveImportCount() /
                        xtreamImport.xtreamActiveItemsToImport()) *
                    100
                "
            />
        } @else {
            <mat-progress-bar mode="indeterminate" />
        }
        @if (xtreamImport.xtreamImportProgressLabel()) {
            <p class="workspace-loading-overlay__progress-copy">
                {{ xtreamImport.xtreamImportProgressLabel() }}
            </p>
        }
        @if (xtreamImport.canCancelXtreamImport()) {
            <button
                mat-stroked-button
                class="workspace-loading-overlay__action"
                type="button"
                [disabled]="xtreamImport.isCancellingXtreamImport()"
                (click)="onCancel()"
            >
                {{
                    (xtreamImport.isCancellingXtreamImport()
                        ? 'WORKSPACE.SHELL.XTREAM_IMPORT_CANCELLING'
                        : 'WORKSPACE.SHELL.XTREAM_IMPORT_CANCEL'
                    ) | translate
                }}
            </button>
        }
    </div>
</div>
