@page
@using MTG_CollectionVerwaltung.Data.MTGCollection
@model MTG_CollectionVerwaltung.Pages.Cards.SearchModel
@{
}

<div class="container-fluid">
    <!-- Suchleiste -->
    <div class="row mb-3">
        <div class="col-12">
            <form method="get" asp-page="./Search">
                <div class="input-group">
                    <input type="text" class="form-control" name="query" placeholder="Suche nach Karten..." value="@Model.CurrentQuery" />
                    <button class="btn btn-primary" type="submit">🔍 Suchen</button>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <!-- Sidebar mit Filtern -->
        <div class="col-md-3">
            <div class="card p-3">
                <h5>Filter</h5>
                <form method="get" asp-page="./Search">
                    <input type="hidden" name="query" value="@Model.CurrentQuery" />

                    <div class="mb-3">
                        <label class="form-label">Farbe</label>
                        <select class="form-select" name="color">
                            <option value="">Alle</option>
                            <option value="W">Weiß</option>
                            <option value="U">Blau</option>
                            <option value="B">Schwarz</option>
                            <option value="R">Rot</option>
                            <option value="G">Grün</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Seltenheit</label>
                        <select class="form-select" name="rarity">
                            <option value="">Alle</option>
                            <option value="common">Common</option>
                            <option value="uncommon">Uncommon</option>
                            <option value="rare">Rare</option>
                            <option value="mythic">Mythic</option>
                        </select>
                    </div>

                    <button type="submit" class="btn btn-secondary w-100">Filter anwenden</button>
                </form>
            </div>
        </div>

        <!-- Ergebnisse -->
        <div class="col-md-9">
            <h2>Suchergebnisse</h2>
            <div class="resultgrid">
                @foreach (CardPrinting printing in Model.searchResults)
                {
                    @await Html.PartialAsync("_CardControl", printing)
                }
            </div>
        </div>
    </div>
</div>