{% extends 'base.html' %}

{% block nav_images %}active{% endblock %}

{% block container %}
    <form id="imagesForm">
        <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');
            keepSelectedClients('images');
            checkOnChange('image-server');
        }
    });
</script>
{% endblock %}

{% block sidebar %}
    <ul id="servers" class="nav ogcp-nav flex-column nav-pills">
        {% for response in responses %}
        {% set server_str = response["server"]["ip"] ~ ":" ~ response["server"]["port"] %}
        {% set parent_id = "repos-" ~ loop.index0 %}
                <li class="nav-item">
                <input class="form-check-input" type="checkbox" form="imagesForm"
                       id="{{ server_str }}" value="{{ server_str }}"
                       onclick="return false;" name="image-server" hidden/>
                <a class="nav-link" data-toggle="collapse" data-target="#repos-{{ loop.index0 }}">
                    <b>{{ response["server"]["name"] }}</b>
                </a>
                <ul id="{{ parent_id }}" class="nav flex-column nav-pills collapse">
                    {% for repo, repo_data in response["repos"].items() %}
                        <li class="nav-item">
                        <a class="nav-link" data-toggle="collapse" data-target="#{{parent_id}}-{{ loop.index0 }}">
                            <b>{{ repo_data["name"] }}</b>
                        </a>
                        <ul id="{{parent_id}}-{{ loop.index0 }}" class="nav ogcp-nav flex-column nav-pills collapse">
                            {% for image in repo_data["images"] %}
                                <li id="{{ image["name"] }}_{{ image["id"] }}" class="nav-item">
                                    <input class="form-check-input" type="checkbox" form="imagesForm"
                                        data-server="{{ server_str }}" value="{{ image["id"] }}"
                                        {% if image.get("selected", False) %}checked{% endif %}
                                        name="{{ image["name"] }}_{{ image["id"] }}"
                                        id="image{{ image["id"] }}"/>
                                     {{ image["name"] }}
                                </li>
                            {% endfor %}
                        </ul>
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

{% block commands %}
{% if current_user.is_authenticated %}
    <input class="btn btn-light" type="submit" value="{{ _('Image details') }}"
        form="imagesForm" formaction="{{ url_for('action_image_info') }}" formmethod="get">
    <input class="btn btn-light" type="submit" value="{{ _('List images') }}"
        form="imagesForm" formaction="{{ url_for('action_image_list') }}" formmethod="get">
    {% if current_user.get_permission('IMAGE', 'DELETE') %}
    <input class="btn btn-light" type="submit" value="{{ _('Delete image') }}"
        form="imagesForm" formaction="{{ url_for('action_image_delete') }}" formmethod="get">
    {% endif %}
    {% if current_user.get_permission('IMAGE', 'UPDATE') %}
    <input class="btn btn-light" type="submit" value="{{ _('Update image') }}"
        form="imagesForm" formaction="{{ url_for('action_image_config') }}" 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 %}