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

{% load i18n %}
{% load humanize %}
{% load evelinks %}
{% load static %}

{% block page_title %}{% translate "Fleet Details" %}{% endblock %}

{% block fleetfinder_block %}
    <div class="row">
        <div class="col-lg-6 col-lg-push-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">
                        {% translate "Fleet Composition" %}
                    </div>
                </div>

                <div class="panel-body">
                    <table class="table table-striped table-hover table-vertical-middle" id="table_fleet_composition" style="width: 100%;">
                        <thead>
                            <th>{% translate "Ship Name" %}</th>
                            <th>{% translate "Quantity" %}</th>
{#                            <th style="width: 200px;">{% translate "Since Last Update" %}</th>#}
                        </thead>

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

        <div class="col-lg-6 col-lg-pull-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">
                        {% translate "Fleet Members" %}
                    </div>
                </div>

                <div class="panel-body">
                    <table class="table table-striped table-hover table-vertical-middle" id="table_fleet_members" style="width: 100%;">
                        <thead>
                            <th>{% translate "Name" %}</th>
                            <th>{% translate "Ship type" %}</th>
                            <th>{% translate "System" %}</th>
                        </thead>

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

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

    <link rel="stylesheet" href="{% static 'fleetfinder/css/fleetfinder.css' %}" type="text/css">
{% endblock %}

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

    <script type="application/javascript">
        $(document).ready(function(){
            var populateDatatable = function() {
                $.get('{% url "fleetfinder:ajax_fleet_details" fleet_id %}', function(data) {
                    console.log(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'}
                        ]
                    });

                    $('#table_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 ...'
                }
            });

            $('#table_fleet_composition').DataTable({
                language: {
                    emptyTable: 'No data / loading ...'
                }
            });

            populateDatatable();

            setInterval(function() {
                populateDatatable();
            }, 15000);
        });
    </script>
{% endblock %}

{% block extra_script %}

{% endblock %}
