@page
@model IndexModel

@section FilterBar {
<div class="search-bar-wrap">
    <form method="get" class="search-bar">
        <input type="text" name="q" value="@Model.Q" placeholder="🔍 Rezept suchen..." />
        <select name="tag">
            <option value="">Alle Tags</option>
            @foreach (var t in Model.AlleTags)
            {
                <option value="@t" selected="@(Model.Tag == t)">@t</option>
            }
        </select>
        <select name="kategorie">
            <option value="">Alle Kategorien</option>
            @foreach (var k in Model.AlleKategorien)
            {
                <option value="@k" selected="@(Model.Kategorie == k)">@k</option>
            }
        </select>
        <button type="submit">Suchen</button>
    </form>
</div>
}

<div class="stats">@Model.Rezepte.Count Rezept(e)</div>

<div class="grid">
    @foreach (var r in Model.Rezepte)
    {
        <a class="card" href="/rezept/@r.Id">
            @if (r.ZubereitungszeitMin <= 15)
            {
                <div class="badge-quick">⚡ @r.ZubereitungszeitMin Min</div>
            }
            @if (!string.IsNullOrEmpty(r.Bild))
            {
                <img class="card-img" src="@r.Bild" alt="@r.Titel" loading="lazy" />
            }
            else
            {
                <div class="card-img-placeholder">🍽️</div>
            }
            <div class="card-body">
                <h3>@r.Titel</h3>
                <p>@(r.Beschreibung.Length > 120 ? r.Beschreibung[..120] + "..." : r.Beschreibung)</p>
                <div class="card-meta">
                    <span>⏱ @r.ZubereitungszeitMin Min</span>
                    <span>👥 @r.Portionen Port.</span>
                    <span>📊 @r.Schwierigkeit</span>
                </div>
                <div class="tags">
                    @foreach (var tag in r.Tags)
                    {
                        <span class="tag">@tag</span>
                    }
                </div>
            </div>
        </a>
    }
</div>