{% extends group_config.template_base or "base_demo.html" %}

{% block title %}{{ post.title }} - Pulse{% endblock %}

{% block content %}
<main class="container">
    <div style="max-width: 800px; margin: 0 auto;">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb">
            <ul>
                <li><a href="/crumbforest/pulse">📰 Pulse</a></li>
                <li>{{ post.title }}</li>
            </ul>
        </nav>

        <article>
            <header>
                <h1>{{ post.title }}</h1>
                <small>
                    Veröffentlicht am {{ post.created_at.strftime('%d.%m.%Y') }}
                    von <strong>{{ post.author }}</strong>
                </small>
                <div class="tags" style="margin-top: 0.5rem;">
                    {% for t in post.tags %}
                    <span class="badge">#{{ t }}</span>
                    {% endfor %}
                </div>
            </header>

            <!-- Content -->
            <div class="post-content">
                {{ post.html_content | safe }}
            </div>

            <footer>
                <hr>
                <a href="/crumbforest/pulse" role="button" class="secondary outline">
                    ← Zurück zur Übersicht
                </a>
            </footer>
        </article>
    </div>
</main>

<style>
    .tags {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .badge {
        font-size: 0.8em;
        padding: 2px 8px;
        background-color: var(--card-sectionning-background-color);
        border-radius: 99px;
    }

    .post-content {
        line-height: 1.6;
    }

    .post-content h2 {
        margin-top: 2rem;
    }
</style>
{% endblock %}