{% extends "wagtailadmin/base.html" %}
{% load wagtailadmin_tags %}
{% load i18n %}
{% block titletag %}Media{% endblock %}
{% block extra_js %}
    {{ block.super }}
    <script>
        window.headerSearch = {
            url: "{% url 'wagtailmedia:index' %}",
            termInput: "#id_q",
            targetOutput: "#media-results"
        };

        $(function() {
            $('#collection_chooser_collection_id').change(function() {
                const params = new URLSearchParams(window.location.search);
                this.form["q"].value = params.get("q");
                this.form.submit();
            });
        });
    </script>
{% endblock %}

{% block content %}
    {% trans "Media" as media_str %}
    {% if user_can_add %}
        {% fragment as media_actions %}
            {% block add_actions %}
            <div class="dropdown dropdown-button match-width">
                <a href="{% url 'wagtailmedia:add' 'audio' %}" class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Add audio" %}</a>
                <div class="dropdown-toggle">{% icon name="arrow-down" %}</div>
                <ul>
                    <li><a class="button bicolor button--icon" href="{% url 'wagtailmedia:add' 'video' %}">{% icon name="plus" wrapped=1 %}{% trans "Add video" %}</a></li>
                </ul>
            </div>
            {% endblock %}
        {% endfragment %}

        {% include "wagtailadmin/shared/header.html" with title=media_str icon="media" search_url="wagtailmedia:index" extra_actions=media_actions %}
    {% else %}
        {% include "wagtailadmin/shared/header.html" with title=media_str icon="media" search_url="wagtailmedia:index" %}
    {% endif %}

    <div class="nice-padding">
        {% if collections %}
            <form class="image-search search-bar" action="{% url 'wagtailmedia:index' %}" method="GET" novalidate>
                <input type="hidden" name="q" id="id_q"  value="{{ query_string }}">
                <ul class="fields">
                    <li>{% include "wagtailadmin/shared/collection_chooser.html" %}</li>
                    {% if popular_tags %}
                    <li>
                        <fieldset class="tagfilter">
                            <legend>{% trans 'Popular Tags:' %}</legend>
                            {% for tag in popular_tags %}
                                <a class="button button-small bicolor button--icon{% if tag.name != current_tag %} button-secondary{% endif %}" href="{% url 'wagtailmedia:index' %}{% querystring tag=tag.name %}">{% icon name="tag" wrapped=1 %}{{ tag.name }}</a>
                            {% endfor %}
                            {% if current_tag %}
                                <a class="button button-small bicolor button-secondary button--icon" href="{% url 'wagtailmedia:index' %}{% querystring tag='' %}">{% icon name="cross" wrapped=1 %}{% trans 'Clear' %}</a>
                            {% endif %}
                        </fieldset>
                    </li>
                    {% endif %}
                </ul>
            </form>
        {% endif %}

        <div id="media-results" class="media">
            {% include "wagtailmedia/media/results.html" %}
        </div>
    </div>
{% endblock %}
