{% load i18n %}
{% trans "Choose a transcript file" as  choose_str %}
{% include "wagtailadmin/shared/header.html" with title=choose_str tabbed=1 merged=1 icon="media" %}

{{ uploadform.media.js }}
{{ uploadform.media.css }}

{% if uploadform %}
  <ul class="tab-nav merged" data-tab-nav>
    <li class="{% if not uploadform.errors %}active{% endif %}"><a href="#search" >{% trans "Search" %}</a></li>
    <li class="{% if uploadform.errors %}active{% endif %}"><a href="#upload-transcript">{% trans "Upload transcript" %}</a></li>
  </ul>
{% endif %}

<div class="tab-content">
  <section id="search" class="{% if not uploadform.errors %}active {% endif %}nice-padding">
    <form class="media-search search-bar" action="{% url 'cast-transcript:chooser' %}" method="GET" novalidate>
      <ul class="fields">
        {% for field in searchform %}
          <li>
            {% include "wagtailadmin/shared/field.html" %}
          </li>
        {% endfor %}
        {% if collections %}
          {% include "wagtailadmin/shared/collection_chooser.html" %}
        {% endif %}
      </ul>
    </form>
    <div id="search-results" class="listing media">
      {% include "cast/transcript/chooser_results.html" %}
    </div>
  </section>
  {% if uploadform %}
    <section id="upload-transcript" class="{% if uploadform.errors %}active{% endif %} nice-padding">
      <form class="media-upload" action="{% url 'cast-transcript:chooser_upload' %}" method="POST" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        <ul class="fields">
          {% for field in uploadform %}
            {% if field.is_hidden %}
              {{ field }}
            {% else %}
              <li>
                {% include "wagtailadmin/shared/field.html" %}
              </li>
            {% endif %}
          {% endfor %}
          <li>
            <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Uploading…' %}"><span class="icon icon-spinner"></span><em>{% trans 'Upload' %}</em></button>
          </li>
        </ul>
      </form>
    </section>
  {% endif %}
</div>
