{% extends "base.html" %}

{% block content %}
<div class="max-w-4xl mx-auto">
  <!-- Header -->
  <header class="text-center py-12 border-b border-gray-200 dark:border-gray-700 mb-12">
    <h1 class="text-4xl font-bold mb-6 text-gray-900 dark:text-white">{{ site.config.title }}</h1>

    {% if home %}
    <div class="text-gray-500 dark:text-gray-400 leading-relaxed max-w-2xl mx-auto mb-6 [&>p]:mb-3">
      {{ home.content | safe }}
    </div>
    {% endif %}

    <div class="flex justify-center gap-6">
      {% set github_url = site.config.extra.github | default(value="") %}
      {% if github_url %}
      <a href="{{ github_url }}" target="_blank" rel="noopener" class="text-emerald-600 dark:text-emerald-400 font-medium hover:underline">GitHub</a>
      {% endif %}
      {% set docs_url = site.config.extra.docs | default(value="") %}
      {% if docs_url %}
      <a href="{{ docs_url }}" target="_blank" rel="noopener" class="text-emerald-600 dark:text-emerald-400 font-medium hover:underline">Documentation</a>
      {% endif %}
    </div>
  </header>

  <!-- Releases -->
  {% if site.collections.releases %}
  <div class="space-y-12">
    {% for item in site.collections.releases.items %}
    <article class="border-b border-gray-200 dark:border-gray-700 pb-12 last:border-b-0" id="{{ item.slug }}">
      <header class="flex flex-wrap justify-between items-start gap-4 mb-6">
        <div class="flex items-center gap-4 flex-wrap">
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
            <a href="#{{ item.slug }}" class="hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors">{{ item.title }}</a>
          </h2>
          {% if item.frontmatter.extra.breaking %}
          <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider bg-red-100 dark:bg-red-500/20 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-500/30">
            Breaking Changes
          </span>
          {% endif %}
        </div>
        {% if item.frontmatter.date %}
        <time class="text-gray-500 dark:text-gray-400 text-sm">{{ item.frontmatter.date }}</time>
        {% endif %}
      </header>

      <div class="prose prose-lg dark:prose-invert max-w-none
        prose-headings:text-gray-900 dark:prose-headings:text-white
        prose-h2:text-xl prose-h2:text-emerald-600 dark:prose-h2:text-emerald-400 prose-h2:mt-8 prose-h2:mb-4 prose-h2:first:mt-0
        prose-h3:text-lg prose-h3:mt-6 prose-h3:mb-3
        prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-p:leading-relaxed
        prose-ul:my-4 prose-ul:pl-6
        prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-li:mb-2 prose-li:marker:text-gray-400 dark:prose-li:marker:text-gray-500
        prose-ol:text-gray-600 dark:prose-ol:text-gray-300
        prose-a:text-emerald-600 dark:prose-a:text-emerald-400 prose-a:no-underline hover:prose-a:underline
        prose-code:bg-gray-100 dark:prose-code:bg-white/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-code:text-pink-600 dark:prose-code:text-pink-400
        prose-pre:my-6 prose-pre:rounded-lg prose-pre:bg-gray-900 dark:prose-pre:bg-gray-950 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700">
        {{ item.content | safe }}
      </div>
    </article>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endblock %}