{% extends "components/base.html" %}
{% load static %}
{% load safe_html %}
{% block title %}{{ post.title }}{% endblock %}

{% block content %}

    <main class="main">

        <!-- Page Title -->
        <div class="page-title">
            <div class="heading">
                <div class="container">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-lg-8">
                            <h1>{{ post.title }}</h1>
                            <p class="text-muted mb-0">
                                {% if post.author.get_full_name %}{{ post.author.get_full_name }}
                                    / {% endif %}{{ post.published_at|date:"d M Y, h:i A" }} / {{ post.category.name }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End Page Title -->

        <!-- Blog Post Content Section -->
        <section id="blog-detail" class="pt-0 blog-detail section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">

                        <div class="post-item position-relative h-100" data-aos="fade-up">

                            {% if post.image %}
                                <div class="post-img mb-4">
                                    <img src="{{ post.image.url }}" alt="{{ post.title }}" class="img-fluid rounded">
                                </div>
                            {% endif %}

                            <div class="post-content">
                                {{ post.content|safe_html|linebreaks }}
                            </div>

                            <hr>

                            <div class="post-meta d-flex justify-content-between mt-3">
                                {% if post.author.get_full_name %}<div class="d-flex align-items-center">
                                    <i class="bi bi-person me-2"></i> {{ post.author.get_full_name }}
                                </div>{% endif %}
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-folder2 me-2"></i> {{ post.category.name }}
                                </div>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-calendar me-2"></i> {{ post.published_at|date:"d M Y" }}
                                </div>
                            </div>

                        </div>

                        <!-- Back to Blog List -->
                        <div class="text-center">
                            <a href="{% url 'blog:post_list' %}" class="btn btn-outline-primary">
                                <i class="bi bi-arrow-left"></i> Volver al Blog
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </section><!-- End Blog Post Content Section -->

    </main>

{% endblock %}