{% extends "layouts/base.njk" %}

{% block body %}
<article class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
  <p class="text-sm font-medium uppercase tracking-wide text-zinc-500">{{ post.categories | join(", ") }}</p>
  <h1 class="mt-2 font-[Source_Serif_4] text-4xl font-semibold leading-tight text-zinc-900">{{ post.title }}</h1>
  <p class="mt-3 text-zinc-600">{{ post.excerpt }}</p>

  {% if post.featuredImage %}
  <img src="{{ post.featuredImage.url }}" alt="{{ post.featuredImage.alt }}" class="mt-4 w-full rounded-xl border border-zinc-200 object-cover" />
  {% endif %}

  <div class="mt-4 flex flex-wrap gap-2">
    {% for tag in post.tags %}
    <span class="inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-700">#{{ tag }}</span>
    {% endfor %}
  </div>

  <p class="mt-3 text-sm text-zinc-500">Views: {{ post.views }}</p>

  <div class="mt-5 space-y-4 text-zinc-700 [&_a]:text-teal-700 [&_a]:underline [&_blockquote]:border-l-4 [&_blockquote]:border-zinc-300 [&_blockquote]:pl-4 [&_h1]:font-[Source_Serif_4] [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:font-[Source_Serif_4] [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:font-[Source_Serif_4] [&_h3]:text-xl [&_h3]:font-semibold [&_li]:ml-5 [&_li]:list-disc [&_p]:leading-7">
    {{ contentHtml | safe }}
  </div>

  <div hx-post="/blog-posts/public/{{ post.slug }}/view" hx-trigger="load" hx-swap="none"></div>
</article>

<section class="grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
  <div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
    <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
      <h2 class="font-[Source_Serif_4] text-3xl font-semibold text-zinc-900">More from the blog</h2>
      <a class="rounded-lg bg-teal-600 px-4 py-2 text-sm font-semibold text-white no-underline transition hover:bg-teal-700" href="/">Back to Home</a>
    </div>

    {% if relatedPosts and relatedPosts.length > 0 %}
    <div class="grid gap-3 sm:grid-cols-2">
      {% for related in relatedPosts %}
      <article class="rounded-xl border border-zinc-200 bg-zinc-50/60 p-4">
        <div class="mb-2 flex flex-wrap gap-1.5">
          {% for cat in related.categories %}
          <span class="inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-teal-700">{{ cat }}</span>
          {% endfor %}
        </div>
        <h3 class="font-[Source_Serif_4] text-xl font-semibold leading-tight text-zinc-900">
          <a href="/blog/{{ related.slug }}" class="transition hover:text-teal-700">{{ related.title }}</a>
        </h3>
        <p class="mt-2 text-sm text-zinc-600">{{ related.excerpt }}</p>
        <p class="mt-2 text-xs text-zinc-500">{{ related.views }} views</p>
      </article>
      {% endfor %}
    </div>
    {% else %}
    <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
      <p class="text-sm text-zinc-600">No related posts yet. Try exploring tags and categories from the home page.</p>
    </div>
    {% endif %}
  </div>

  <aside class="grid gap-4">
    <section class="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
      <h3 class="font-[Source_Serif_4] text-2xl font-semibold text-zinc-900">Popular Posts</h3>
      <div class="mt-3 grid gap-2">
        {% for item in popularPosts %}
        <a href="/blog/{{ item.slug }}" class="flex items-center justify-between rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm font-medium text-zinc-700 no-underline transition hover:border-teal-500 hover:text-teal-700">
          <span>{{ item.title }}</span>
          <strong class="text-zinc-500">{{ item.views }}</strong>
        </a>
        {% endfor %}
      </div>
    </section>

    <section class="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
      <h3 class="font-[Source_Serif_4] text-2xl font-semibold text-zinc-900">Tags</h3>
      <div class="mt-3 flex flex-wrap gap-2">
        {% for tag in topTags %}
        <a class="rounded-full border border-teal-200 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-700 no-underline transition hover:border-teal-400 hover:bg-teal-100" href="/?tags={{ tag.name | urlencode }}">#{{ tag.name }}</a>
        {% endfor %}
      </div>
    </section>
  </aside>
</section>
{% endblock %}