{% extends 'default/templates/renderable/administerable.html' %}

{% block content %}

    <div class="gallery-preview">
        {% for item in content.items_ordered %}
            <a href="#gallery-{{ content.name }}-item-{{ loop.index }}">
                <div class="gallery-item-preview">
                    <img
                        class="preview"
                        src="{{ item.image.url('raw') }}"
                        {% if item.description %}
                            alt="{{ item.description }}"
                            title="{{ item.description }}"
                        {% elif item.image.description %}
                            alt="{{ item.image.description }}"
                            title="{{ item.image.description }}"
                        {% endif %}
                    />
                </div>
            </a>
        {% endfor %}
    </div>

    <div id="gallery-{{ content.name }}" class="modal">

        <a href="#__close">✖</a>

        {% for item in content.items_ordered %}

            <div id="gallery-{{ content.name }}-item-{{ loop.index }}" class="gallery-item">

                {% set idx = loop.index %}
                <div class="gallery-item-image">

                    <img
                        src="{{ item.image.url('raw') }}"
                        {% if item.description %}
                            alt="{{ item.description }}"
                            title="{{ item.description }}"
                        {% elif item.image.description %}
                            alt="{{ item.image.description }}"
                            title="{{ item.image.description }}"
                        {% endif %}
                    />

                    {% if item.description %}
                        <div class="description">{{ item.description.render() }}</div>
                    {% elif item.image.description %}
                        <div class="description">{{ item.image.description.render() }}</div>
                    {% endif %}

                    <nav class="gallery-arrows">
                        <ul>
                        {% if not loop.first %}
                            <li><a class="previous" title="Previous picture" href="#gallery-{{ content.name }}-item-{{ idx - 1 }}">❰</a></li>
                        {% endif %}
                        {% if not loop.last %}
                            <li><a class="next" title="Next picture" href="#gallery-{{ content.name }}-item-{{ idx + 1 }}">❱</a></li>
                        {% endif %}
                        </ul>
                    </nav>
                </div>

                <div class="gallery-preview">
                    {% for item in content.items_ordered %}
                        <a href="#gallery-{{ content.name }}-item-{{ loop.index }}">
                            <div class="gallery-item-preview{% if loop.index == idx %} active{% endif %}">
                                <img
                                    class="preview"
                                    src="{{ item.image.url('raw') }}"
                                    {% if item.description %}
                                        alt="{{ item.description }}"
                                        title="{{ item.description }}"
                                    {% elif item.image.description %}
                                        alt="{{ item.image.description }}"
                                        title="{{ item.image.description }}"
                                    {% endif %}
                                />
                            </div>
                        </a>
                    {% endfor %}
                </div>

            </div>

        {% endfor %}
    </div>

{% endblock %}