{% extends "fleetfinder/base.html" %}

{% load aa_i18n %}
{% load i18n %}

{% block aa_fleetfinder_body %}
    <div class="card card-default border-0">
        <div class="card-header card-default">
            <div class="card-title mb-0">
                {% translate "Fleets available to you" %}
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover table-vertical-middle" id="table_available-fleets" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>{% translate "Fleet commander" %}</th>
                            <th>{% translate "Fleet name" %}</th>
                            <th>{% translate "Created at" %}</th>
                            <th class="text-end"><!-- {% translate "Join" %} --></th>
                        </tr>
                    </thead>

                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_css %}
    {% include "bundles/datatables-2-css-bs5.html" %}
    {% include "bundles/datatables-2-columncontrol-css-bs5.html" %}
    {% include "fleetfinder/bundles/css/fleetfinder-css.html" %}
{% endblock %}

{% block extra_javascript %}
    {% include "bundles/datatables-2-js-bs5.html" %}
    {% include "bundles/datatables-2-columncontrol-js-bs5.html" %}
    {% include "bundles/moment-js.html" with locale=True %}

    <script>
        const aaFleetFinderSettingsOverride = {
            dataTables: {
                url: {
                    dashboard: '{% url "fleetfinder:ajax_dashboard" %}'
                }
            }
        };
    </script>

    {% include "fleetfinder/bundles/js/fleetfinder-js.html" with view="dashboard" %}
{% endblock %}