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

{% block PAGE_TITLE %}{{ post.s_title|striptags }} | Хроники гипноза HypnoSVG{% endblock %}

{% block META_TITLE %}{{ post.s_title|striptags }} — HypnoSVG{% endblock %}

{% block META_DESCRIPTION %}{% if post.s_teaser %}{{ post.s_teaser|striptags|truncatechars:160 }}{% else %}Статья из хроник гипноза HypnoSVG: {{ post.s_title|striptags }}{% endif %}{% endblock %}

{% block OG_TITLE %}{{ post.s_title|striptags }} | HypnoSVG{% endblock %}

{% block OG_DESCRIPTION %}{% if post.s_teaser %}{{ post.s_teaser|striptags|truncatechars:200 }}{% else %}Статья из хроник гипноза HypnoSVG: {{ post.s_title|striptags }}{% endif %}{% endblock %}

{% block OG_IMAGE %}{% if post.f_cover_img %}{{ request.scheme }}://{{ request.get_host }}{{ post.f_cover_img.url }}{% elif post.k_item and post.k_item.file_svg %}{{ request.scheme }}://{{ request.get_host }}{{ post.k_item.file_svg.url }}{% else %}{% static 'img/og-hypn0-default.png' %}{% endif %}{% endblock %}

{% block CANONICAL %}{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}{% endblock %}

{% block EXTRA_LD_JSON %},
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Главная",
          "item": "{{ request.scheme }}://{{ request.get_host }}{% url 'hypn0_site:index' %}"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Хроники гипноза",
          "item": "{{ request.scheme }}://{{ request.get_host }}{% url 'hypn0_site:blog_feed' %}"
        }{% if series_parent %},
        {
          "@type": "ListItem",
          "position": 3,
          "name": "{{ series_parent.s_title|striptags|escapejs }}",
          "item": "{{ request.scheme }}://{{ request.get_host }}{{ series_parent.get_absolute_url }}"
        },
        {
          "@type": "ListItem",
          "position": 4,
          "name": "{{ post.s_title|striptags|escapejs }}",
          "item": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
        }{% else %},
        {
          "@type": "ListItem",
          "position": 3,
          "name": "{{ post.s_title|striptags|escapejs }}",
          "item": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
        }{% endif %}
      ]
    },
    {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "{{ post.s_title|striptags|escapejs }}",
      "description": "{{ post.s_teaser|striptags|escapejs }}",
      "datePublished": "{{ post.d_published_at|date:'c' }}",
      "dateModified": "{{ post.d_updated_at|date:'c' }}",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
      }
    }
{% endblock EXTRA_LD_JSON %}

