@extends('layouts.app')

@section('title', 'Leaderboard · '.config('app.name'))
@section('body_class', 'no-clock')

@section('nav')
    <a href="{{ route('vault') }}" class="nav-link">🔐 VAULT</a>
@endsection

@section('content')
<main class="page">
    <h1 class="headline glitch">LEADERBOARD</h1>
    <p class="subline">Fastest crack wins. Finished teams are then ranked by characters found.</p>

    <div class="batch-bar" id="batchBar"></div>

    <div class="stats-row">
        <div class="stat"><b id="sCracked" style="color:var(--gold)">0</b><span>VAULTS CRACKED</span></div>
        <div class="stat"><b id="sSearching" style="color:var(--green)">0</b><span>PLAYING NOW</span></div>
        <div class="stat"><b id="sOut" style="color:var(--red)">0</b><span>INVALID / TIME UP</span></div>
        <div class="stat"><b id="sTeams">0</b><span>TEAMS</span></div>
    </div>

    <div class="podium" id="podium"></div>

    <input type="search" class="search" id="boardSearch" placeholder="🔍  Find your team…" autocomplete="off">

    <table class="board">
        <thead>
            <tr>
                <th>#</th>
                <th>TEAM</th>
                <th class="hide-sm">BATCH</th>
                <th>TIME</th>
                <th class="hide-sm">ATTEMPTS</th>
                <th>CHARACTERS</th>
                <th class="hide-sm">STATUS</th>
            </tr>
        </thead>
        <tbody id="board"></tbody>
    </table>
    <div class="empty" id="emptyBoard" hidden><big>NO TEAMS YET</big>Import teams from the admin panel.</div>
    <div class="empty" id="noMatch" hidden><big>NO TEAM FOUND</big>Check the spelling.</div>
</main>
@endsection

@push('scripts')
<script>window.REPORT_URL = @json(route('vault.report'));</script>
<script src="{{ asset('js/leaderboard.js') }}?v={{ config('vault.asset_version') }}"></script>
@endpush