{% extends "wagtailadmin/base.html" %}
{% load i18n wagtailadmin_tags %}

{% block titletag %}{% trans "Unsplash image search" %}{% endblock %}

{% block content %}
    {% trans "Unsplash Images" as im_str %}
    {% include "wagtailadmin/shared/header.html" with title=im_str icon="image" search_url="search_unsplash_images" %}
    
    <div class="nice-padding">
        {% if results %}
            <form id="unsplash-image-select-form" action="" method="POST">
                {% csrf_token %}
                <div id="image-results">
                    {% if total_results %}
                        <h2 role="alert">
                            {% blocktrans count counter=images.paginator.count %}
                                There is {{ total_results }} match
                            {% plural %}
                                There are {{ total_results }} matches
                            {% endblocktrans %}
                        </h2>

                        {% comment %} {% search_other %} {% endcomment %}
                    {% else %}
                        <h2>{% trans "Search images..." %}</h2>
                    {% endif %}

                    <ul class="listing horiz images">
                        {% for image in results %}
                            <li>
                                <div class="image-choice">
                                    <figure>
                                        <button name="image_id" value="{{ image.id }}" style="border: none; background: none;">
                                            <img src="{{ image.urls.thumb }}" alt="" style="max-height: 215px;" />
                                        </button>
                                        {% comment %} {% trans "pixels" as translated_pixels %} {% endcomment %}
                                        <figcaption>
                                            {% comment %} {{ image.title|ellipsistrim:60 }} {% endcomment %}
                                            {% comment %} <span class="visuallyhidden">{{ image.width }} {{ translated_pixels  }} &#215; {{ image.height }} {{ translated_pixels}}</span> {% endcomment %}
                                        </figcaption>
                                    </figure>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                    <nav class="pagination" aria-label="{% trans 'Pagination' %}">
                        <p>{% blocktrans with page_num=current_page total_pages=total_pages %}Page {{ page_num }} of {{ total_pages }}.{% endblocktrans %}</p>
                        <ul>
                            <li class="prev">
                                {% if current_page > 0 %}
                                    <a href="{{ url_to_use }}{% querystring p=previous_page %}" class="icon icon-arrow-left">{% trans 'Previous' %}</a>
                                {% endif %}
                            </li>
                            <li class="next">
                                {% if current_page != total_pages %}
                                    <a href="{{ url_to_use }}{% querystring p=next_page %}" class="icon icon-arrow-right-after">{% trans 'Next' %}</a>
                                {% endif %}
                            </li>
                        </ul>
                    </nav>
                </div>
            </form>
        {% else %}
            {% trans "Search for images from Unsplash above" %}
        {% endif %}
    </div>

{% endblock %}