{% extends "wagtailadmin/base.html" %}
{% load i18n wagtailadmin_tags %}
{% block titletag %}{% blocktrans trimmed with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets {{ snippet_type_name_plural }}{% endblocktrans %}{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <script>
        window.headerSearch = {
            url: "{% url 'wagtailsnippets:list_results' model_opts.app_label model_opts.model_name %}",
            termInput: "#id_q",
            targetOutput: "#snippet-results"
        }
    </script>
    {% if can_delete_snippets %}
        <script src="{% versioned_static 'wagtailsnippets/js/snippet-multiple-select.js' %}"></script>
    {% endif %}
{% endblock %}

{% block content %}

    <header>
        <div class="row">
            <div class="left">
                <div class="col">
                    <h1>{% icon name="snippet" %}
                        {% blocktrans trimmed with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}</h1>

                    {% if is_searchable %}
                        <form class="col search-form" action="{% url 'wagtailsnippets:list' model_opts.app_label model_opts.model_name %}" method="get" novalidate>
                            <ul class="fields">
                                {% for field in search_form %}
                                    {% include "wagtailadmin/shared/field_as_li.html" with field=field field_classes="field-small iconfield" icon="search" %}
                                {% endfor %}
                                <li class="submit visuallyhidden"><input type="submit" value="Search" class="button" /></li>
                            </ul>
                        </form>
                    {% endif %}
                </div>

                {% if locales %}
                    <div class="col">

                    </div>
                {% endif %}
            </div>
            <div class="right col">
                <form>  {# HACK Removes list-style-type #}
                    <ul class="fields row rowflush">
                        {% if can_delete_snippets %}
                            <li class="col">
                                <a class="button bicolor button--icon serious delete-button u-hidden" data-url="{% url 'wagtailsnippets:delete-multiple' model_opts.app_label model_opts.model_name %}?">
                                    {% icon name="bin" wrapped=1 %}
                                    {% blocktrans trimmed with snippet_type_name=model_opts.verbose_name_plural %}Delete {{ snippet_type_name }}{% endblocktrans %}
                                </a>
                            </li>
                        {% endif %}
                        {% if locale %}
                            <li class="col">
                                <div class="field">
                                    {% include 'wagtailadmin/shared/locale_selector.html' with class='c-dropdown--large' %}
                                </div>
                            </li>
                        {% endif %}
                        {% if can_add_snippet %}
                            <li class="col">
                                <a href="{% url 'wagtailsnippets:add' model_opts.app_label model_opts.model_name %}{% if locale %}?locale={{ locale.language_code }}{% endif %}" class="button bicolor button--icon">
                                    {% icon name="plus" wrapped=1 %}
                                    {% blocktrans trimmed with snippet_type_name=model_opts.verbose_name %}Add {{ snippet_type_name }}{% endblocktrans %}</a>
                                {# TODO: figure out a way of saying "Add a/an [foo]" #}
                            </li>
                        {% endif %}
                    </ul>
                </form>
            </div>
        </div>
    </header>

    <div class="nice-padding">
        <div id="snippet-results" class="snippets">
            {% include "wagtailsnippets/snippets/results.html" %}
        </div>
    </div>
{% endblock %}
