@switch (type()) {
    @case ('welcome-dashboard') {
        <div class="empty-state welcome-dashboard">
            <div class="welcome-dashboard__hero">
                <div class="welcome-dashboard__illustration-container">
                    <svg class="welcome-dashboard__illustration" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                        <rect x="40" y="40" width="432" height="432" rx="80" class="icon-background"/>
                        <rect x="134" y="387" width="244" height="18" rx="4" class="monitor-base"/>
                        <rect x="238" y="347" width="36" height="40" rx="4" class="monitor-stand"/>
                        <rect x="88" y="102" width="336" height="245" rx="12" stroke="currentColor" stroke-width="12" fill="none" class="screen-border"/>
                        <circle cx="256" cy="280" r="16" class="wifi-dot"/>
                        <path d="M 220 250 Q 256 220, 292 250" stroke="currentColor" stroke-width="14" fill="none" stroke-linecap="round" class="wifi-arc arc-1"/>
                        <path d="M 200 230 Q 256 185, 312 230" stroke="currentColor" stroke-width="14" fill="none" stroke-linecap="round" class="wifi-arc arc-2"/>
                        <path d="M 180 210 Q 256 150, 332 210" stroke="currentColor" stroke-width="14" fill="none" stroke-linecap="round" class="wifi-arc arc-3"/>
                    </svg>
                </div>

                <h2 class="welcome-dashboard__title">{{ 'HOME.PLAYLISTS.WELCOME_TITLE' | translate }}</h2>
                <p class="welcome-dashboard__tagline">{{ 'HOME.PLAYLISTS.DASHBOARD_WELCOME_TAGLINE' | translate }}</p>
                <p class="welcome-dashboard__description">{{ 'HOME.PLAYLISTS.DASHBOARD_WELCOME_DESCRIPTION' | translate }}</p>

                <button
                    mat-raised-button
                    type="button"
                    class="welcome-dashboard__cta"
                    (click)="onAddPlaylist()"
                >
                    <mat-icon>add_circle</mat-icon>
                    {{ 'HOME.PLAYLISTS.ADD_YOUR_FIRST' | translate }}
                </button>
            </div>

            <ul class="welcome-dashboard__cards" role="list">
                @for (card of featureCards; track card.titleKey) {
                    @if (isFeatureCardVisible(card)) {
                        <li class="feature-card">
                            <div class="feature-card__icon-wrap">
                                <mat-icon class="feature-card__icon">{{ card.icon }}</mat-icon>
                            </div>
                            <h3 class="feature-card__title">{{ card.titleKey | translate }}</h3>
                            <p class="feature-card__desc">{{ card.descKey | translate }}</p>
                        </li>
                    }
                }
            </ul>
        </div>
    }
    @case ('welcome-sources') {
        <div class="empty-state welcome-sources">
            <header class="welcome-sources__header">
                <div class="welcome-sources__icon-wrap">
                    <mat-icon class="welcome-sources__icon">playlist_add</mat-icon>
                </div>
                <h2 class="welcome-sources__title">{{ 'HOME.PLAYLISTS.SOURCES_WELCOME_TITLE' | translate }}</h2>
                <p class="welcome-sources__body">{{ 'HOME.PLAYLISTS.SOURCES_WELCOME_BODY' | translate }}</p>
            </header>

            <div class="welcome-sources__grid">
                @for (card of sourceCards; track card.type) {
                    <article class="source-card">
                        <div class="source-card__head">
                            <mat-icon class="source-card__icon">{{ card.icon }}</mat-icon>
                            <h3 class="source-card__name">{{ card.nameKey | translate }}</h3>
                        </div>
                        <p class="source-card__needs">{{ card.needsKey | translate }}</p>
                        <ul class="source-card__chips" role="list">
                            @for (chip of card.contentKeys; track chip) {
                                <li class="source-card__chip">{{ chip | translate }}</li>
                            }
                        </ul>
                        <button
                            mat-raised-button
                            type="button"
                            class="source-card__cta"
                            (click)="onAddPlaylist(card.type)"
                        >
                            <mat-icon>add</mat-icon>
                            {{ card.addLabelKey | translate }}
                        </button>
                    </article>
                }
            </div>
        </div>
    }
    @case ('no-results') {
        <div class="empty-state no-results-state">
            <div class="illustration-container small">
                <svg class="illustration" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="65" cy="65" r="35" class="search-circle" stroke-width="4"/>
                    <line x1="90" y1="90" x2="115" y2="115" class="search-handle" stroke-width="4" stroke-linecap="round"/>
                    <rect x="45" y="50" width="40" height="30" rx="3" class="empty-box" stroke-width="2" opacity="0.4"/>
                    <line x1="55" y1="65" x2="75" y2="65" class="empty-line" stroke-width="2" opacity="0.3"/>
                </svg>
            </div>

            <div class="content">
                <h3 class="title small">{{ 'HOME.PLAYLISTS.NO_RESULTS_TITLE' | translate }}</h3>
                <p class="description">{{ 'HOME.PLAYLISTS.NO_RESULTS_DESCRIPTION' | translate }}</p>
            </div>
        </div>
    }
    @case ('no-data') {
        <div class="empty-state no-data-state">
            <div class="empty-icon-container">
                <mat-icon class="empty-icon">{{ icon() }}</mat-icon>
            </div>

            <div class="content">
                @if (titleKey()) {
                    <h3 class="title small">{{ titleKey() | translate }}</h3>
                }
                @if (descriptionKey()) {
                    <p class="description">{{ descriptionKey() | translate }}</p>
                }

                @if (primaryActionLabelKey() || secondaryActionLabelKey()) {
                    <div class="actions">
                        @if (primaryActionLabelKey(); as primaryLabel) {
                            <button
                                mat-raised-button
                                type="button"
                                class="primary-button"
                                (click)="onPrimaryAction()"
                            >
                                <mat-icon>add_circle</mat-icon>
                                {{ primaryLabel | translate }}
                            </button>
                        }
                        @if (secondaryActionLabelKey(); as secondaryLabel) {
                            <button
                                mat-button
                                type="button"
                                class="secondary-button"
                                (click)="onSecondaryAction()"
                            >
                                {{ secondaryLabel | translate }}
                            </button>
                        }
                    </div>
                }
            </div>
        </div>
    }
}