{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{# SPDX-FileCopyrightText: 2026 JWP Consulting GK #}
{% extends "blog/blog_base.html" %}
{% load i18n %}
{% load projectify %}
{% block title %}{{ post.title }}{% endblock %}
{% block blog_content %}
    <div class="grid lg:grid-cols-[2fr_1fr] gap-8">
        <article class="min-w-0 flex flex-col gap-8">
            <header class="flex flex-col gap-4">
                <h1 class="text-4xl font-bold">
                    {{ post.title }}
                    {% if post.draft %}
                        {% translate "DRAFT" %}
                    {% endif %}
                </h1>
                <div class="flex flex-col gap-1">
                    <p>{% translate "By" %} {{ post.author }}</p>
                    <time>
                        {{ post.published|date:"F j, Y" }}
                    </time>
                </div>
            </header>
            <div class="prose">{{ post.body.content }}</div>
            <footer>
                {% if request.user.is_staff %}
                    {% anchor href="admin:blog_post_change" object_id=post.pk label="Edit this post" %}
                {% endif %}
                {% anchor href="blog:post_list" label=_("All blog posts") %}
            </footer>
        </article>
        <aside class="sticky top-8 flex flex-col gap-4">
            <h2 class="text-2xl font-bold">{% translate "Recent Posts" %}</h2>
            {% if recent_posts %}
                <ul class="flex flex-col gap-4">
                    {% for post in recent_posts %}
                        <li class="flex flex-col gap-1">
                            {% anchor href="blog:post_detail" label=post.title slug=post.slug %}
                            <time>
                                {{ post.published|date:"F j, Y" }}
                            </time>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>{% translate "No posts yet." %}</p>
            {% endif %}
        </aside>
    </div>
{% endblock blog_content %}