<div class="horizontal">
    <div class="players-holder vertical">
        <h3>
            {{ l.fleet_node_player_group_page_player_management }}
        </h3>
        <p>
            {{ l.fleet_node_player_group_page_player_management_desc }}
        </p>

        {% with players=players %}
            {% include 'fleet/node-players/component/table.jinja.html' %}
        {% endwith %}

        <div class="actions actions-right">
            <button type="button" class="btn btn-info node-player-group-player-assign" data-route="{{ url_for('fleet_node_player_group_assign_player', player_group_id=current_player_group.id, player_id='__id__') }}">
                <i class="fa fa-plus"></i> {{ l.fleet_node_player_group_assign_player }}
            </button>
            <a href="{{ url_for('fleet_node_player_list') }}" class="btn btn-neutral" target="_blank">
                <i class="fa fa-display main"></i>
                <sub>
                    <i class="fa fa-download"></i>
                </sub>
            </a>
        </div>
    </div>

    <div class="node-player-group-holder vertical">
        <h3>
            {{ l.fleet_node_player_group_page_about }}
        </h3>

        <div class="form-holder">
            <form class="form" action="{{ url_for('fleet_node_player_group_save') }}" method="POST">
                <input type="hidden" name="id" id="node-player-group-edit-id" value="{{ current_player_group.id }}"/>

                <div class="form-group">
                    <label for="node-player-group-edit-name">{{ l.fleet_node_player_group_form_label_name }}</label>
                    <div class="widget">
                        <input type="text" name="name" id="node-player-group-edit-name" required="required" value="{{ current_player_group.name }}"/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="node-player-group-edit-playlist-id">{{ l.fleet_node_player_group_form_label_playlist_id }}</label>
                    <div class="widget">
                        <select name="playlist_id" id="node-player-group-edit-playlist-id" class="input-naked">
                            <option value="">{{ l.common_empty }}</option>
                            {% for playlist_id, playlist_name in playlists.items() %}
                                <option value="{{ playlist_id }}" {% if current_player_group.playlist_id == playlist_id %}selected="selected"{% endif %}>
                                    {{ playlist_name }}
                                </option>
                            {% endfor %}
                        </select>
                        {% if current_player_group.playlist_id %}
                            <a href="{{ url_for('playlist_list', playlist_id=current_player_group.playlist_id) }}" class="btn btn-neutral">
                                <i class="fa-solid fa-up-right-from-square"></i>
                            </a>
                        {% endif %}
                    </div>
                </div>

                <div class="actions actions-right">
                    <button type="submit" class="btn btn-info">
                        <i class="fa fa-save icon-left"></i>
                        {{ l.common_save }}
                    </button>
                </div>
            </form>
        </div>

        {% if current_player_group.playlist_id %}
            <div class="preview-holder">
                {% set preview_url = request.scheme ~ '://' ~ request.headers.get('host') ~ url_for('player_use', playlist_slug_or_id=current_player_group.playlist_id) %}

                <h4 class="divide">
                    Iframe
                </h4>
                <p>
                    {{ l.playlist_form_preview_iframe_desc }}
                </p>

                <div class="preview">
                    <button type="button" class="btn btn-pixel node-player-group-preview"
                            title="{{ l.playlist_panel_preview_action }}"
                            data-url="{{ preview_url }}?intro=0&animation=0">
                        <i class="fa fa-play"></i>
                    </button>
                </div>
            </div>
        {% endif %}
    </div>

</div>


