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

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

{% block page_title %}
    {% translate "Fleet details" %} » {% translate "Fleet Finder" %}
{% endblock %}

{% block aa_fleetfinder_body %}
    {% include "framework/header/page-header.html" with title=fleet.name subtitle=fleet.fleet_commander.character_name %}

    <div class="alert alert-warning d-none" id="fleetfinder-fleet-details-warning"></div>

    <div class="row">
        <div class="col-lg-6 col-lg-push-6">
            <div class="card card-primary">
                <div class="card-header">
                    <div class="card-title mb-0">
                        {% translate "Fleet composition" %}
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-vertical-middle w-100" id="table-fleet-composition">
                            <thead>
                                <tr>
                                    <th>{% translate "Ship class" %}</th>
                                    <th>{% translate "Count" %}</th>
                                </tr>
                            </thead>

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

        <div class="col-lg-6 col-lg-pull-6">
            <div class="card card-primary">
                <div class="card-header">
                    <div class="card-title mb-0">
                        {% translate "Fleet members" %}
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover table-vertical-middle w-100" id="table-fleet-members">
                            <thead>
                                <tr>
                                    <th>{% translate "Name" %}</th>
                                    <th>{% translate "Ship class" %}</th>
                                    <th>{% translate "System" %}</th>
                                    <th><!-- {% translate "Action" %} --></th>
                                </tr>
                            </thead>

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

    {% include "fleetfinder/modals/kick-fleet-member.html" %}
{% endblock %}

{% block extra_css %}
    {% include "fleetfinder/bundles/css/datatables-2-css.html" with extColumnControl=True %}
    {% include "fleetfinder/bundles/css/fleetfinder-css.html" %}
{% endblock %}

{% block extra_javascript %}
    {% include "fleetfinder/bundles/js/datatables-2-js.html" with extColumnControl=True %}

    {% translate "Fleet boss" as l10nFleetBoss %}
    {% translate "Kick member from fleet" as l10nKickMemberFromFleet %}
    {% translate "An unknown error occurred." as l10nUnknownError %}

    <script>
        const aaFleetFinderSettingsOverride = {
            dataTables: {
                url: {
                    fleetDetails: '{% url "fleetfinder:ajax_fleet_details" fleet.fleet_id %}',
                    kickFleetMember: '{% url "fleetfinder:ajax_fleet_kick_member" fleet.fleet_id %}'
                }
            },
            l10n: {
                fleetBoss: '{{ l10nFleetBoss|escapejs }}',
                kickMemberFromFleet: '{{ l10nKickMemberFromFleet|escapejs }}',
                unknownError: '{{ l10nUnknownError|escapejs }}'
            },
            csrfToken: '{{ csrf_token }}'
        };
    </script>

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