{% load i18n %}

<h2>{% trans "Select image" %}</h2>
<div id="imagebrowser">
    {% include "lfs/catalog/categories/product/products_navigation.html" %}

    <div class="filter-wrapper">
        <form action="{% url 'lfs_manage_imagebrowser' %}" id="imagebrowser-filter" method="get">
            {% csrf_token %}
            <input type="text" value="{{ query }}" name="q" /> <input class="filter-button" type="submit" value="{% trans "Filter" %}" />
            <input type="hidden" value="{{ pagination.current_page }}" name="start" />
        </form>
    </div>

    {% for image in images %}
{% comment %}        <div class="image-form">
            <input type="radio"
                   class="image"
                   name="image"
                   value="{{ image.url }}"
                   {% if image.checked %}checked="checked"{% endif %} />
            <div class="image">
                <img src="{{ image.url }}" />
            </div>
        </div>{% endcomment %}

        <div class="image-form">
            <label for="image-toggle-{{ image.id }}" class="image-selector">
                <input id="image-toggle-{{ image.id }}" {% if image.checked %}checked="checked"{% endif %} class="toggle-images js-image" type="radio" name="image" value="{{ image.url }}" />
            </label>
            <div class="image">
                <img src="{{ image.url }}" />
            </div>
            <span class="image-title">{{ image.title }}</span>
        </div>

    {% empty %}
        <div>
            {% trans "There are no images yet" %}
        </div>
    {% endfor %}
    <br clear="both" />
    <h2>{% trans "Insert image" %}</h2>
    <div class="form">
        <div>
            <select id="image-class">
                {% for klass in classes %}
                    <option value="{{ klass.value }}" {% if klass.selected %}selected="selected"{% endif %}>{{ klass.title }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <select id="image-size">
                <option value="">{% trans "Original" %}</option>
                {% for size in sizes %}
                    <option value="{{ size.value }}" {% if size.selected %}selected="selected"{% endif %}>{{ size.title }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <input type="button"
                   id="insert-image"
                   value='{% trans "Insert" %}' />
        </div>
    </div>
</div>
