{% extends "base.html" %}
{% block title %}{{ folder['title'] }}{% endblock %}

{% block content %}
<style>
  .gallery-header{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px;}
  .gallery-header a{display:inline-block; padding:10px 14px; border:1px solid currentColor; border-radius:12px; 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;">{{ folder['title'] }}</h2>
    <div class="muted">Фото в этой папке по дате</div>
  </div>

  <div style="margin-left:auto; display:flex; gap:10px; flex-wrap:wrap;">
    <a href="{{ url_for('gallery_feed') }}">← Вся галерея</a>
    {% if session.get('role') == 'admin' %}
      <a href="{{ url_for('admin_gallery_folder_access', folder_id=folder['id']) }}">Доступ</a>
      <a href="{{ url_for('admin_gallery_share_post', folder_id=folder['id']) }}">Создать пост</a>
    {% endif %}
  </div>
</div>

{% if photos|length == 0 %}
  <div class="card">
    <p>В этой папке пока нет проиндексированных фото. Администратор может нажать reindex в 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_folder', folder_id=folder['id'], page=page-1) }}">← Назад</a>
    {% else %}
      <span></span>
    {% endif %}

    {% if has_next %}
      <a href="{{ url_for('gallery_folder', folder_id=folder['id'], page=page+1) }}">Вперёд →</a>
    {% else %}
      <span></span>
    {% endif %}
  </div>
{% endif %}

{% endblock %}