{% extends 'base.html' %}

{% block nav_repos %}active{% endblock %}

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

{% block sidebar %}
    <ul id="repos-list" class="nav ogcp-nav flex-column nav-pills">
        {% for repos in repos_resp %}
        {% set server_name = repos["server"].name %}
        {% set server_ip_port = repos["server"].ip ~ ":" ~ repos["server"].port %}
        {% set repos_list = repos["json"]["repositories"] %}
        <li class="nav-item">
            <input id="{{ server_ip_port }}"class="form-check-input" type="checkbox" form="reposForm"
                {% if sidebar_state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
                value="{{ server_ip_port }}" name="repos-server" />
            <a class="nav-link {% if not repos_list %}disabled{% endif %}" href="#server{{loop.index}}"
                       {% if repos_list %}data-toggle="collapse"{% endif %}>
                {{ server_name }}
            </a>
            <ul class="nav flex-column collapse" id="server{{loop.index}}">
                {% for r in repos_list %}
                <li class="nav-item">
                    <input class="form-check-input" type="checkbox" form="reposForm"
                           {% if sidebar_state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
                           id="repo{{ r["id"] }}"
                           data-server="{{server_ip_port}}"
                           value="{{ r["id"] }}"
                           name="{{ r["name"]~_~r["id"] }}" />
                    {{ r["name"] }}
                </li>
                {% endfor %}
            </ul>
        </li>
        {% endfor %}
    </ul>
    <script>
        // Launch the javascript on document ready, so all the global functions exists
        // in the scope
        document.addEventListener('readystatechange', () => {
            if (document.readyState === 'complete') {
                keepTreeState('#repos-list', 'repos');
                keepSelectedClients('repos');
                checkOnChange('repos-server');
            }
        });
    </script>
{% endblock %}

{% block commands %}
{% if current_user.is_authenticated %}
    <input class="btn btn-light {% block nav_repo_info %}{% endblock %}" type="submit" value="{{ _('Repo details') }}"
        form="reposForm" formaction="{{ url_for('action_repo_info') }}" formmethod="get">
    {% if current_user.get_permission('REPOSITORY', 'ADD') %}
    <input class="btn btn-light {% block nav_repo_add %}{% endblock %}" type="submit" value="{{ _('Add repo') }}"
        form="reposForm" formaction="{{ url_for('action_repo_add') }}" formmethod="get">
    {% endif %}
    {% if current_user.get_permission('REPOSITORY', 'DELETE') %}
    <input class="btn btn-light {% block nav_repo_delete %}{% endblock %}" type="submit" value="{{ _('Delete repo') }}"
        form="reposForm" formaction="{{ url_for('action_repo_delete') }}" formmethod="get">
    {% endif %}
    {% if current_user.get_permission('REPOSITORY', 'UPDATE') %}
    <input class="btn btn-light {% block nav_repo_update %}{% endblock %}" type="submit" value="{{ _('Update repo') }}"
        form="reposForm" formaction="{{ url_for('action_repo_update') }}" formmethod="get">
    {% endif %}
{% endif %}

  {% if btn_back %}
    <button class="btn btn-danger ml-3" type="button" id="backButton" onclick="history.back()">
      {{ _("Back") }}
    </button>
  {% endif %}
{% endblock %}
