{% extends 'base.html' %}
{% load static %}

{% block title %}{{ post.title }}{% endblock %}
{% block meta_description %}{{ post.excerpt }}{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <h1>{{ post.title }}</h1>
        <p>{{ post.published_date|date:"F j, Y" }} &middot; By {{ post.author }}</p>
    </div>
</div>

<section class="content-page">
    <div class="container">
        <div class="grid">
            <div class="medium-8">
                <article class="blog-detail">
                    {% if post.image %}
                    <img src="{{ post.image.url }}" alt="{{ post.title }}" style="width: 100%; border-radius: var(--radius); margin-bottom: 30px;">
                    {% endif %}
                    <div class="blog-content">
                        {{ post.content|linebreaks }}
                    </div>
                </article>

                <div style="margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--color-border);">
                    <a href="{% url 'cms-blog-list' %}" class="btn btn-sm">← Back to Blog</a>
                </div>
            </div>
            <div class="medium-4">
                <div style="background: var(--color-bg-card); padding: 30px; border-radius: var(--radius); border: 1px solid var(--color-border);">
                    <h3>Recent Posts</h3>
                    {% if recent_posts %}
                    <ul>
                        {% for recent in recent_posts %}
                        <li style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--color-border);">
                            <a href="{{ recent.get_absolute_url }}" style="color: var(--color-text);">
                                <strong>{{ recent.title }}</strong>
                            </a>
                            <p style="font-size: 0.85rem; color: var(--color-text-muted); margin-top: 5px;">{{ recent.published_date|date:"F j, Y" }}</p>
                        </li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <p>No recent posts.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}