{% 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') {
            checkImageServer();
        }
    });
</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"] %}
                <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="#images-{{ loop.index0 }}">
                    <b>{{ response["server"]["name"] }}</b>
                </a>
                <ul id="images-{{ loop.index0 }}" class="nav flex-column nav-pills collapse">
                    {% for image in response["json"]["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"] }}" />
                                    {{ image["name"] }}
                        </li>
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

{% block commands %}
  <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="{{ _('Delete image') }}"
         form="imagesForm" formaction="{{ url_for('action_image_delete') }}" formmethod="get">
  {% if btn_back %}
    <button class="btn btn-danger ml-3" type="button" id="backButton" onclick="history.back()">
      {{ _("Back") }}
    </button>
  {% endif %}
{% endblock %}