@extends('layouts.app')

@section('title', 'Rankings | '.config('app.name'))

@section('content')
    <section class="screen active" id="rankings">
        <div class="wrap">
            <div class="screen-hero">
                <span class="eyebrow">The hall of legends</span>
                <h1>Hall of <span class="gold">conquerors.</span></h1>
                <p>Only the strongest earn their place among legends. Rankings load from the game database files.</p>
            </div>

            <div class="surface">
                <div class="ranking-title">
                    <span class="eyebrow">Nobility ranking</span>
                    <h2>Top nobles</h2>
                </div>

                <div class="ranking-top" id="rankingTop" aria-live="polite">
                    <div class="rank-hero-card loading-card"></div>
                    <div class="rank-hero-card loading-card"></div>
                    <div class="rank-hero-card loading-card"></div>
                </div>

                <div class="table-wrap">
                    <table class="nobility-table">
                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Player</th>
                                <th>Nobility donation</th>
                            </tr>
                        </thead>
                        <tbody id="rankingBody" data-rank-api="{{ route('api.rankings.nobility') }}">
                            <tr>
                                <td colspan="3">
                                    <div class="rank-loading">Loading nobility rankings...</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection