<h2>Player Rankings</h2>

<div class="tabs ranking-tabs">
    <button class="tab-btn active" data-tab="general"><i class="fa-solid fa-star"></i> General</button>
    <button class="tab-btn" data-tab="air"><i class="fa-solid fa-jet-fighter"></i> Air to Air</button>
    <button class="tab-btn" data-tab="sead"><i class="fa-solid fa-explosion"></i> SEAD</button>
    <button class="tab-btn" data-tab="cas"><i class="fa-solid fa-crosshairs"></i> CAS</button>
    <button class="tab-btn" data-tab="strike"><i class="fa-solid fa-bomb"></i> Strike</button>
    <button class="tab-btn" data-tab="logistic"><i class="fa-solid fa-truck"></i> Logistic</button>
    <button class="tab-btn" data-tab="csar"><i class="fa-solid fa-helicopter"></i> CSAR</button>
    <button class="tab-btn" data-tab="recon"><i class="fa-solid fa-binoculars"></i> Recon</button>
</div>

<!-- General -->
<div class="tab-content active" data-tab-content="general">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="Points Spent" data-sort-key="points_spent"><i class="fa-solid fa-coins"></i></th>
        <th class="col-icon" data-tooltip="Deaths" data-sort-key="deaths"><i class="fa-solid fa-skull"></i></th>
        <th class="col-icon" data-tooltip="Points per Life" data-sort-key="points_per_life"><i class="fa-solid fa-chart-line"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.points', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.points_spent | int }}</td>
            <td class="n">{{ stats.deaths }}</td>
            <td class="n" data-sort-value="{{ (stats.points / stats.lives) | round(1) }}">{{ (stats.points / stats.lives) | round(1) }}</td>
        </tr>
        {% else %}
        <tr><td colspan="6" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- Air to Air -->
<div class="tab-content" data-tab-content="air">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="Air Kills (A/A)" data-sort-key="air"><i class="fa-solid fa-jet-fighter"></i></th>
        <th class="col-icon" data-tooltip="Helicopter Kills" data-sort-key="helo"><i class="fa-solid fa-helicopter"></i></th>
        <th class="col-icon" data-tooltip="Intercept Cargo Plane" data-sort-key="intercept"><i class="fa-solid fa-plane-circle-xmark"></i></th>
        <th class="col-icon" data-tooltip="CAP Missions" data-sort-key="cap"><i class="fa-solid fa-shield-halved"></i></th>
        <th class="col-icon" data-tooltip="Air K/L Ratio" data-sort-key="air_kl"><i class="fa-solid fa-percent"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.air', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.air }}</td>
            <td class="n">{{ stats.helo }}</td>
            <td class="n">{{ stats.intercept_cargo_plane }}</td>
            <td class="n">{{ stats.CAP_mission }}</td>
            <td class="n" data-sort-value="{{ (stats.air / stats.lives) | round(1) }}">{{ (stats.air / stats.lives) | round(1) }}</td>
        </tr>
        {% else %}
        <tr><td colspan="8" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- SEAD -->
<div class="tab-content" data-tab-content="sead">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="SAM/Air Defense Kills" data-sort-key="sam"><i class="fa-solid fa-explosion"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.SAM', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.SAM }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- CAS -->
<div class="tab-content" data-tab-content="cas">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="Ground Unit Kills" data-sort-key="ground_units"><i class="fa-solid fa-crosshairs"></i></th>
        <th class="col-icon" data-tooltip="Infantry Kills" data-sort-key="infantry"><i class="fa-solid fa-person-rifle"></i></th>
        <th class="col-icon" data-tooltip="CAS Missions" data-sort-key="cas_mission"><i class="fa-solid fa-bullseye"></i></th>
        <th class="col-icon" data-tooltip="Ground K/L Ratio" data-sort-key="ground_kl"><i class="fa-solid fa-percent"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.ground_units', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.ground_units }}</td>
            <td class="n">{{ stats.infantry }}</td>
            <td class="n">{{ stats.CAS_mission }}</td>
            <td class="n" data-sort-value="{{ ((stats.ground_units + stats.infantry) / stats.lives) | round(1) }}">{{ ((stats.ground_units + stats.infantry) / stats.lives) | round(1) }}</td>
        </tr>
        {% else %}
        <tr><td colspan="7" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- Strike -->
