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

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

{% block fleetfinder_block %}
    {% if error %}
        <div class="alert alert-danger" role="alert">{{ error }}</div>
    {% endif %}

    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                {% translate "Available Fleets" %}
            </div>
        </div>

        <div class="panel-body">
            <table class="table table-striped table-hover table-vertical-middle" id="table_available-fleets">
                <thead>
                    <th>{% translate "Fleet Commander" %}</th>
                    <th>{% translate "Name" %}</th>
                    <th>{% translate "Created At" %}</th>
                    <th>{% translate "Join" %}</th>

                    {% if perms.fleetfinder.manage_fleets %}
                        <th>{% translate "Details" %}</th>
                        <th>{% translate "Edit" %}</th>
                    {% endif %}
                </thead>

                <tbody>
                    {% for fleet in fleets %}
                        <tr>
                            <td>
                                <img class="img-circle eve-character-portrait" src="{{ fleet.fleet_commander.character_id|character_portrait_url:32 }}" alt="{{ fleet.fleet_commander.character_name }}">
                                {{ fleet.fleet_commander.character_name }}
                            </td>

                            <td>
                                {{fleet.name}}
                            </td>

                            <td>
                                {{ fleet.created_at|date:"Y-m-d H:i" }}
                            </td>

                            <td>
                                <a href="{% url 'fleetfinder:join_fleet' fleet.fleet_id %}" class="btn btn-sm btn-default">{% translate "Join Fleet" %}</a>
                            </td>

                            {% if perms.fleetfinder.manage_fleets %}
                                <td>
                                    <a href="{% url 'fleetfinder:fleet_details' fleet.fleet_id %}"  class="btn btn-sm btn-default">{% translate "View fleet details" %}</a>
                                </td>

                                <td>
                                    <a href="{% url 'fleetfinder:edit_fleet' fleet.fleet_id %}"  class="btn btn-sm btn-default">{% translate "Edit Fleet advert" %}</a>
                                </td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </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(){
            $('#table_available-fleets').DataTable({
                columnDefs: [
                    {
                        orderable: false,
                        targets: [3]
                    },
                    {% if perms.fleetfinder.manage_fleets %}
                        {
                            orderable: false,
                            targets: [4, 5]
                        },
                    {% endif %}
                ],
                order: [[0, 'asc']],
                paging: false,
            });
        })
    </script>
{% endblock %}
