{% load i18n static %}
{% trans "Choose an image" as choose_str %}

{% include "wagtailadmin/shared/header.html" with title=choose_str merged=1 tabbed=1 icon="image" %}

<ul class="tab-nav merged">
  <li class="active"><a href="#search" >{% trans "Search" %}</a></li>
  <li><a href="#upload">{% trans "Upload" %}</a></li>
</ul>

<div class="tab-content">
  <section id="search" class="active nice-padding">
  {% if tags %}
    <div class="tags">
      <span>{% trans 'Filter images by tags' %}</span>
      <div class="status-tag tag-__all__ primary icon icon-view"><a class="js-wagtailcloudinary-tag" data-tag="" href="{% url 'wagtailcloudinary:browse' %}">All</a></div>
      {% for item in tags %}
      <div class="status-tag tag-{{ item }} primary"><a class="js-wagtailcloudinary-tag" data-tag="{{ item|urlencode }}" href="{% url 'wagtailcloudinary:browse' %}">{{ item }}</a></div>
      {% endfor %}
    </div>
  {% endif %}

    <div id="image-results">
      <div class="wagtailcloudinary-wrapper">
        <ul class="listing images horiz chooser">
          {% include 'wagtailcloudinary/include/browse_ajax.html' %}
        </ul>
        {% if next_cursor %}
        <a href="#" class="js-wagtailcloudinary-more button button-small button-secondary" data-next="{{ next_cursor }}" data-tag="{{ tag }}" data-ajax-url="{% url 'wagtailcloudinary:browse' %}">{% trans 'Load more' %}</a>
        {% endif %}
      </div>
    </div>
  </section>
  <section id="upload" class="nice-padding">
    <div class="drop-zone">
      <p>{% trans 'Drag and drop images into this area to upload immediately.' %}</p>
      <div class="fileupload-wrapper">
        <label class="fileupload-button button bicolor icon icon-plus">
          <span>{% trans 'Or choose from your computer' %}</span>
          <input type="file" class="upload fileupload" multiple accept="image/*" name="images[]" data-url="{% url 'wagtailcloudinary:upload' %}" />
        </label>
      </div>
    </div>
    <div class="progress">
      <div class="bar"></div>
    </div>
    <div class="wagtailcloudinary-upload-wrapper">
      <ul class="listing images horiz chooser">
      </ul>
    </div>
  </section>
</div>