{% load i18n %}

<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-md-4 mb-3">
                <div class="card border-primary-subtle">
                    <div class="card-body text-center">
                        <div class="card-title text-center h4 mb-2">
                            {% translate "Total" %}
                        </div>

                        <p class="card-text h5">
                            <span class="aa-sovtimer-campaigns-total">0</span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-3">
                <div class="card border-warning">
                    <div class="card-body text-center">
                        <div class="card-title text-center h4 mb-2">
                            {% translate "Upcoming" %}
                            <small class="text-muted">({% translate "< 4hrs" %})</small>
                        </div>

                        <p class="card-text h5">
                            <span class="aa-sovtimer-campaigns-upcoming">0</span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-3">
                <div class="card border-danger">
                    <div class="card-body text-center">
                        <div class="card-title text-center h4 mb-2">
                            {% translate "Active" %}
                        </div>

                        <p class="card-text h5">
                            <span class="aa-sovtimer-campaigns-active">0</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

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

        <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-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-campaigns-column-progress">{% translate "Progress" %}</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td colspan="9" class="text-center">
                            {% include "sovtimer/partials/common/spinner.html" %}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>