{% set active_pill_route='fleet_node_player_list' %}
{% extends 'base.jinja.html' %}

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

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

{% block add_js %}
    <script src="{{ STATIC_PREFIX }}js/fleet/node-players.js"></script>

    {{ HOOK(H_SLIDESHOW_CONTENT_JAVASCRIPT) }}
{% endblock %}

{% block body_class %}view-node-player-edit edit-page{% endblock %}

{% block top_page %}
    <div class="top-content">
        <h1>
            {{ l.fleet_node_player_form_edit_title }}
        </h1>
    </div>
{% endblock %}

{% block main_page %}
    <div class="bottom-content">
        <div class="page-content">
            <div class="inner dirview">
                <div class="breadcrumb-container">
                    <ul class="breadcrumb">
                        {% set ns = namespace(breadpath='') %}
                        {% for dir in working_folder_path[1:].split('/') %}
                            {% set ns.breadpath = ns.breadpath ~ '/' ~ dir %}
                            <li>
                                <a href="{{ url_for('fleet_node_player_cd', path=ns.breadpath) }}">
                                    <i class="explr-icon explr-icon-folder"></i>
                                    {{ truncate(dir, 25, '...') }}
                                </a>
                            </li>
                            {% if not loop.last %}
                                <li class="divider">
                                    <i class="fa fa-chevron-right"></i>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>

                <div class="horizontal">
                    <div class="form-holder">
                        <form class="form" action="{{ url_for('fleet_node_player_save', node_player_id=node_player.id) }}" method="POST">

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


                            <div class="form-group tab-select">
                                <div class="widget">
                                    <i class="fa fa-get-pocket operating-system-icon"></i>
                                    <select name="operating_system" id="node-player-edit-operating-system" class="operating-system-select">
                                        {% for os in enum_operating_system %}
                                            <option value="{{ os.value }}" data-icon="{{ enum_operating_system.get_fa_icon(os) }}" data-color="{{ os.value }}" {% if os == node_player.operating_system %}selected="selected"{% endif %}>
                                                {{ t(os) }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <i class="fa fa-sort-desc triangle"></i>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="node-player-edit-host">{{ l.fleet_node_player_form_label_host }}</label>
                                <div class="widget">
                                    <input type="text" name="host" id="node-player-edit-host" required="required" value="{{ node_player.host }}" placeholder="{{ l.common_host_placeholder }}" />
                                </div>
                            </div>

                            <div class="actions actions-left">
                                <button type="submit" class="btn btn-info">
                                    <i class="fa fa-save icon-left"></i>
                                    {{ l.common_save }}
                                </button>
                                <a href="{{ url_for('fleet_node_player_list') }}" class="btn btn-naked">
                                    <i class="fa fa-rectangle-xmark icon-left"></i>
                                    {{ l.common_cancel }}
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}