<div
    class="playlist-item"
    cdkDrag
    [cdkDragDisabled]="!isDraggable() || isBusy()"
    cdkDragPreviewContainer="parent"
    [class.selected]="isSelected()"
    [class.is-busy]="isBusy()"
    (click)="onPlaylistClick()"
>
    @if (isDraggable()) {
        <mat-icon cdkDragHandle class="drag-icon">drag_indicator</mat-icon>
    }
    <div class="playlist-icon">
        @if (item.url) {
            <div class="icon-container">
                <mat-icon
                    class="upload-type-icon"
                    [matTooltip]="
                        ('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) +
                        ' ' +
                        item.url
                    "
                    >cloud</mat-icon
                >
                @if (item.autoRefresh) {
                    <mat-icon
                        class="auto-refresh-indicator"
                        [matTooltip]="
                            'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate
                        "
                        >autorenew</mat-icon
                    >
                }
            </div>
        }
        @if (!item.url && !item.serverUrl && !item.macAddress) {
            <div class="icon-container">
                <mat-icon
                    class="upload-type-icon"
                    [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
                    >folder</mat-icon
                >
                @if (item.autoRefresh) {
                    <mat-icon
                        class="auto-refresh-indicator"
                        [matTooltip]="
                            'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate
                        "
                        >autorenew</mat-icon
                    >
                }
            </div>
        }
        @if (item.serverUrl) {
            <div class="icon-container">
                <mat-icon
                    class="upload-type-icon"
                    [matTooltip]="'HOME.PLAYLISTS.XTREAM_PLAYLIST' | translate"
                    >public</mat-icon
                >
                <span
                    class="status-dot"
                    [class]="getStatusClass()"
                    [matTooltip]="'Portal status: ' + portalStatus"
                    [attr.aria-label]="'Portal status: ' + portalStatus"
                ></span>
            </div>
        }
        @if (item.macAddress) {
            <mat-icon
                class="upload-type-icon"
                [matTooltip]="'HOME.PLAYLISTS.STALKER_PORTAL' | translate"
                >dashboard</mat-icon
            >
        }
    </div>
    <div class="playlist-content">
        <div class="playlist-title">
            {{ item.title || item.filename }}
        </div>
        <div class="meta">
            @if (!item.serverUrl && !item.portalUrl) {
                {{ 'HOME.PLAYLISTS.CHANNELS' | translate }}: {{ item.count }}
                @if (item.importDate.length > 3) {
                    | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
                    {{ item.importDate | date: undefined : undefined : currentLocale() }}
                }
                @if (item.updateDate) {
                    | {{ 'HOME.PLAYLISTS.UPDATED' | translate }}:
                    {{
                        item.updateDate
                            | date
                                : 'MMMM d, yyyy, HH:mm'
                                : undefined
                                : currentLocale()
                    }}
                }
                @if (item.updateState === 2) {
                    <mat-icon
                        [matTooltip]="
                            'HOME.PLAYLISTS.INFO_DIALOG.UPDATE_FAILED'
                                | translate
                        "
                        [inline]="true"
                        >warning</mat-icon
                    >
                }
            } @else {
                @if (item.macAddress) {
                    Stalker
                } @else {
                    Xtream
                }
                @if (item.importDate.length > 3) {
                    | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
                    {{ item.importDate | date: undefined : undefined : currentLocale() }}
                }
                @if (item.updateDate) {
                    | {{ 'HOME.PLAYLISTS.UPDATED' | translate }}:
                    {{
                        item.updateDate
                            | date
                                : 'MMMM d, yyyy, HH:mm'
                                : undefined
                                : currentLocale()
                    }}
                }
            }
        </div>
        @if (isBusy() && busyMessage()) {
            <div class="busy-state">
                <span class="busy-state__message">{{ busyMessage() }}</span>
                @if (busyProgress() !== null) {
                    <span class="busy-state__value">{{ busyProgress() }}%</span>
                }
            </div>
        }
        @if (isBusy() && busyMessage() && busyProgress() !== null) {
            <div class="busy-state__bar">
                <mat-progress-bar
                    mode="determinate"
                    [value]="busyProgress() ?? 0"
                />
            </div>
        }
        @if (isBusy() && busyMessage() && busyProgress() === null) {
            <div class="busy-state__bar">
                <mat-progress-bar mode="indeterminate" />
            </div>
        }
    </div>

    @if (showActions()) {
        <div class="action-buttons">
            @if (canCancelBusyAction()) {
                <button
                    mat-icon-button
                    color="warn"
                    class="cancel-btn"
                    (click)="
                        $event.stopPropagation(); cancelBusyActionClicked.emit()
                    "
                    [matTooltip]="
                        'WORKSPACE.SHELL.XTREAM_IMPORT_CANCEL' | translate
                    "
                >
                    <mat-icon>close</mat-icon>
                </button>
            }
            @if (item.url || (item.filePath && supportsPlaylistRefresh)) {
                <button
                    mat-icon-button
                    class="refresh-btn"
                    (click)="
                        $event.stopPropagation(); refreshClicked.emit(item)
                    "
                    [disabled]="isBusy()"
                    [matTooltip]="'HOME.PLAYLISTS.REFRESH' | translate"
                >
                    @if (isRefreshing()) {
                        <mat-spinner
                            class="action-spinner"
                            diameter="18"
                            strokeWidth="3"
                        />
                    } @else {
                        <mat-icon>sync</mat-icon>
                    }
                </button>
            }
            @if (item.serverUrl && supportsXtreamSqliteDataSource) {
                <button
                    mat-icon-button
                    class="refresh-btn"
                    (click)="
                        $event.stopPropagation(); refreshClicked.emit(item)
                    "
                    [disabled]="isBusy()"
                    [matTooltip]="'HOME.PLAYLISTS.REFRESH_XTREAM' | translate"
                >
                    @if (isRefreshing()) {
                        <mat-spinner
                            class="action-spinner"
                            diameter="18"
                            strokeWidth="3"
                        />
                    } @else {
                        <mat-icon>sync</mat-icon>
                    }
                </button>
            }

            <button
                mat-icon-button
                class="edit-btn"
                (click)="
                    $event.stopPropagation(); editPlaylistClicked.emit(item)
                "
                [disabled]="isBusy()"
                [matTooltip]="'HOME.PLAYLISTS.SHOW_DETAILS' | translate"
            >
                <mat-icon>edit</mat-icon>
            </button>

            <button
                mat-icon-button
                class="delete-btn"
                (click)="$event.stopPropagation(); removeClicked.emit(item._id)"
                [disabled]="isBusy()"
                [matTooltip]="'HOME.PLAYLISTS.REMOVE' | translate"
            >
                @if (isDeleting()) {
                    <mat-spinner
                        class="action-spinner"
                        diameter="18"
                        strokeWidth="3"
                    />
                } @else {
                    <mat-icon>delete</mat-icon>
                }
            </button>
        </div>
    }
</div>
