@if (isVisible()) {
    <div
        class="epg-progress-panel"
        [class.epg-progress-panel--minimized]="minimized()"
    >
        <div class="panel-header">
            <span class="header-title">
                <mat-icon>live_tv</mat-icon>
                @if (!minimized()) {
                    {{ 'EPG.IMPORT_PROGRESS' | translate }}
                } @else {
                    <span class="minimized-summary">
                        {{ loadingCount() }} loading
                        @if (queuedCount() > 0) {
                            , {{ queuedCount() }} queued
                        }
                    </span>
                }
            </span>
            <div class="header-actions">
                <button
                    mat-icon-button
                    class="minimize-btn"
                    (click)="toggleMinimize()"
                    [attr.aria-label]="
                        minimized() ? 'Expand' : 'Minimize'
                    "
                >
                    <mat-icon>
                        {{ minimized() ? 'unfold_more' : 'unfold_less' }}
                    </mat-icon>
                </button>
                <button
                    mat-icon-button
                    class="dismiss-all-btn"
                    (click)="dismissAll()"
                    [attr.aria-label]="'CLOSE' | translate"
                >
                    <mat-icon>close</mat-icon>
                </button>
            </div>
        </div>

        @if (!minimized()) {
            <div class="imports-list">
                @for (item of activeImports; track item.url) {
                    <div
                        class="import-item"
                        [class]="getStatusClass(item.status)"
                    >
                        <div class="item-header">
                            <mat-icon
                                [class.spinning]="
                                    item.status === 'loading'
                                "
                            >
                                {{ getStatusIcon(item.status) }}
                            </mat-icon>
                            <span class="item-url" [title]="item.url">
                                {{ getDisplayUrl(item.url) }}
                            </span>
                            @if (item.status === 'error') {
                                <button
                                    mat-icon-button
                                    class="retry-btn"
                                    (click)="retry(item.url)"
                                    [attr.aria-label]="'EPG.RETRY' | translate"
                                    [matTooltip]="'EPG.RETRY' | translate"
                                >
                                    <mat-icon>refresh</mat-icon>
                                </button>
                            }
                            <button
                                mat-icon-button
                                class="dismiss-btn"
                                (click)="dismiss(item.url)"
                                [attr.aria-label]="'CLOSE' | translate"
                            >
                                <mat-icon>close</mat-icon>
                            </button>
                        </div>

                        @if (item.status === 'loading') {
                            <mat-progress-bar mode="indeterminate" />
                        }

                        <div class="item-stats">
                            @if (item.stats) {
                                <span
                                    class="stat-badge"
                                    matTooltip="{{
                                        'EPG.TOTAL_CHANNELS' | translate
                                    }}"
                                >
                                    <mat-icon>tv</mat-icon>
                                    {{ item.stats.totalChannels }}
                                </span>
                                <span
                                    class="stat-badge"
                                    matTooltip="{{
                                        'EPG.TOTAL_PROGRAMS' | translate
                                    }}"
                                >
                                    <mat-icon>event</mat-icon>
                                    {{ item.stats.totalPrograms }}
                                </span>
                            } @else if (item.error) {
                                <span class="error-text">{{
                                    item.error
                                }}</span>
                            } @else if (item.status === 'loading') {
                                <span
                                    >{{ 'EPG.LOADING' | translate }}...</span
                                >
                            }
                        </div>
                    </div>
                }

                @if (queuedImports.length > 0) {
                    <div class="queue-section">
                        <div class="queue-header">
                            <mat-icon>queue</mat-icon>
                            <span
                                >{{ 'EPG.QUEUED' | translate }} ({{
                                    queuedImports.length
                                }})</span
                            >
                        </div>
                        <div class="queue-list">
                            @for (
                                item of queuedImports;
                                track item.url;
                                let i = $index
                            ) {
                                <div class="queue-item">
                                    <span class="queue-position">{{
                                        i + 1
                                    }}</span>
                                    <span
                                        class="queue-url"
                                        [title]="item.url"
                                    >
                                        {{ getDisplayUrl(item.url) }}
                                    </span>
                                    <button
                                        mat-icon-button
                                        class="dismiss-btn"
                                        (click)="dismiss(item.url)"
                                        [attr.aria-label]="
                                            'CLOSE' | translate
                                        "
                                    >
                                        <mat-icon>close</mat-icon>
                                    </button>
                                </div>
                            }
                        </div>
                    </div>
                }
            </div>
        }
    </div>
}