{% extends 'base.html' %}
{% from 'macros/image.html' import gallery_item %}
{% block head %}
    <meta property="og:image" content="{{ url_for('static', filename='icon.png') }}"/>
    <meta name="twitter:image" content="{{ url_for('static', filename='icon.png') }}"/>
    <meta name="twitter:card" content="summary"/>
{% endblock %}

{% block header %}
    <div class="banner-small">
        <div class="banner-content">
            <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
            {% if not total_images %}
                <p class="banner-info">0 images!</p>
            {% elif total_images == 69 %}
                <p class="banner-info">{{ total_images }} images, nice</p>
            {% else %}
                <p class="banner-info">{{ total_images }} images</p>
            {% endif %}

            {% if pages > 1 %}
                <div class="pill-row">
                    <div>
                        {% if pages > 4 %}
                            <a class="pill-item" href="{{ url_for('gallery.index') }}"><i class="ph ph-caret-double-left"></i></a>
                        {% else %}
                            <button class="pill-item disabled"><i class="ph ph-caret-double-left"></i></button>
                        {% endif %}
                        <a class="pill-item" href="{% if (page - 1) > 1 %} {{ url_for('gallery.index', page=page - 1) }} {% else %} {{ url_for('gallery.index') }} {% endif %}"><i class="ph ph-caret-left"></i></a>
                    </div>
                    <span class="pill-text">{{ page }} / {{ pages }}</span>
                    <div>
                        <a class="pill-item" href="{% if (page + 1) < pages %} {{ url_for('gallery.index', page=page + 1) }} {% else %} {{ url_for('gallery.index', page=pages) }} {% endif %}"><i class="ph ph-caret-right"></i></a>
                        {% if pages > 4 %}
                            <a class="pill-item" href="{{ url_for('gallery.index', page=pages) }}"><i class="ph ph-caret-double-right"></i></a>
                        {% else %}
                            <button class="pill-item disabled"><i class="ph ph-caret-double-right"></i></button>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block nav_home %}selected{% endblock %}
{% block content %}
    {% if images %}
        <div class="gallery-grid">
            {% for image in images %}{{ gallery_item(image) }}{% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            <p>There are no images here yet, upload some!</p>
        </div>
    {% endif %}
{% endblock %}