@page "/rezept/{id}"
@model RezeptModel

@if (Model.Rezept == null) { return; }

@{ var r = Model.Rezept; }

<div class="detail">
    <a class="back-link" href="/">← Zurück zur Übersicht</a>

    <h1>@r.Titel</h1>
    <p class="desc">@r.Beschreibung</p>

    @if (!string.IsNullOrEmpty(r.Bild))
    {
        <img class="detail-img" src="@r.Bild" alt="@r.Titel" />
    }

    <div class="detail-meta">
        <div class="meta-item">
            <span class="label">Zubereitungszeit</span>
            <span class="value">@r.ZubereitungszeitMin min</span>
        </div>
        <div class="meta-item">
            <span class="label">Portionen</span>
            <span class="value">@r.Portionen</span>
        </div>
        <div class="meta-item">
            <span class="label">Schwierigkeit</span>
            <span class="value">@r.Schwierigkeit</span>
        </div>
        <div class="meta-item">
            <span class="label">Kategorie</span>
            <span class="value">@r.Kategorie</span>
        </div>
    </div>

    <div class="tags" style="margin-bottom: 1.5rem;">
        @foreach (var tag in r.Tags)
        {
            <a class="tag" href="/?tag=@tag">@tag</a>
        }
    </div>

    <div class="section">
        <h2>Zutaten</h2>
        <ul class="zutaten-list">
            @foreach (var z in r.Zutaten)
            {
                <li>
                    <span>@z.Name</span>
                    <span class="menge">@z.Menge</span>
                </li>
            }
        </ul>
    </div>

    <div class="section">
        <h2>Zubereitung</h2>
        <ol class="steps">
            @foreach (var step in r.Zubereitung)
            {
                <li>@step</li>
            }
        </ol>
    </div>

    @if (!string.IsNullOrEmpty(r.Notizen))
    {
        <div class="section">
            <h2>Notizen</h2>
            <div class="notizen">@r.Notizen</div>
        </div>
    }

    @if (r.Quelle != null)
    {
        <div class="section quelle">
            Quelle: <a href="@r.Quelle.Url" target="_blank">@r.Quelle.Name</a>
            @if (!string.IsNullOrEmpty(r.Quelle.Autor))
            {
                <span> von @r.Quelle.Autor</span>
            }
        </div>
    }
</div>