{% extends "wagtailadmin/base.html" %}
{% load wagtailadmin_tags %}
{% load i18n %}

{% block titletag %}{% trans "Embed Videos" %}{% endblock %}
{% block extra_js %}
    {{ block.super }}
    <script>
        window.headerSearch = {
            url: "{% url 'wagtail_embed_videos:index' %}",
            termInput: "#id_q",
            targetOutput: "#embed_video-results"
        }

        $(function() {
            $('#collection_chooser_collection_id').on('change', function() {
                this.form.submit();
            })
        });
    </script>
{% endblock %}

{% block content %}
    {% trans "Embed Videos" as ev_str %}

    {% if user_can_add %}
        {% trans "Add a video" as add_ev_str %}
        {% url "wagtail_embed_videos:add" as add_link %}
        {% include "wagtailadmin/shared/header.html" with title=ev_str action_url=add_link icon="media" action_text=add_ev_str search_url="wagtail_embed_videos:index" %}
    {% else %}
        {% include "wagtailadmin/shared/header.html" with title=ev_str icon="media" search_url="wagtal_embed_videos:index" %}
    {% endif %}

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

        <div id="embed_video-results">
            {% include "wagtail_embed_videos/embed_videos/results.html" %}
        </div>
    </div>

{% endblock %}
