{% extends 'fleetcomp/base.html' %}
{% load i18n %}
{% load humanize %}
{% block content %}
    <table class="table table-striped table-hover" id="fleetTable">
        <thead>
            <tr>
                <th></th>
                <th>{% translate "Member count" %}</th>
                <th>{% translate "Timestamp" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for snapshot in snapshots %}
                <tr>
                    <th>
                        <a href="{% url "fleetcomp:view_snapshot" snapshot.id %}">{{ snapshot.commander }}</a>
                    </th>
                    <th>{{ snapshot.count_members }}</th>
                    <th>{{ snapshot.timestamp_str }}</th>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block extra_javascript %}
    {% include "bundles/datatables-js-bs5.html" %}
    {% include 'bundles/datatables-css-bs5.html' %}
    {% include "bundles/filterdropdown-js.html" %}
    <script>
        $(document).ready(() => {
            $('#fleetTable').dataTable({
                searching: false,
                filterDropDown: {
                    columns: [
                        {
                            idx: 0,
                            title: "{% translate "Fleet commander" %}",
                            maxWidth: "15em",
                        },
                    ],
                    bootstrap: true,
                    bootstrap_version: 5,
                }
            })
        })
    </script>
{% endblock %}
