{% extends 'base.html' %}

{% block nav_lives %}active{% endblock %}

{% block container %}
    <form id="livesForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    </form>
    {{ super() }}
</form>

<script>
    // Launch the javascript on document ready, so all the global functions exists
    // in the scope
    document.addEventListener('readystatechange', () => {
        if (document.readyState === 'complete') {
            keepTreeState('#servers', 'lives');
        }
    });
</script>
{% endblock %}

{% block sidebar %}
    <ul id="servers" class="nav ogcp-nav flex-column nav-pills">
        {% for lives_data in oglive_list %}
            <li class="nav-item">
                {% set server_ip_port = lives_data["server"].ip ~ ":" ~ lives_data["server"].port %}
                <input id="{{ server_ip_port }}" class="form-check-input" type="checkbox" form="livesForm"
                {% if sidebar_state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
                value="{{ server_ip_port }}" name="server"
                {% if loop.index == 1 %}checked{% endif %}></input>
                <a class="nav-link" data-toggle="collapse" href="#server{{loop.index}}">
                    {{ lives_data["server"]["name"] }}
                </a>
                <ul class="nav flex-column collapse" id="server{{loop.index}}">
                    {% for oglive in lives_data["json"]["oglive"] %}
                        <li class="nav-item">
                          <a>{{ oglive["directory"] }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

{% block commands %}
{% if current_user.is_authenticated %}
    <input class="btn btn-light {% block nav_live_default %}{% endblock %}" type="submit" value="{{ _('Set default') }}"
            form="livesForm" formaction="{{ url_for('action_live_default') }}" formmethod="get">
    {% if btn_back %}
        <button class="btn btn-danger ml-3" type="button" id="backButton" onclick="history.back()">
        {{ _("Back") }}
        </button>
    {% endif %}
{% endif %}
{% endblock %}
