{% load wagtailimages_tags %}
{% load i18n %}
{% trans "Choose an image" as choose_str %}
{% include "wagtailadmin/shared/header.html" with title=choose_str merged=1 tabbed=1 icon="image" %}

{% if uploadform %}
    <ul class="tab-nav merged">
        <li class="{% if not uploadform.errors %}active{% endif %}"><a href="#search" >{% trans "Search" %}</a></li>
        <li class="{% if uploadform.errors %}active{% endif %}"><a href="#upload">{% trans "Upload" %}</a></li>
    </ul>
{% endif %}

<div class="tab-content">
    <section id="search" class="{% if not uploadform.errors %}active{% endif %} nice-padding">
        <form class="image-search search-bar" action="{% url 'wagtailimages:chooser' %}{% if will_select_format %}?select_format=true{% endif %}" method="GET" autocomplete="off" novalidate>
            <ul class="fields">
                {% for field in searchform %}
                    {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
                {% endfor %}
                {% if collections %}
                    {% include "wagtailadmin/shared/collection_chooser.html" %}
                {% endif %}
                {% if popular_tags %}
                    <li class="taglist">
                        <h3>{% trans 'Popular tags' %}</h3>
                        {% for tag in popular_tags %}
                            <a class="suggested-tag tag" href="{% url 'wagtailimages:index' %}?tag={{ tag.name|urlencode }}">{{ tag.name }}</a>
                        {% endfor %}
                    </li>
                {% endif %}
            </ul>
        </form>
        <div id="image-results">
            {% include "wagtailimages/chooser/results.html" %}
        </div>
    </section>
    {% if uploadform %}
        <section id="upload" class="{% if uploadform.errors %}active{% endif %} nice-padding">
            <form class="image-upload" action="{% url 'wagtailimages:chooser_upload' %}{% if will_select_format %}?select_format=true{% endif %}" method="POST" enctype="multipart/form-data" novalidate>
                {% csrf_token %}
                <ul class="fields">
                    {% for field in uploadform %}
                        {% if field.is_hidden %}
                            {{ field }}
                        {% else %}
                            {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
                        {% endif %}
                    {% endfor %}
                    <li>
                        <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Uploading…' %}"><span class="icon icon-spinner"></span><em>{% trans 'Upload' %}</em></button>
                    </li>
                </ul>
            </form>
        </section>
    {% endif %}
</div>