{% extends "wagtailadmin/base.html" %}
{% load i18n %}
{% block titletag %}{% trans "Add search pick" %}{% endblock %}
{% block content %}
    {% trans "Add search pick" as add_str %}
    {% include "wagtailadmin/shared/header.html" with title=add_str icon="pick" %}

    <div class="nice-padding">
        <div class="help-block help-info">
            {% blocktrans %}
                <p>Promoted search results are a means of recommending specific pages that might not organically come high up in search results. E.g recommending your primary donation page to a user searching with the less common term "<em>giving</em>".</p>
            {% endblocktrans %}
            
            {% blocktrans %}
                <p>The "Search term(s)/phrase" field below must contain the full and exact search for which you wish to provide recommended results, <em>including</em> any misspellings/user error. To help, you can choose from search terms that have been popular with users of your site.</p>
            {% endblocktrans %}
        </div>
        <form action="{% url 'wagtailsearchpromotions:add' %}" method="POST">
            {% csrf_token %}

            <ul class="fields">
                <li>
                    {% include "wagtailsearch/queries/chooser_field.html" with field=query_form.query_string only %}   
                </li>
                <li>
                    {% include "wagtailsearchpromotions/includes/searchpromotions_formset.html" with formset=searchpicks_formset only %}
                </li>
                <li><input type="submit" value="{% trans 'Save' %}" /></li>
            </ul>
        </form>
    </div>
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    {% include "wagtailadmin/pages/_editor_css.html" %}
{% endblock %}
{% block extra_js %}
    {{ block.super }}
    {% include "wagtailadmin/pages/_editor_js.html" %}

    <script type="text/javascript">
        {% include "wagtailsearchpromotions/includes/searchpromotions_formset.js" with formset=searchpicks_formset only %}
        {% include "wagtailsearch/queries/chooser_field.js" only %}

        $(function() {
            createQueryChooser('{{ query_form.query_string.auto_id }}');
        });
    </script>
{% endblock %}