kehati/Views/Katalog/Index.cshtml

@{
    ViewData["Title"] = "Katalog";
    var statusColor = new Dictionary<string, string>
    {
        { "Aman", "bg-primary/10 text-primary border-primary/20" },
        { "Rentan", "bg-amber-100 text-amber-800 border-amber-200" },
        { "Terancam", "bg-orange-100 text-orange-800 border-orange-200" },
        { "Kritis", "bg-red-100 text-red-800 border-red-200" },
        { "Dilindungi", "bg-emerald-100 text-emerald-800 border-emerald-200" }
    };
}

<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="max-w-2xl">
        <div class="text-xs font-medium uppercase tracking-widest text-primary">
            Katalog
        </div>
        <h1 class="mt-3 font-serif text-5xl leading-tight text-foreground">
            Flora &amp; Fauna Jakarta
        </h1>
        <p class="mt-4 text-lg text-muted-foreground">
            Telusuri spesies yang terdokumentasi di kawasan konservasi Jakarta.
        </p>
    </div>
    <!-- Filter -->
    <form method="get" asp-action="Index">
        <div class="mt-10 rounded-2xl border border-border bg-card p-4 sm:p-5">
            <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                <input
                    type="text"
                    name="query"
                    value="@Model.Query"
                    placeholder="Cari nama atau nama ilmiah..."
                    class="w-full rounded-lg border border-input bg-background px-3 py-2" />

                <select name="type" class="w-full rounded-lg border border-input bg-background px-3 py-2">
                    <option value="all">Semua Jenis</option>
                    <option value="flora" selected="@(Model.Type=="flora")">Flora</option>
                    <option value="fauna" selected="@(Model.Type=="fauna")">Fauna</option>
                </select>
                <select name="status" class="w-full rounded-lg border border-input bg-background px-3 py-2">
                <option value="all" selected="@(Model.Status == "all")">Semua Status</option>
                <option value="Aman" selected="@(Model.Status == "Aman")">Aman</option>
                <option value="Rentan" selected="@(Model.Status == "Rentan")">Rentan</option>
                <option value="Terancam" selected="@(Model.Status == "Terancam")">Terancam</option>
                <option value="Kritis" selected="@(Model.Status == "Kritis")">Kritis</option>
                <option value="Dilindungi" selected="@(Model.Status == "Dilindungi")">Dilindungi</option>
            </select>
                <select name="lokasi" class="w-full rounded-lg border border-input bg-background px-3 py-2">
                    <option value="all">Semua Lokasi</option>
                    @foreach(LokasiModel loc in Model.FeaturedLocations)
                    {
                        <option value="@loc.Slug"
                                selected="@(Model.lokasi==loc.Slug)">
                            @loc.Name
                        </option>
                    }
                </select>
            </div>
            <div class="mt-4">
                <button type="submit" class="rounded-lg bg-primary px-5 py-2 text-primary-foreground">Cari</button>
            </div>
        </div>
    </form>
    <div class="mt-6 text-sm text-muted-foreground">
        @Model.FeaturedSpesies.Count spesies ditemukan
    </div>
    @if(Model.FeaturedSpesies.Count == 0)
    {
        <div class="mt-16 rounded-2xl border border-dashed border-border p-12 text-center">
            <p class="text-muted-foreground">
                Tidak ada spesies yang cocok dengan filter Anda.
            </p>
        </div>
    }
    else
    {
        <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            @foreach(var s in Model.FeaturedSpesies)
            {
                <a asp-controller="katalog"
            asp-action="detail"
            asp-route-slug="@s.Slug"
            class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
                <!-- Image -->
                <div class="relative aspect-[4/3] overflow-hidden bg-muted">
                    <img src="~/images/@s.Image"
                        alt="@s.CommonName"
                        loading="lazy"
                        asp-append-version="true"
                        class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />

                    <!-- Type Badge -->
                    <div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
                        @if(s.Type == "Flora")
                        {
                            <i data-lucide="leaf" class="h-3 w-3"></i>
                        }
                        else
                        {
                            <i data-lucide="bird" class="h-3 w-3"></i>
                        }
                        @s.Type
                    </div>
                </div>
                <!-- Content -->
                <div class="p-4">
                    <div class="flex items-start justify-between gap-2">
                        <h3 class="font-serif text-lg leading-tight text-foreground">
                            @s.CommonName
                        </h3>
                    </div>
                    <p class="mt-0.5 text-xs italic text-muted-foreground">
                        @s.ScientificName
                    </p>
                    <!-- Status Badge -->
                    <div class="mt-3">
                        <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
                            @(statusColor.ContainsKey(s.ConservationStatus)
                                ? statusColor[s.ConservationStatus]
                                : "")">
                            @s.ConservationStatus
                        </span>
                    </div>
                </div>
            </a>
            }
        </div>
    }
</div>