@using Nalu.Web.Pages
@model IEnumerable<ValidatorCard>

<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    @foreach (var v in Model)
    {
        <div class="bg-white border border-gray-100 rounded-xl p-5 hover:border-nalu-300 transition-colors @(v.IsNew ? "ring-2 ring-nalu-400" : "")">
            <div class="flex items-start justify-between mb-2">
                <div class="font-semibold text-gray-800 text-sm">@v.Icon @v.Name</div>
                <div class="flex items-center gap-1">
                    @if (v.IsNew)
                    {
                        <span class="bg-nalu-500 text-white text-xs px-2 py-0.5 rounded-full font-semibold">NEW</span>
                    }
                    <span class="bg-gray-100 text-gray-500 text-xs px-2 py-0.5 rounded-full">@v.Credits cr</span>
                </div>
            </div>
            <p class="text-xs text-gray-500 leading-relaxed">@v.Description</p>
        </div>
    }
</div>
