{% extends '_base.html' %}
{% load static %}

{% block PAGE_TITLE %}{% if current_floor == 'fresh' %}Incubator of the Unconscious{% elif current_floor == 'curated' %}Approved by Brain Slug{% elif current_floor == 'top' %}Hall of Fame{% else %}Trance Gallery — Animated SVG Catalog{% endif %}{% if page_obj.number > 1 %} (Phase {{ page_obj.number }}){% endif %} | HypnoSVG{% endblock %}

{% block META_TITLE %}{% if current_floor == 'fresh' %}Incubator of the Unconscious — Fresh SVG Artworks{% elif current_floor == 'curated' %}Approved by Brain Slug — Curated SVG Halftones{% elif current_floor == 'top' %}Hall of Fame — Immortal SVG Matrices{% else %}Trance Gallery — Catalog of Animated SVG Artworks{% endif %}{% if page_obj.number > 1 %} (Phase {{ page_obj.number }}){% endif %} | HypnoSVG{% endblock %}

{% block META_DESCRIPTION %}{% if current_floor == 'fresh' %}Fresh candidates for the HypnoSVG Trance Gallery: new psychedelic generations and vector matrices.{% elif current_floor == 'curated' %}Curated selection of animated SVG halftones approved by the hivemind.{% elif current_floor == 'top' %}Hall of Fame: immortal vector matrices and digital trance masterpieces by HypnoSVG.{% else %}Complete catalog and archive of animated SVG halftones and psychedelic artworks by HypnoSVG.{% endif %}{% if page_obj.number > 1 %} Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.{% endif %}{% endblock %}

{% block OG_TITLE %}{% if current_floor == 'fresh' %}Incubator of the Unconscious{% elif current_floor == 'curated' %}Approved by Brain Slug{% elif current_floor == 'top' %}Hall of Fame{% else %}Trance Gallery{% endif %}{% if page_obj.number > 1 %} (Phase {{ page_obj.number }}){% endif %} | HypnoSVG{% endblock %}

{% block OG_DESCRIPTION %}{% if current_floor == 'fresh' %}Fresh candidates for the HypnoSVG Trance Gallery: new psychedelic generations.{% elif current_floor == 'curated' %}Curated selection of animated SVG halftones approved by the hivemind.{% elif current_floor == 'top' %}Hall of Fame: immortal vector matrices and digital trance masterpieces by HypnoSVG.{% else %}Complete catalog and archive of animated SVG halftones and psychedelic artworks by HypnoSVG.{% endif %}{% endblock %}

{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ request.path }}{% if current_floor != 'all' or page_obj.number > 1 %}?{% if current_floor != 'all' %}floor={{ current_floor }}{% endif %}{% if current_floor != 'all' and page_obj.number > 1 %}&{% endif %}{% if page_obj.number > 1 %}page={{ page_obj.number }}{% endif %}{% endif %}{% endblock %}

{% block EXTRA_HEAD %}
  {% if page_obj.has_previous %}
    <link rel="prev" href="{{ request.path }}?floor={{ current_floor }}&sort={{ current_sort }}&page={{ page_obj.previous_page_number }}" />
  {% endif %}
  {% if page_obj.has_next %}
    <link rel="next" href="{{ request.path }}?floor={{ current_floor }}&sort={{ current_sort }}&page={{ page_obj.next_page_number }}" />
  {% endif %}
{% endblock EXTRA_HEAD %}

