---
import Base from '../../layouts/Base.astro';
import Sidebar from '../../components/blog/Sidebar.astro';
import { getDb } from '../../lib/db';
import { getPublishedBySlug } from '../../lib/posts';
import { getUsernameById } from '../../lib/auth';
export const prerender = false;

const post = getPublishedBySlug(getDb(), Astro.params.slug!);
if (!post) return new Response(null, { status: 404 });
const fmt = new Intl.DateTimeFormat('it-IT', { dateStyle: 'long' });
const author = post.author_id ? getUsernameById(getDb(), post.author_id) : null;
const byline = author ?? 'Staff InsanityLab';
---
<Base title={post.title} description={post.excerpt}>
  <section class="section">
    <div class="container art">
      <article>
        {post.cover && <img class="art__cover" src={post.cover} alt="" />}
        <p class="art__meta">{post.published_at && fmt.format(new Date(post.published_at))} · {post.category} · di {byline}</p>
        <h1>{post.title}</h1>
        <div class="art__body" set:html={post.body_html} />
      </article>
      <Sidebar />
    </div>
  </section>
</Base>

<style>
  .art { display: grid; grid-template-columns: 2.4fr 1fr; gap: 60px; }
  .art__cover { width: 100%; margin-bottom: 24px; }
  .art__meta { font-size: .8rem; color: var(--c-text-light); }
  .art__body :global(img) { margin-block: 20px; }
  .art__body :global(blockquote) { border-left: 3px solid var(--c-accent); margin: 24px 0; padding: 6px 0 6px 20px; font-style: italic; color: var(--c-heading); }
  @media (max-width: 991px) { .art { grid-template-columns: 1fr; } }
</style>