{% block CONTENT %}
<article class="mx-auto space-y-10">

  <!-- Навигационная полоса / Хлебные крошки -->
  <nav aria-label="Хлебные крошки" class="flex flex-wrap items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-stone-500 dark:text-stone-400">
    <a href="{% url 'hypn0_site:index' %}" class="inline-flex items-center gap-1 " title="Главная">
      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
      </svg>
      <span class="hidden sm:inline">Главная</span>
    </a>

    <span class="text-stone-300 dark:text-zinc-700">/</span>

    <a href="{% url 'hypn0_site:blog_feed' %}">
      {{ post.blog_nav_title }}
    </a>

    {% if series_parent %}
    <span class="text-stone-300 dark:text-zinc-700">/</span>
    <a href="{{ series_parent.get_absolute_url }}" title="{{ series_parent.s_title|striptags }}">
      Глава {{ post.i_order }}{% if series_total_count %} из {{ series_total_count }}{% endif %}
    </a>
    {% endif %}

    <span class="text-stone-300 dark:text-zinc-700">/</span>

    <span class="text-stone-400 dark:text-stone-500 truncate max-w-[180px] sm:max-w-xs md:max-w-sm font-normal" aria-current="page" title="{{ post.s_title|striptags }}">
      {{ post.s_title|safe }}
    </span>
  </nav>

  <!-- Серия: индикатор цикла (если пост является частью серии) -->
  {% if series_parent %}
  <div class="bg-purple-500/10 dark:bg-purple-950/30 border border-purple-500/20 rounded-2xl p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
    <div class="flex items-center gap-3">
      <span class="w-2.5 h-2.5 rounded-full bg-purple-500 animate-pulse shrink-0"></span>
      <div class="text-xs">
        <span class="text-stone-500 dark:text-stone-400">Материал входит в серию:</span>
        <a href="{{ series_parent.get_absolute_url }}" class="font-bold text-purple-700 dark:text-purple-300 hover:underline border-0 ml-1">
          {{ series_parent.s_title|safe }}
        </a>
      </div>
    </div>
    <span class="text-[11px] text-purple-600 dark:text-purple-400 shrink-0">
      Глава {{ post.i_order }}
    </span>
  </div>
  {% endif %}

  <!-- ЕДИНАЯ ДВУХКОЛОНОЧНАЯ СЕТКА: 1/4 слева (превью + SVG), 3/4 справа (заголовок + дата + тизер + контент) -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-x-6 items-start">

    <!-- 1. Верхний ряд слева (1/4): Тизер-превью обложки -->
    <div class="md:col-span-1 w-full pb-8">
      {% if post.f_cover_img %}{# ЕСТЬ ТИЗЕР-КАРТИНКА И ПОКАЗЫВАЕМ ЕË #}
      <div class="aspect-square sm:aspect-[4/3] md:aspect-square rounded-2xl overflow-hidden border border-stone-200 dark:border-zinc-800 shadow-md bg-stone-100 dark:bg-zinc-900">
        <img src="{{ post.f_cover_img.url }}"
             alt="{{ post.s_title|striptags }}"
             class="w-full h-full object-cover">
      </div>
      {% else %}{# НЕТ ТИЗЕР-КАРТИНКИ И ПОКАЗЫВАЕМ ЗАГЛУШКУ #}
      <div class="aspect-square sm:aspect-[4/3] md:aspect-square rounded-2xl border border-dashed border-stone-300 dark:border-zinc-700 bg-stone-100/40 dark:bg-zinc-900/40 flex flex-col items-center justify-center p-3 text-stone-400 dark:text-stone-600 text-center">
        <img src="{% static 'img/brain-slug.svg' %}" alt="Гипножаба" class="w-10 h-10 opacity-40 mb-1">{# <-- СЮДА ДЕФОЛТНУЮ КАРТИНКУ #}
        <span class="text-[10px] uppercase tracking-wider">Тут ничего не нарисовано</span>{# <-- А ПОСЛЕ ЭТО УБРАТЬ #}
      </div>
      {% endif %}
    </div>

    <!-- 1. Верхний ряд справа (3/4): Заголовок + Дата + Тизер с непрерывной пунктирной линией -->
    <div class="md:col-span-3 border-l-1 border-purple-500 border-dotted pl-6 pb-8 space-y-4">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-stone-900 dark:text-stone-100 leading-tight">
        {{ post.s_title|safe }}
      </h1>

      <!-- Дата и время публикации статьи в рамочке с иконкой часов -->
      <div class="flex items-center justify-start">
        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-500/10 text-purple-700 dark:text-purple-300 border border-purple-500/20 font-bold text-sm">
          <svg class="w-3.5 h-3.5 text-purple-700 dark:text-purple-300 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <time datetime="{{ post.d_published_at|date:'c' }}">
            {{ post.d_published_at|date:'d E 30y, H:i:s' }}
          </time>
        </div>
      </div>

      <!-- Лид / Тизер статьи -->
      {% if post.s_teaser %}
      <div class="text-base sm:text-lg text-stone-600 dark:text-stone-300 leading-relaxed font-sans p-4 sm:p-5 bg-stone-100 dark:bg-zinc-900 border border-stone-200 dark:border-zinc-800 rounded-2xl">
        {{ post.s_teaser|safe }}
      </div>
      {% endif %}
    </div>

    <!-- 2. Нижний ряд слева (1/4): Связанный SVG + Музейная экспликация (выровнены по вертикали с первой строкой контента) -->
    <div class="md:col-span-1 space-y-4">
      {% if post.k_item %}
      <aside class="space-y-3 md:sticky md:top-6">
        <!-- Интерактивное SVG-полотно экспоната -->
        <div class="aspect-square rounded-2xl overflow-hidden bg-stone-950 shadow-md flex items-center justify-center p-2 select-none hypn0-detail-canvas [&>svg]:w-full [&>svg]:h-full [&>svg]:max-w-full [&>svg]:max-h-full [&>svg]:object-contain">
          {% if active_svg %}
            <div class="w-full h-full flex items-center justify-center pointer-events-auto">
              <template shadowrootmode="open">
                <style>
                  :host {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    align-items: center;
                    justify-content: center;
                    pointer-events: auto;
                  }
                  svg {
                    width: 100%;
                    height: 100%;
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                    display: block;
                    --hypn0-play: running !important;
                  }
                </style>
                {{ active_svg|safe }}
              </template>
            </div>
          {% elif post.k_item.file_svg %}
            <img src="{{ post.k_item.file_svg.url }}" alt="{{ post.k_item.s_title }}" class="max-w-full max-h-full object-contain">
          {% endif %}
        </div>

        <!-- Музейная экспликация (Табличка с описанием экспоната) -->
        <div class="bg-stone-100/80 dark:bg-zinc-900/80 border border-stone-200/80 dark:border-zinc-800 rounded-2xl p-3.5 space-y-2.5 text-xs shadow-sm">
          <div class="text-right">
            <div class="font-bold text-stone-900 dark:text-stone-100 text-sm leading-snug">
              {{ post.k_item.s_title|safe }}
            </div>
            <div class="flex items-center justify-end gap-1.5 my-2.5">
              <a href="{% url 'hypn0_site:gallery_detail' post.k_item.s_hash_id %}"
                 class="text-[10px]"
                 title="Открыть картину в галерее">#{{ post.k_item.s_hash_id }}</a>
            </div>
            <div class="flex items-center justify-end gap-1.5 mt-1.5">
              <span class="text-[10px] px-2 py-0.5 rounded-full bg-purple-500/10 text-purple-700 dark:text-purple-300 border border-purple-500/20 font-bold">
                {{ post.k_item.get_i_level_display }}
              </span>
            </div>
          </div>

          <div class="border-t border-stone-200/60 dark:border-zinc-800 pt-2 space-y-1.5 text-[11px] text-stone-600 dark:text-stone-400">
            {% if svg_stats.total_oscillators %}
            <div class="flex justify-between items-center">
              <span class="opacity-70">Осцилляций:</span>
              <span class="font-bold text-stone-900 dark:text-stone-200">{{ svg_stats.total_oscillators }}</span>
            </div>
            {% endif %}
            {% if svg_stats.viewbox %}
            <div class="flex justify-between items-center">
              <span class="opacity-70">viewBox:</span>
              <span class="font-mono text-purple-600 dark:text-purple-400">{{ svg_stats.viewbox }}</span>
            </div>
            {% endif %}
            {% if svg_stats.total_kb %}
            <div class="flex justify-between items-center">
              <span class="opacity-70">Вес:</span>
              <span class="font-mono text-stone-900 dark:text-stone-200">{{ svg_stats.total_kb }} Кб</span>
            </div>
            {% endif %}
            <div class="flex justify-between items-center">
              <span><svg class="w-3.5 h-3.5 text-emerald-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg></span>
              <span class="inline-flex items-center gap-1 font-bold text-stone-900 dark:text-stone-200">
                {{ post.k_item.i_views_count }}
              </span>
            </div>
            <div class="flex justify-between items-center">
              <span><svg class="w-3.5 h-3.5 fill-rose-500 text-rose-500 shrink-0" viewBox="0 0 24 24" stroke="currentColor"  fill="none" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                </svg></span>
              <span class="inline-flex items-center gap-1 font-bold text-stone-900 dark:text-stone-200">
                {{ post.k_item.i_likes_count }}
              </span>
            </div>
          </div>

          <!-- Действия с экспонатом -->
          <div class="border-t border-stone-200/60 dark:border-zinc-800 pt-2 flex flex-col gap-1.5">
            <a href="{% url 'hypn0_site:gallery_download' post.k_item.s_hash_id %}"
               class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold bg-stone-200/70 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 transition-all border border-stone-300/50 dark:border-zinc-700/50 border-0 text-center">
              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
              </svg>
              <span>Скачать SVG</span>
            </a>
          </div>
        </div>
      </aside>
      {% endif %}
    </div>

    <!-- 2. Нижний ряд справа (3/4): Текстовый блок статьи -->
    <div class="md:col-span-3 border-l-1 border-purple-500 border-dotted pl-6">
      <div class="prose max-w-none font-sans text-base sm:text-lg">
        {{ post.s_content|safe }}
      </div>
    </div>

  </div>

  <!-- РАЗДЕЛ СЕРИИ: список глав (если статья является родительской подборкой/серией) -->
  {% if series_posts and not series_parent %}
  <section class="space-y-4 pt-8 border-t border-stone-200 dark:border-zinc-800">
    <div class="flex items-center gap-3">
      <div class="w-3 h-3 rounded-full bg-purple-500"></div>
      <h2 class="text-xl font-bold uppercase tracking-wider text-stone-900 dark:text-stone-100">
        Материалы и главы этого цикла
      </h2>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      {% for child in series_posts %}
      <div class="bg-stone-100/70 dark:bg-zinc-900/70 rounded-2xl border border-stone-200 dark:border-zinc-800 p-4 space-y-2 hover:border-purple-400 dark:hover:border-purple-600 transition-colors">
        <div class="flex items-center justify-between text-[11px] text-stone-400">
          <span class="font-bold text-purple-600 dark:text-purple-400">Глава {{ child.i_order }}</span>
          <time datetime="{{ child.d_published_at|date:'c' }}">{{ child.d_published_at|date:'d E Y' }}</time>
        </div>
        <h3 class="font-bold text-sm text-stone-900 dark:text-stone-100">
          <a href="{{ child.get_absolute_url }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors border-0">
            {{ child.s_title|safe }}
          </a>
        </h3>
        {% if child.s_teaser %}
        <p class="text-xs text-stone-600 dark:text-stone-400 line-clamp-2">
          {{ child.s_teaser|striptags }}
        </p>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <!-- НАВИГАЦИЯ ВПЕРЕД / НАЗАД -->
  <footer class="pt-8 border-t border-stone-200 dark:border-zinc-800 space-y-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      
      <!-- Предыдущая статья -->
      {% if prev_post %}
      <a href="{{ prev_post.get_absolute_url }}"
         class="group flex flex-col p-5 rounded-2xl bg-stone-100/70 dark:bg-zinc-900/70 border border-stone-200 dark:border-zinc-800 hover:border-purple-400 dark:hover:border-purple-600 transition-all shadow-sm border-0">
        <span class="text-xs text-stone-400 dark:text-stone-500 mb-1 inline-flex items-center gap-1 group-hover:text-purple-600 transition-colors">
          <svg class="w-3.5 h-3.5 transition-transform group-hover:-translate-x-1" 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>
          {% if series_parent %}Предыдущая глава цикла{% else %}Предыдущая депеша{% endif %}
        </span>
        <span class="font-bold text-sm text-stone-900 dark:text-stone-100 line-clamp-2">
          {{ prev_post.s_title|safe }}
        </span>
      </a>
      {% else %}
      <div class="p-5 rounded-2xl bg-stone-100/30 dark:bg-zinc-900/30 border border-stone-200/40 dark:border-zinc-800/40 opacity-40">
        <span class="text-xs text-stone-400 block mb-1">
          {% if series_parent %}Первая глава цикла{% else %}Начало хроник гипноза{% endif %}
        </span>
        <span class="font-bold text-sm text-stone-500 dark:text-stone-400">
          Нет предшествующих записей
        </span>
      </div>
      {% endif %}

      <!-- Следующая статья -->
      {% if next_post %}
      <a href="{{ next_post.get_absolute_url }}"
         class="group flex flex-col items-end text-right p-5 rounded-2xl bg-stone-100/70 dark:bg-zinc-900/70 border border-stone-200 dark:border-zinc-800 hover:border-purple-400 dark:hover:border-purple-600 transition-all shadow-sm border-0">
        <span class="text-xs text-stone-400 dark:text-stone-500 mb-1 inline-flex items-center gap-1 group-hover:text-purple-600 transition-colors">
          {% if series_parent %}Следующая глава цикла{% else %}Следующая депеша{% endif %}
          <svg class="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" 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>
        <span class="font-bold text-sm text-stone-900 dark:text-stone-100 line-clamp-2">
          {{ next_post.s_title|safe }}
        </span>
      </a>
      {% else %}
      <div class="flex flex-col items-end text-right p-5 rounded-2xl bg-stone-100/30 dark:bg-zinc-900/30 border border-stone-200/40 dark:border-zinc-800/40 opacity-40">
        <span class="text-xs text-stone-400 block mb-1">
          {% if series_parent %}Финальная глава цикла{% else %}Край ноосферы{% endif %}
        </span>
        <span class="font-bold text-sm text-stone-500 dark:text-stone-400">
          Свежие депеши еще материализуются
        </span>
      </div>
      {% endif %}

    </div>

    <!-- Центральная кнопка возврата в блог -->
    <div class="text-center pt-2">
      <a href="{% url 'hypn0_site:blog_feed' %}"
         class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider bg-stone-100 hover:bg-stone-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-stone-700 dark:text-stone-300 transition-all border border-stone-200 dark:border-zinc-700 border-0">
        <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="M4 6h16M4 10h16M4 14h16M4 18h16"/>
        </svg>
        <span>Все статьи в хрониках</span>
      </a>
    </div>
  </footer>

</article>
{% endblock CONTENT %}