{% macro zones_table(zones, empty_label) %}
    {% if zones %}
    <table class="modal-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Level</th>
                <th>Active</th>
            </tr>
        </thead>
        <tbody>
            {% for name, zone in zones %}
            <tr>
                <td>{{ name }}</td>
                <td class="n">{{ zone.level }}</td>
                <td>{{ 'Yes' if zone.active else 'No' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">{{ empty_label }}</div>
    {% endif %}
{% endmacro %}

{% set blue_zones = [] %}
{% set neutral_zones = [] %}
{% set red_zones = [] %}

{% for name, zone in sitac.zones.items() | sort if not zone.hidden %}
    {% if zone.side == 2 %}
        {% set _ = blue_zones.append((name, zone)) %}
    {% elif zone.side == 1 %}
        {% set _ = red_zones.append((name, zone)) %}
    {% else %}
        {% set _ = neutral_zones.append((name, zone)) %}
    {% endif %}
{% endfor %}

<div class="zones-container">
    <div class="modal-header-fixed">
        <h2>Objectives</h2>

        <div class="progress-container">
            <div class="progress-header">
                <span class="progress-label">Campaign Progress</span>
                <span class="progress-value">{{ "%.0f"|format(progress) }}%</span>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: {{ progress }}%"></div>
            </div>
        </div>

        <div class="tabs">
            <button class="tab-btn blue active" onclick="showTab('blue')">
                Blue <span class="tab-badge">{{ blue_zones | length }}</span>
            </button>
            <button class="tab-btn neutral" onclick="showTab('neutral')">
                Neutral <span class="tab-badge">{{ neutral_zones | length }}</span>
            </button>
            <button class="tab-btn red" onclick="showTab('red')">
                Red <span class="tab-badge">{{ red_zones | length }}</span>
            </button>
        </div>
    </div>

    <div class="tab-content-wrapper">
        <div id="tab-blue" class="tab-content active">
            {{ zones_table(blue_zones, "No blue zones") }}
        </div>

        <div id="tab-neutral" class="tab-content">
            {{ zones_table(neutral_zones, "No neutral zones") }}
        </div>

        <div id="tab-red" class="tab-content">
            {{ zones_table(red_zones, "No red zones") }}
        </div>
    </div>
</div>