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

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

{% block content %}
  {% trans "Video" as video_str %}
  <header class="nice-padding">
    <div class="row">
      <div class="left">
        <div class="col">
          <h1 class="icon icon-media">
            {{ video_str }}
          </h1>
        </div>
        <form class="col search-form" action="{% url 'castvideo:index' %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate>
          <ul class="fields">
            {% for field in search_form %}
              <li>
                {% include "wagtailadmin/shared/field.html" %}
              </li>
            {% endfor %}
            <li class="submit" style="display: none;"><input type="submit" value="Search" class="button" /></li>
          </ul>
        </form>
      </div>
      {% if user_can_add %}
        {% block add_actions %}
          <div class="right">
            <div class="col">
              <div class="addbutton">
                <a href="{% url 'castvideo:add' %}" class="button bicolor button--icon"><span class="icon-wrapper"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></span>{% trans "Add video" %}</a>
              </div>
            </div>
          </div>
        {% endblock %}
      {% endif %}
    </div>
  </header>

  <div class="nice-padding">
    {% if collections %}
      <form class="image-search search-bar" action="{% url 'castvideo:index' %}" method="GET" novalidate>
        <ul class="fields">
          {% include "wagtailadmin/shared/collection_chooser.html" %}
        </ul>
      </form>
    {% endif %}

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