{% extends "base.html" %}

{% block title %}SITAC{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ static_url('css/sitac.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
      integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />
{% endblock %}

{% block body_class %}sitac-page{% endblock %}

{% block content %}
<div class="sitac-container">
    <h1>SITAC - Foothold</h1>

    <!-- Section ZONES -->
    <h2>Zones</h2>
    <table class="sitac-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Side</th>
                <th>Level</th>
                <th>Upgrades Used</th>
                <th>Active</th>
                <th>First Capture by Red</th>
            </tr>
        </thead>
        <tbody>
            {% for name, zone in sitac.zones.items() | sort %}
            <tr>
                <td>{{ name }}</td>
                <td>
                    {% if zone.side == 1 %}
                    <span class="side-badge red">Red</span>
                    {% elif zone.side == 2 %}
                    <span class="side-badge blue">Blue</span>
                    {% else %}
                    <span class="side-badge grey">Neutral</span>
                    {% endif %}
                </td>
                <td class="n">{{ zone.level }}</td>
                <td class="n">{{ zone.upgradesUsed }}</td>
                <td>{{ 'Yes' if zone.active else 'No' }}</td>
                <td>{{ 'Yes' if zone.firstCaptureByRed else 'No' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Section PLAYER STATS -->
    <h2>Player Stats</h2>

    <div class="tabs ranking-tabs sitac-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="sitac-table 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 Death" data-sort-key="points_per_death"><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.deaths) | round(1) if stats.deaths > 0 else '' }}">{{ (stats.points / stats.deaths) | round(1) if stats.deaths > 0 else '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- Air to Air -->
    <div class="tab-content" data-tab-content="air">
    <table class="sitac-table 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/D Ratio" data-sort-key="air_kd"><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.deaths) | round(1) if stats.deaths > 0 else '' }}">{{ (stats.air / stats.deaths) | round(1) if stats.deaths > 0 else '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- SEAD -->
    <div class="tab-content" data-tab-content="sead">
    <table class="sitac-table 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>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- CAS -->
    <div class="tab-content" data-tab-content="cas">
    <table class="sitac-table 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/D Ratio" data-sort-key="ground_kd"><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.deaths) | round(1) if stats.deaths > 0 else '' }}">{{ ((stats.ground_units + stats.infantry) / stats.deaths) | round(1) if stats.deaths > 0 else '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- Strike -->
    <div class="tab-content" data-tab-content="strike">
    <table class="sitac-table 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>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- Logistic -->
    <div class="tab-content" data-tab-content="logistic">
    <table class="sitac-table 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>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- CSAR -->
    <div class="tab-content" data-tab-content="csar">
    <table class="sitac-table 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>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <!-- Recon -->
    <div class="tab-content" data-tab-content="recon">
    <table class="sitac-table 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>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <div style="text-align:center;">
        <a href="{{ request.url_for('foothold_servers') }}" class="sitac-back-btn">Back to servers list</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ static_url('js/tooltips.js') }}"></script>
<script src="{{ static_url('js/table-sort.js') }}"></script>
<script>
    // Init sort on the default active table
    document.querySelectorAll('.tab-content.active .sitac-table.sortable').forEach(initTableSort);

    // Tab switching
    document.querySelectorAll('.ranking-tabs .tab-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var tab = btn.getAttribute('data-tab');
            var container = btn.closest('.sitac-container');
            container.querySelectorAll('.ranking-tabs .tab-btn').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);
            });
            var activeTable = container.querySelector('.tab-content.active .sitac-table.sortable');
            if (activeTable) initTableSort(activeTable);
        });
    });
</script>
{% endblock %}