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

{{ uploadform.media.js }}
{{ uploadform.media.css }}

<div class="w-tabs" data-tabs data-tabs-disable-url>
    {% if uploadform %}
        {# Using nice-padding and full width class until the modal header is restyled #}
        <div role="tablist" class="w-tabs__list w-w-full nice-padding">
            {% trans "Search" as search_text %}
            {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='search' title=search_text active=uploadform.errors %}
            {% trans "Upload" as upload_text %}
            {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='upload' title=upload_text active=uploadform.errors %}
        </div>
    {% endif %}

    <div class="tab-content nice-padding">
        <section
            id="tab-search"
            class="w-tabs__panel"
            role="tabpanel"
            aria-labelledby="tab-label-search"
        >
            <form class="image-search search-bar" action="{% url 'wagtailimages:chooser_results' %}{% 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 %}
            {% include "wagtailimages/chooser/upload_form.html" with form=uploadform will_select_format=will_select_format %}
        {% endif %}
    </div>
</div>
