{% extends 'standingssync/base.html' %}
{% load i18n %}
{% load humanize %}
{% load standingssync %}

{% block details %}
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">{{ alliance }} [{{ active_wars_count }} active wars]</h5>
            <div role="tabpanel" class="tab-pane">
                <table class="table table-striped table-width-fix" id="tab-active-wars">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Start</th>
                            <th>Aggressor</th>
                            <th>Defender</th>
                            <th>Allies</th>
                            <th>Finish</th>
                            <th>Active</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for war in wars %}
                            <tr>
                                <td data-sort="{{ war.state }}">
                                    {% if war.state == State.PENDING %}
                                        <i class="fas fa-pause text-warning" title="pending"></i>
                                    {% elif war.state == State.FINISHED %}
                                        <i class="fas fa-stop text-success" title="finished"></i>
                                    {% else %}
                                        <i class="fas fa-play text-danger" title="active"></i>
                                    {% endif %}
                                </td>
                                <td data-sort="{{ war.started.isoformat }}" class="text-nowrap">
                                    <span title="{{ war.started|date:DATEFORMAT }}">
                                        {{ war.started|naturaltime }}
                                    </span>
                                </td>
                                <td data-sort="{{ war.aggressor }}">
                                    {% war_participant war.aggressor %}
                                </td>
                                <td data-sort="{{ war.defender }}">
                                    {% war_participant war.defender %}
                                </td>
                                <td>
                                    {% for ally in war.allies %}
                                        {% war_participant ally %}<br>
                                    {% empty %}
                                        -
                                    {% endfor %}
                                </td>
                                <td data-sort="{{ war.finished.isoformat }}" class="text-nowrap">
                                    {% if war.finished %}
                                        <span title="{{ war.finished|date:DATEFORMAT }}">
                                            {{ war.finished|naturaltime }}
                                        </span>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if war.is_active %}yes{% else %}no{% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <p class="text-muted">
        <i class="fas fa-pause text-warning"></i>&nbsp;&nbsp;Pending war
        &nbsp;&nbsp;&nbsp;
        <i class="fas fa-play text-danger"></i>&nbsp;&nbsp;Active war
        &nbsp;&nbsp;&nbsp;
        <i class="fas fa-stop text-success"></i>&nbsp;&nbsp;Finished war
    </p>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js-bs5.html' %}
    {% include 'bundles/filterdropdown-js.html' %}

    <script type="application/javascript">
        $(document).ready(function () {
            $('#tab-active-wars').DataTable({
                paging: false,
                info: false,
                order: [ [1, "desc"] ],
                columnDefs: [
                    {
                        sortable: false, targets: [ 4 ]
                    },
                    {
                        visible: false, targets: [ 6 ]
                    }
                ],
                filterDropDown: {
                    columns: [
                        {
                            idx: 6
                        }
                    ],
                    autoSize: false,
                    bootstrap: true,
                    bootstrap_version: 5,
                }
            });
        });
    </script>
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    {% include 'bundles/datatables-css-bs5.html' %}
{% endblock %}
