114 lines
5.5 KiB
Plaintext
114 lines
5.5 KiB
Plaintext
@using kehati.Helpers
|
|
@using kehati.Models.View
|
|
@using kehati.Models.Entity.Master
|
|
@using kehati.Models.Common
|
|
@{
|
|
ViewData["Title"] = "Fauna";
|
|
var fauna = ViewBag.faunaHome as PagedResult<Fauna>;
|
|
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">
|
|
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="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>
|
|
<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 (fauna == null)
|
|
{
|
|
<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 fauna.Items)
|
|
{
|
|
<a asp-controller="fauna"
|
|
asp-action="detail"
|
|
asp-route-slug="@Custom.Encode(s.MsFaunaId)" 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.Name"
|
|
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">
|
|
Fauna
|
|
</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.Name
|
|
</h3>
|
|
</div>
|
|
<p class="mt-0.5 text-xs italic text-muted-foreground">
|
|
@s.NamaIlmiah
|
|
</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.Status)
|
|
? statusColor[s.Status]
|
|
: "")">
|
|
@s.Status
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
}
|
|
<partial name="_Pagination" model="fauna" />
|
|
</div> |