{% block CONTENT %}
<div class="mx-auto space-y-8">

  <!-- Хлебные крошки и навигация -->
  <div class="flex flex-wrap items-center justify-between gap-4">
    <a href="{% url 'hypn0_site:index' %}" class="archive-back">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
      </svg>
      <span>Generator</span>
    </a>

    <span class="archive-phase">
      Phase {{ page_obj.number }} of&nbsp;{{ page_obj.paginator.num_pages }} (Total:&nbsp;{{ page_obj.paginator.count }})
    </span>
  </div>

  <!-- Шапка архива -->
  <div class="archive-header">
    <div class="flex flex-wrap items-center gap-3">
      <h1 class="archive-title">
        Trance Gallery
      </h1>
      <span class="archive-badge">
        ARCHIVE
      </span>
    </div>
    <p class="archive-desc">
      Complete archive of&nbsp;psychedelic generations • Sorted by&nbsp;gravity, acclaim, and&nbsp;freshness
    </p>
  </div>

  <!-- Панель фильтров (Табы этажей + Селект сортировки) -->
  <div class="archive-filter-bar">
    
    <!-- ТАБЫ ЭТАЖЕЙ -->
    <div class="flex flex-wrap items-center gap-1.5 sm:gap-2">
      <!-- Все волны -->
      <a href="?floor=all&sort={{ current_sort }}"
         class="archive-tab {% if current_floor == 'all' %}archive-tab-all-active{% else %}archive-tab-all-idle{% endif %}">
        <span>All waves</span>
        <span class="font-mono text-[10px] opacity-75">({{ counts.all }})</span>
      </a>

      <!-- 1-й этаж: Инкубатор -->
      <a href="?floor=fresh&sort={{ current_sort }}"
         class="archive-tab {% if current_floor == 'fresh' %}archive-tab-fresh-active{% else %}archive-tab-fresh-idle{% endif %}">
        <span class="w-2 h-2 rounded-full bg-amber-400"></span>
        <span>Incubator</span>
        <span class="font-mono text-[10px] opacity-75">({{ counts.fresh }})</span>
      </a>

      <!-- 2-й этаж: Одобрено -->
      <a href="?floor=curated&sort={{ current_sort }}"
         class="archive-tab {% if current_floor == 'curated' %}archive-tab-curated-active{% else %}archive-tab-curated-idle{% endif %}">
        <span class="w-2 h-2 rounded-full bg-cyan-400"></span>
        <span>Approved</span>
        <span class="font-mono text-[10px] opacity-75">({{ counts.curated }})</span>
      </a>

      <!-- 3-й этаж: Золотой фонд -->
      <a href="?floor=top&sort={{ current_sort }}"
         class="archive-tab {% if current_floor == 'top' %}archive-tab-top-active{% else %}archive-tab-top-idle{% endif %}">
        <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
        <span>Hall of&nbsp;Fame</span>
        <span class="font-mono text-[10px] opacity-75">({{ counts.top }})</span>
      </a>
    </div>

    <!-- СЕЛЕКТ СОРТИРОВКИ -->
    <div class="archive-sort-wrap">
      <label for="gallery-sort-select" class="archive-sort-label">
        Order:
      </label>
      <select id="gallery-sort-select"
              onchange="window.location.href=this.value"
              class="archive-sort-select">
        {% for opt in sort_options %}
          <option value="?floor={{ current_floor }}&sort={{ opt.id }}" {% if current_sort == opt.id %}selected{% endif %}>
            {{ opt.icon }} {{ opt.title }}
          </option>
        {% endfor %}
      </select>
    </div>

  </div>

  <!-- Сетка картин (16 штук на страницу) -->
  <div class="gallery-grid">{% for item in page_obj %}
    {% include "block/gallery_card.html" %}
      {% empty %}<div class="archive-empty">
        <svg class="archive-empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
        </svg>
        <p class="archive-empty-text">No artworks in&nbsp;this&nbsp;selection yet. Synthesize a&nbsp;masterpiece right now!</p>
      </div>
    {% endfor %}
  </div>

  <!-- Пагинация (Предыдущая фаза / Номера страниц / Следующая фаза) -->
  {% if page_obj.has_other_pages %}
    <div class="paginator">
      <div>
        {% if page_obj.has_previous %}
          <a href="?floor={{ current_floor }}&sort={{ current_sort }}&page={{ page_obj.previous_page_number }}"
             rel="prev"
             class="paginator-btn paginator-btn-prev">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            <span>Previous phase</span>
          </a>
        {% else %}
          <span class="paginator-btn paginator-btn-disabled">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            <span>Previous phase</span>
          </span>
        {% endif %}
      </div>

      <!-- Номера страниц -->
      <div class="paginator-pages">
        {% for p in page_obj.paginator.page_range %}
          {% if p == page_obj.number %}
            <span class="paginator-page-active">
              {{ p }}
            </span>
          {% else %}
            <a href="?floor={{ current_floor }}&sort={{ current_sort }}&page={{ p }}"
               class="paginator-page-link">
              {{ p }}
            </a>
          {% endif %}
        {% endfor %}
      </div>

      <div>
        {% if page_obj.has_next %}
          <a href="?floor={{ current_floor }}&sort={{ current_sort }}&page={{ page_obj.next_page_number }}"
             rel="next"
             class="paginator-btn paginator-btn-next">
            <span>Next phase</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </a>
        {% else %}
          <span class="paginator-btn paginator-btn-disabled">
            <span>Next phase</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </span>
        {% endif %}
      </div>
    </div>
  {% endif %}

</div>
{% endblock CONTENT %}