{% extends "base.html" %}

{% block  content %}
<h2>Gallery</h2>

<div>
    <b>Sort by</b> {% for sort_by_key, sort_by_name in sort_by_options.items %} | {% if sort_by != sort_by_key %}<a
        href="?sort_by={{ sort_by_key }}">{% else %}<b>{% endif %}{{ sort_by_name }}{% if sort_by != sort_by_key %}</a>{% else %}</b>{% endif %}{% endfor %}
</div>
<div>
    <b>Year</b> | {% for year in years %}{% if selected_year != year %}<a
        href="{% url "list-year" year %}?sort_by={{ sort_by }}">{% endif %}{{ year }}{% if selected_year != year %}</a>{% endif %}{% if not forloop.last %}
    | {% endif %}{% endfor %}
</div>
{% if months %}
<div>
    <b>Month</b> | {% for month in months %}{% if selected_month != month %}<a
        href="{% url "list-year-month" selected_year month %}?sort_by={{ sort_by }}">{% endif %}{{ month }}{% if selected_month != month %}</a>{% endif %}{% if not forloop.last %}
    | {% endif %}{% endfor %}
</div>
{% endif %}

<div class="item-list">
    {% for picture in pictures %}
    <div class="item">
        <div class="container">
            <div class="floaty tag is-black">{{ picture.mimetype }}</div>
            <a href="{% url "detail" picture.id %}#preview">
                <div>{{ picture.creation_date}}</div>
                <img src="{% url "thumbnail" picture.id %}" />
            </a>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}