{% extends "base.html" %}

{% block title %}{{ post.title }}{% endblock %}
{% block meta_description %}{{ post.excerpt|default:post.title }}{% endblock %}

{% block content %}
<article class="blog-detail">
  <header class="page-hero blog-detail-hero">
    <div class="page-hero-blobs" aria-hidden="true"><div class="blob blob--1"></div><div class="blob blob--2"></div></div>
    <div class="container blog-detail-header">
      <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol class="breadcrumb-list" role="list">
          <li><a href="{% url 'pages:home' %}">Home</a></li>
          <li aria-hidden="true" class="breadcrumb-sep">›</li>
          <li><a href="{% url 'pages:blog_list' %}">Blog</a></li>
          <li aria-hidden="true" class="breadcrumb-sep">›</li>
          <li aria-current="page">{{ post.title }}</li>
        </ol>
      </nav>
      <p class="blog-meta">{{ post.published_at|date:"F j, Y" }}{% if post.author_name %} · {{ post.author_name }}{% endif %}</p>
      <h1 class="page-hero-title">{{ post.title }}</h1>
      {% if post.excerpt %}<p class="page-hero-subtitle">{{ post.excerpt }}</p>{% endif %}
    </div>
  </header>
  <div class="section">
    <div class="container blog-article-wrap">
      {% if post.cover_image %}<img class="blog-cover" src="{{ post.cover_image.url }}" alt="{{ post.cover_image_alt|default:post.title }}" />{% endif %}
      <div class="blog-article rich-content glass-card">{{ post.rendered_content }}</div>
    </div>
  </div>
</article>
{% endblock %}