{% load i18n wagtailadmin_tags %}
{% trans "Choose a media file" as  choose_str %}
{% include "wagtailadmin/shared/header.html" with title=choose_str tabbed=1 merged=1 icon="media" %}

{% if uploadforms %}
    {# Both auth and video forms are powered by the same media form, so use one of them #}
    {% if uploadforms.video %}
        {{ uploadforms.video.media.js }}
        {{ uploadforms.video.media.css }}
    {% else %}
        {{ uploadforms.audio.media.js }}
        {{ uploadforms.audio.media.css }}
    {% endif %}

    <ul class="tab-nav merged" data-tab-nav>
        <li class="{% if not uploadforms.audio.errors and not uploadforms.video.errors %}active{% endif %}"><a href="#search" >{% trans "Search" %}</a></li>
        {% if uploadforms.audio %}
            <li class="{% if uploadforms.audio.errors and media_type == 'audio' %}active{% endif %}"><a href="#upload-audio">{% trans "Upload Audio" %}</a></li>
        {% endif %}
        {% if uploadforms.video %}
            <li class="{% if uploadforms.video.errors and media_type == 'video' %}active{% endif %}"><a href="#upload-video">{% trans "Upload Video" %}</a></li>
        {% endif %}
    </ul>
{% endif %}

<div class="tab-content wagtailmedia-tabs">
    <section id="search" class="{% if not uploadforms.audio.errors and not uploadforms.audio.non_field_errors %}active {% endif %}nice-padding">
        <form class="media-search search-bar" action="{% url 'wagtailmedia:chooser' %}" method="GET" 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 'wagtailmedia:index' %}?tag={{ tag.name|urlencode }}">{{ tag.name }}</a>
                        {% endfor %}
                    </li>
                {% endif %}
            </ul>
        </form>
        <div id="search-results" class="listing media">
            {% include "wagtailmedia/chooser/legacy/results.html" %}
        </div>
    </section>
    {% if uploadforms %}
        {% for form_type, uploadform in uploadforms.items %}
        <section id="upload-{{ form_type }}" class="{% if uploadform.errors and media_type == form_type %}active{% endif %} nice-padding">
            {% include "wagtailadmin/shared/non_field_errors.html" with form=uploadform %}
            <form class="media-upload" action="{% url 'wagtailmedia:chooser_upload' form_type %}" 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…' %}">{% icon name="spinner" %}<em>{% trans 'Upload' %}</em></button>
                    </li>
                </ul>
            </form>
        </section>
        {% endfor %}
    {% endif %}
</div>