<div class="tab-content" data-tab-content="strike">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="Structure Kills" data-sort-key="structure"><i class="fa-solid fa-building"></i></th>
        <th class="col-icon" data-tooltip="Bomb Runway" data-sort-key="bomb_runway"><i class="fa-solid fa-road"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.structure', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.structure }}</td>
            <td class="n">{{ stats.bomb_runway }}</td>
        </tr>
        {% else %}
        <tr><td colspan="5" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- Logistic -->
<div class="tab-content" data-tab-content="logistic">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="Flight Time (min)" data-sort-key="flight_time"><i class="fa-solid fa-clock"></i></th>
        <th class="col-icon" data-tooltip="Warehouse Deliveries" data-sort-key="warehouse"><i class="fa-solid fa-warehouse"></i></th>
        <th class="col-icon" data-tooltip="Zone Captures" data-sort-key="zone_capture"><i class="fa-solid fa-flag"></i></th>
        <th class="col-icon" data-tooltip="Zone Upgrades" data-sort-key="zone_upgrade"><i class="fa-solid fa-arrow-up"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.flight_time', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.flight_time | int }}</td>
            <td class="n">{{ stats.warehouse_delivery }}</td>
            <td class="n">{{ stats.zone_capture }}</td>
            <td class="n">{{ stats.zone_upgrade }}</td>
        </tr>
        {% else %}
        <tr><td colspan="7" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- CSAR -->
<div class="tab-content" data-tab-content="csar">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="Flight Time (min)" data-sort-key="flight_time"><i class="fa-solid fa-clock"></i></th>
        <th class="col-icon" data-tooltip="Pilot Rescues" data-sort-key="pilot_rescue"><i class="fa-solid fa-parachute-box"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.pilot_rescue', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.flight_time | int }}</td>
            <td class="n">{{ stats.pilot_rescue }}</td>
        </tr>
        {% else %}
        <tr><td colspan="5" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<!-- Recon -->
<div class="tab-content" data-tab-content="recon">
<table class="modal-table players sortable">
    <thead><tr>
        <th class="col-rank">#</th>
        <th data-sort-key="player" data-sort-type="string">Player</th>
        <th class="col-icon" data-tooltip="Points" data-sort-key="points"><i class="fa-solid fa-star"></i></th>
        <th class="col-icon" data-tooltip="Recon Missions" data-sort-key="recon"><i class="fa-solid fa-binoculars"></i></th>
    </tr></thead>
    <tbody>
        {% for player, stats in sitac.player_stats.items() | sort(attribute='1.recon_mission', reverse=True) %}
        <tr>
            <td class="n col-rank">{{ loop.index }}</td>
            <td><a href="{{ request.url_for('foothold_player', server=server, player_name=player) }}">{{ player }}</a></td>
            <td class="n">{{ stats.points | int }}</td>
            <td class="n">{{ stats.recon_mission }}</td>
        </tr>
        {% else %}
        <tr><td colspan="4" style="text-align: center; color: #5a6270;">No player data available</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>

<script>
    (function() {
        // Tab switching
        var container = document.querySelector('#modal-body') || document;
        var tabBtns = container.querySelectorAll('.ranking-tabs .tab-btn');
        tabBtns.forEach(function(btn) {
            btn.addEventListener('click', function() {
                var tab = btn.getAttribute('data-tab');
                tabBtns.forEach(function(b) { b.classList.remove('active'); });
                btn.classList.add('active');
                container.querySelectorAll('.tab-content').forEach(function(c) {
                    c.classList.toggle('active', c.getAttribute('data-tab-content') === tab);
                });
                // Init sort on newly visible table
                var activeTable = container.querySelector('.tab-content.active .sortable');
                if (activeTable && typeof initTableSort === 'function') {
                    initTableSort(activeTable);
                }
            });
        });
        // Init sort on the default active table
        var activeTable = container.querySelector('.tab-content.active .sortable');
        if (activeTable && typeof initTableSort === 'function') {
            initTableSort(activeTable);
        }
    })();
</script>
