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

{% load i18n %}

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

{% block aa_fleetfinder_body %}
    <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">
                    <table class="table table-striped table-hover table-vertical-middle" id="table_fleet_composition" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>{% translate "Ship class" %}</th>
                                <th>{% translate "Count" %}</th>
                            </tr>
                        </thead>

                        <tbody></tbody>
                    </table>
                </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">
                    <table class="table table-striped table-hover table-vertical-middle" id="table_fleet_members" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>{% translate "Name" %}</th>
                                <th>{% translate "Ship class" %}</th>
                                <th>{% translate "System" %}</th>
                            </tr>
                        </thead>

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

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

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

    <script>
        $(document).ready(() => {
            const table_fleet_members = $('#table_fleet_members');
            const tabe_fleet_composition = $('#table_fleet_composition');

            const populateDatatables = () => {
                $.get('{% url "fleetfinder:ajax_fleet_details" fleet_id %}', (data) => {
                    table_fleet_members.DataTable({
                        destroy: true,
                        paging: false,
                        data: data.fleet_member,
                        columns: [
                            {data: 'character_name'},
                            {data: 'ship_type_name'},
                            {data: 'solar_system_name'}
                        ]
                    });

                    tabe_fleet_composition.DataTable({
                        destroy: true,
                        paging: false,
                        data: data.fleet_composition,
                        columns: [
                            {data: 'ship_type_name'},
                            {data: 'number', className: 'text-right', width: '100px'}
                        ],
                        order: [[1, 'desc']]
                    });
                });
            };

            table_fleet_members.DataTable({
                language: {
                    emptyTable: 'No data / loading ...'
                }
            });

            tabe_fleet_composition.DataTable({
                language: {
                    emptyTable: 'No data / loading ...'
                }
            });

            populateDatatables();

            setInterval(function () {
                populateDatatables();
            }, 30000);
        });
    </script>
{% endblock %}
