@extends('layouts.ranking', ["data" => $data, "route" => "ranking-players"])
@section('background-image', '/assets/images/donate.jpg')
@section("ranking_name", "Donation Ranking")
@section('table')
    <style>
        tr .nickname a {
            color: #fff;
        }
        tr.top-1 .nickname, tr.top-1 .nickname a, tr.top-1 .rank-number {
            font-family: "Marcellus SC", serif;
            font-size: 40px;
            color: #e08821;
        }
        tr.top-2 .nickname, tr.top-2 .nickname a, tr.top-2 .rank-number {
            font-family: "Marcellus SC", serif;
            font-size: 30px;
            color: #C0C0C0;
        }
        tr.top-3 .nickname, tr.top-3 .nickname a, tr.top-3 .rank-number {
            font-family: "Marcellus SC", serif;
            font-size: 25px;
            color: #cd7f32;
        }
    </style>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="thead-default">
            <tr class="text-center">
                <th style="width: 54px;">#</th>
                <th style="width: 54px;">Rank</th>
                <th style="width: 54px;">{{ __("ranking.Nick") }}</th>
            </tr>
            </thead>
            <tbody>
            @php $i=0 @endphp
            @foreach ($data as $user) @php $i++ @endphp
            <tr class="{{ ($i == 1 ? "top-1" : ($i == 2 ? "top-2" : ($i == 3 ? "top-3" : ""))) }}">
                <td class="text-center rank-number" style="vertical-align: middle">
                    {{ $i <=3 ? '#' . $i : $i }}
                </td>
                <td class="text-center" style="vertical-align: middle">
                    <img src="/assets/images/ranks/BIGCLASS_{{ $user->LEV + 1 }}.png" class="img-fluid" alt="rank">
                </td>
                <td class="text-center nickname" style="vertical-align: middle">
                    <a href="{{ route('profile', $user->USN) }}">{{ $user->NICK }}</a>
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@endsection