{% load i18n %}

<p class="text-muted">
    {% translate 'The sovereignty timer list is automatically updated every 30 seconds. Progress for any active campaigns will be shown as <i>Previous - Trend - Current</i>.' %}
</p>

<div class="card card-default">
    <div class="card-header">
        <div class="card-title mb-0">
            {% translate "Sovereignty campaign list" %}
        </div>
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-sm-4">{% translate "Timers total:" %} <span class="aa-sovtimer-timers-total">0</span></div>
            <div class="col-sm-4">{% translate "Timers upcoming (< 4hrs):" %} <span class="aa-sovtimer-timers-upcoming">0</span></div>
            <div class="col-sm-4">{% translate "Timers active:" %} <span class="aa-sovtimer-timers-active">0</span></div>
        </div>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped aa-sovtimer-campaigns" style="width: 100%; border-collapse: collapse !important;">
                <thead>
                    <tr>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-type">{% translate 'Type' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-system">{% translate 'System' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-constellation">{% translate 'Constellation' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-region">{% translate 'Region' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-defender">{% translate 'Owner / Defender' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-adm">{% translate 'ADM' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-start-datetime">{% translate 'Start' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-campaigns-column-remaining-time">{% translate 'Remaining' %}</th>
                        <th class="aa-sovtimer-campaigns-column aa-sovtimer-column-campaigns-progress">{% translate 'Progress' %}</th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
