{% extends "base.html" %}
{% block title %}gallery{% endblock %}

{% block content %}
<style>
  .gallery-header{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px;}
  .folder-chips{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{display:inline-block; padding:8px 12px; border:1px solid currentColor; border-radius:999px; text-decoration:none;}
  .masonry{columns:5 240px; column-gap:16px;}
  .tile{break-inside:avoid; margin:0 0 16px 0;}
  .tile img{width:100%; height:auto; display:block; border-radius:16px;}
  .tile a{display:block; text-decoration:none;}
  .pager{display:flex; justify-content:space-between; gap:12px; margin-top:18px;}
  .pager a{display:inline-block; padding:10px 14px; border:1px solid currentColor; border-radius:12px; text-decoration:none;}
  .muted{opacity:.75;}
</style>

<div class="gallery-header">
  <div>
    <h2 style="margin:0;">Галерея</h2>
    <div class="muted">Все доступные фото по дате</div>
  </div>

  {% if folders and folders|length > 0 %}
  <div class="folder-chips" style="margin-left:auto;">
    {% for f in folders %}
      <a class="chip" href="{{ url_for('gallery_folder', folder_id=f['id']) }}">{{ f['title'] }}</a>
    {% endfor %}
  </div>
  {% endif %}
</div>

{% if photos|length == 0 %}
  <div class="card">
    <p>Пока нет фото для отображения. Администратор должен добавить папки в gallery_admin и проиндексировать их.</p>
  </div>
{% else %}
  <div class="masonry">
    {% for p in photos %}
      <div class="tile">
        <a href="{{ url_for('gallery_original', photo_id=p['id']) }}" title="{{ p['taken_at'] }}" target="_blank" rel="noopener">
          <img src="{{ url_for('gallery_thumb', photo_id=p['id']) }}" alt="">
        </a>
      </div>
    {% endfor %}
  </div>

  <div class="pager">
    {% if page > 1 %}
      <a href="{{ url_for('gallery_feed', page=page-1) }}">← Назад</a>
    {% else %}
      <span></span>
    {% endif %}

    {% if has_next %}
      <a href="{{ url_for('gallery_feed', page=page+1) }}">Вперёд →</a>
    {% else %}
      <span></span>
    {% endif %}
  </div>
{% endif %}
{% endblock %}