Players
PLAYERS
<section class="rise flex flex-wrap items-end justify-between gap-3">
    <h1 class="text-3xl font-medium tracking-tight md:text-4xl">Players</h1>
    <span class="text-sm text-muted-foreground tabular">
        <span data-stat="players-online" class="text-foreground">—</span> / <span data-stat="players-max">—</span> online
    </span>
</section>

<section class="rise rise-1 mt-6 flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
    <label class="ring-card relative flex h-10 w-full items-center gap-2 rounded-full bg-card px-3 transition-colors focus-within:bg-background focus-within:ring-2 focus-within:ring-ring/30 sm:max-w-md">
        <svg class="size-4 text-muted-foreground" aria-hidden="true"><use href="#i-search"/></svg>
        <input id="player-filter"
               type="text"
               placeholder="Filter by name..."
               class="h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
               autocomplete="off">
    </label>
</section>

<section class="rise rise-2 mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
         id="players-grid" data-staff="${IS_STAFF}">
    <div class="ring-card col-span-full rounded-2xl bg-card p-10 text-center">
        <p class="text-sm text-muted-foreground">Loading players…</p>
    </div>
</section>

<script src="/assets/players.js" defer></script>