@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">
                        {{
                            'EPG.IMPORT_SUMMARY_LOADING'
                                | translate: { count: loadingCount() }
                        }}
                        @if (queuedCount() > 0) {
                            ,
                            {{
                                'EPG.IMPORT_SUMMARY_QUEUED'
                                    | translate: { count: queuedCount() }
                            }}
                        }
                    </span>
                }
            </span>
            <div class="header-actions">
                <button
                    mat-icon-button
                    class="minimize-btn"
                    (click)="toggleMinimize()"
                    [attr.aria-label]="
                        (minimized()
                            ? 'EPG.IMPORT_PANEL_EXPAND'
                            : 'EPG.IMPORT_PANEL_MINIMIZE'
                        ) | translate
                    "
                    [matTooltip]="
                        (minimized()
                            ? 'EPG.IMPORT_PANEL_EXPAND'
                            : 'EPG.IMPORT_PANEL_MINIMIZE'
                        ) | translate
                    "
                >
                    <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') {
                                @if (isActionableSecurityError(item)) {
                                    <button
                                        mat-stroked-button
                                        class="trust-btn"
                                        type="button"
                                        (click)="confirmTrust(item)"
                                    >
                                        {{ getActionLabel(item) }}
                                    </button>
                                }
                                <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>
                                    {{ formatCount(item.stats.totalChannels) }}
                                </span>
                                <span
                                    class="stat-badge"
                                    matTooltip="{{
                                        'EPG.TOTAL_PROGRAMS' | translate
                                    }}"
                                >
                                    <mat-icon>event</mat-icon>
                                    {{ formatCount(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>
}