{% extends 'base.jinja.html' %}

{% block page_title %}
    {{ l.fleet_node_player_page_title }}
{% endblock %}

{% block add_css %}
    {{ HOOK(H_FLEET_NODE_PLAYER_CSS) }}
{% endblock %}

{% block add_js %}
    <script src="{{ STATIC_PREFIX }}js/lib/tablednd-fixed.js"></script>
    <script src="{{ STATIC_PREFIX }}js/fleet/node-players.js"></script>
    {{ HOOK(H_FLEET_NODE_PLAYER_JAVASCRIPT) }}
{% endblock %}

{% block page %}
    <div class="toolbar">
        <h2><i class="fa fa-tv icon-left"></i>{{ l.fleet_node_player_page_title }}</h2>

        <div class="toolbar-actions">
            {{ HOOK(H_FLEET_NODE_PLAYER_TOOLBAR_ACTIONS_START) }}
            <button class="purple node-player-add item-add"><i class="fa fa-plus icon-left"></i>{{ l.fleet_node_player_button_add }}</button>

            <select class="select-item-picker group-picker">
                <option value="{{ url_for('fleet_node_player_list') }}" {% if not current_group %}selected="selected"{% endif %}>
                    {{ l.common_default_node_player_group }}
                </option>
                {% for group_id, group_name in groups.items() %}
                    {% set is_active_group = str(current_group.id) == str(group_id) %}
                    <option value="{{ url_for('fleet_node_player_list_group_use', group_id=group_id) }}" {% if is_active_group %}selected="selected"{% endif %}>
                        {{ group_name }}
                    </option>
                {% endfor %}
            </select>

            {{ HOOK(H_FLEET_NODE_PLAYER_TOOLBAR_ACTIONS_END) }}
        </div>
    </div>


     <div class="panel">
        <div class="panel-body">
            <h3>{{ l.fleet_node_player_panel_active }}</h3>

            {% with tclass='active', node_players=enabled_node_players %}
                {% include 'fleet/player/component/table.jinja.html' %}
            {% endwith %}
        </div>
    </div>
    <div class="panel panel-inactive">
        <div class="panel-body">
            <h3>{{ l.fleet_node_player_panel_inactive }}</h3>

            {% with tclass='inactive', node_players=disabled_node_players %}
                {% include 'fleet/player/component/table.jinja.html' %}
            {% endwith %}
        </div>
    </div>

    <div class="modals hidden">
        <div class="modals-outer">
            <a href="javascript:void(0);" class="modal-close">
                <i class="fa fa-close"></i>
            </a>
            <div class="modals-inner">
                {% include 'fleet/player/modal/add.jinja.html' %}
                {% include 'fleet/player/modal/edit.jinja.html' %}
                {% include 'core/utrack.jinja.html' %}
            </div>
        </div>
    </div>
{% endblock %}
