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

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

{% block page_title %}{% translate "Create fleet" %}{% endblock %}

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

{% block fleet_block %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="panel-title">
                {% translate "Fleet View" %}
            </div>
        </div>

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

                <tbody>
                    {% for key, value in fleet.aggregate.items %}
                        <tr>
                            <td>
                               {{ key }}
                            </td>
                            <td>
                                {{ value }}
                            </td>
                            <td>
                                {{ fleet.differential|get_item:key }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <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" id="table_fleet_members">
                <thead>
                    <th>{% translate "Name" %}</th>
                    <th>{% translate "Ship type" %}</th>
                    <th>{% translate "System" %}</th>
                </thead>

                <tbody>
                    {% for member in fleet.fleet %}
                        <tr>
                            <td>
                                <img class="img-circle eve-character-portrait" src="{{ member.character_id|character_portrait_url:32 }}" style="margin-right: 1rem;">
                                {{ member.character_name }}
                            </td>

                            <td>
                                <img class="img-circle eve-type-icon" src="{{ member.ship_type_id|type_icon_url:32 }}" style="margin-right: 1rem;">
                                {{ member.ship_type_name }}
                            </td>

                            <td>
                                {{ member.solar_system_name }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

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

    <script type="application/javascript">
        $(document).ready(function(){
            $('#table_fleet_members').DataTable({
                paging: false,
            });

            $('[data-toggle="tooltip"]').tooltip();
        })

        setTimeout(function() {
            location.reload();
        }, 60000);
    </script>
{% endblock %}

{% block extra_script %}

{% endblock %}
