@page "/enqueue/{eventId}"
@using SpotiParty.Web.Components.Components
@rendermode InteractiveServer

<header>
    <h1>🎵 SpotiParty</h1>
    <p>Suche ein Lied und füge es zur Warteschlange hinzu</p>
</header>

<main>
    <form class="search-section" @onsubmit="ExecuteSearch">
        <input type="search" id="searchInput" placeholder="Song oder Künstler suchen..." @onchange="e => _searchText = e.Value!.ToString()!">
        <button class="button-primary" type="submit" disabled=@_isLoading>Suchen</button>
    </form>

    <section class="results-section">
        <h2>Suchergebnisse</h2>
        <div class="results">
            @foreach (var track in _tracks) {
                <SpotifyTrack Track="track" OnClick="@OnTrackClick" />
            }
        </div>
        @if (_isLoading) {
            <p>Lade...</p>
        }
    </section>
</main>

<footer>
    <p>SpotiParty © @_currentYear</p>
</footer>

<dialog class="confirm-dialog" style="display: @(_selectedTrack is null ? "none" : "block")">
    @if (!_success) {
        <h3>Bestätigung</h3>
        <p>Möchtest du den Titel zur Warteschlange hinzufügen?</p>
        @if (_selectedTrack is not null) {
            <SpotifyTrack Track="_selectedTrack" />
        }
        <div class="dialog-buttons">
            <button class="button-primary" @onclick="DialogAccept" disabled=@_isAdding>Ja</button>
            <button class="button-secondary" @onclick="DialogDismiss" disabled=@_isAdding>Nein</button>
        </div>
    }
    else {
        <h3>Bestätigung</h3>
        <p>Der Titel wurde zur Warteschlange hinzugefügt!</p>
    }
</dialog>