{# templates/changelog.html #}
{% extends "base.html" %}
{% block title %}Changelog{% endblock %}

{% block content %}
<div class="mx-auto max-w-6xl px-4 py-6">
  <!-- Header -->
  <div class="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
    <div>
      <h1 class="text-2xl font-semibold tracking-tight">SneakyScope Changelog</h1>
      {% if updated %}
        <p class="text-sm text-gray-400">Last updated: {{ updated }}</p>
      {% endif %}
    </div>
  </div>

  {# Unreleased #}
  {% set ur = changelog.unreleased %}
  {% if ur.features or ur.refactors or ur.fixes %}
    <section class="mb-8 rounded-2xl border border-gray-700 bg-gray-900 p-5">
      <div class="mb-3 flex items-center gap-3">
        <h2 class="text-xl font-semibold">Unreleased</h2>
        <span class="badge badge-warn">WIP</span>
      </div>

      <div class="grid gap-6 md:grid-cols-3">
        {% for title, items, icon in [
          ("✨ Features", ur.features, "✨"),
          ("🛠️ Refactors", ur.refactors, "🛠️"),
          ("🐛 Fixes", ur.fixes, "🐛"),
        ] %}
          <div class="rounded-xl border border-gray-800 bg-gray-950 p-4">
            <h3 class="mb-2 text-sm font-semibold text-gray-200">{{ title }}</h3>
            {% if items and items|length %}
              <ul class="space-y-3">
                {% for it in items %}
                  <li class="rounded-lg border border-gray-800 bg-gray-900 p-3">
                    <div class="mb-1 font-medium">{{ it.title }}</div>
                    {% if it.details %}
                      <ul class="ml-5 list-disc text-sm text-gray-300">
                        {% for d in it.details %}
                          <li>{{ d }}</li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% else %}
              <p class="text-sm text-gray-400">Nothing yet — add upcoming {{ title.split(' ')[1] | lower }} here.</p>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </section>
  {% endif %}

  {# Versions Accordion #}
  <section>
    <div id="changelog-accordion" data-accordion="collapse" class="divide-y rounded-2xl border border-gray-700 bg-gray-900">
      {% for v in changelog.versions %}
        <h2 id="acc-head-{{ loop.index }}">
          <button type="button"
                  class="flex w-full items-center justify-between px-5 py-4 text-left hover:bg-gray-800"
                  data-accordion-target="#acc-body-{{ loop.index }}"
                  aria-expanded="{{ 'true' if loop.first else 'false' }}"
                  aria-controls="acc-body-{{ loop.index }}">
            <span class="flex items-center gap-3">
              <span class="font-semibold">{{ v.version }}</span>
              {% if v.notes and not (v.features or v.refactors or v.fixes) %}
                <span class="badge badge-ok">Notes only</span>
              {% endif %}
            </span>
            <svg class="h-5 w-5 text-gray-300" aria-hidden="true" fill="none" viewBox="0 0 10 6">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
            </svg>
          </button>
        </h2>

        <div id="acc-body-{{ loop.index }}"
             class="{{ '' if loop.first else 'hidden' }}"
             aria-labelledby="acc-head-{{ loop.index }}">
          <div class="space-y-8 px-5 pb-5 pt-1">

            {% if v.notes and v.notes|length %}
              <div>
                <h3 class="mb-2 text-sm font-semibold text-gray-200">Notes</h3>
                <ul class="ml-6 list-disc text-sm text-gray-300">
                  {% for n in v.notes %}
                    <li>{{ n }}</li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}

            {% for section_title, items in [
              ("✨ Features", v.features),
              ("🛠️ Refactors", v.refactors),
              ("🐛 Fixes", v.fixes),
            ] %}
              {% if items and items|length %}
                <div>
                  <h3 class="mb-2 text-sm font-semibold text-gray-200">{{ section_title }}</h3>
                  <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                    {% for it in items %}
                      <article class="rounded-2xl border border-gray-800 bg-gray-950 p-4">
                        <h4 class="mb-1 font-semibold leading-snug">{{ it.title }}</h4>
                        {% if it.details %}
                          <ul class="ml-5 list-disc text-sm text-gray-300">
                            {% for d in it.details %}
                              <li>{{ d }}</li>
                            {% endfor %}
                          </ul>
                        {% endif %}
                      </article>
                    {% endfor %}
                  </div>
                </div>
              {% endif %}
            {% endfor %}

          </div>
        </div>
      {% endfor %}
    </div>
  </section>
</div>
{% endblock %}

{% block scripts %}
{# If you’re not auto-initializing Flowbite elsewhere, ensure its JS is loaded globally. #}
<script>
/* Optional: if you ever render details as HTML snippets, ensure they are trusted or sanitized server-side. */
/* No extra JS needed here if Flowbite handles [data-accordion]. */
</script>
{% endblock %}