@extends('layouts.app', ['page' => __('Leaderboard'), 'pageSlug' => 'leaderboard'])

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="mb-0 text-center">{{ $club_info->club_name }} Leaderboard</h2>
            </div>
            <div class="card-body">
                <table id="tableHorizontalWrapper" class="table table-hover table-sm text-center" cellspacing="0" width="50%">
                    <thead>
                        <tr class="d-flex">
                            <th class="col-2">Player Ranking</th>
                            <th class="col-3">Player ID</th>
                            <th class="col-4">Player Name</th>
                            <th class="col-3">Player Rating</th>
                        </tr>
                    </thead>
                    @foreach ($players as $player)
                    <tr class="d-flex">
                        <td class="col-2">{{ $loop->index + 1 }}</td>
                        <td class="col-3">{{ $player->player_id }}</td>
                        <td class="col-4">{{ $player->first_name }} {{ $player->last_name }}</td>
                        <td class="col-3">{{ $player->rating }}</td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
    </div>
</div>

@endsection