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

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <!-- Back Button -->
            <a href="{% url 'blog_list' %}" class="btn btn-light mb-4">
                <i class="fas fa-arrow-left me-1"></i> Back to Blog
            </a>

            <!-- Featured Image -->
            {% if post.featured_image %}
            <div class="mb-4">
                <img src="{{ post.featured_image.url }}" class="img-fluid rounded" alt="{{ post.title }}" style="width: 100%; max-height: 450px; object-fit: cover; border-radius: 12px;">
            </div>
            {% endif %}

            <!-- Category Badge -->
            <span class="badge" style="background: #0e2e63; padding: 6px 14px; font-size: 14px;">
                {{ post.category.name|default:"Uncategorized" }}
            </span>

            <!-- Title -->
            <h1 class="fw-bold mt-3" style="color: #0e2e63;">{{ post.title }}</h1>

            <!-- Meta Info -->
            <div class="d-flex flex-wrap align-items-center gap-3 text-muted small mb-4">
                <span>
                    <i class="fas fa-user me-1"></i> {{ post.author.get_full_name|default:post.author.username }}
                </span>
                <span>
                    <i class="fas fa-calendar-alt me-1"></i> {{ post.created_at|date:"F d, Y" }}
                </span>
                <span>
                    <i class="fas fa-eye me-1"></i> {{ post.views }} views
                </span>
                <span>
                    <i class="fas fa-clock me-1"></i> {{ post.created_at|timesince }} ago
                </span>
            </div>

            <!-- Post Content -->
            <div class="card shadow-sm border-0" style="border-radius: 12px;">
                <div class="card-body" style="font-size: 16px; line-height: 1.8;">
                    {{ post.content|linebreaks }}
                </div>
            </div>

            <!-- Tags -->
            {% if post.tags.all %}
            <div class="mt-4">
                <strong class="text-muted">Tags:</strong>
                {% for tag in post.tags.all %}
                <span class="badge bg-light text-dark me-1" style="padding: 6px 12px; border-radius: 20px;">
                    #{{ tag.name }}
                </span>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Related Posts -->
            {% if related_posts %}
            <div class="mt-5">
                <h4 class="fw-bold" style="color: #0e2e63;">
                    <i class="fas fa-link me-2"></i>Related Posts
                </h4>
                <div class="row g-3 mt-2">
                    {% for related in related_posts %}
                    <div class="col-md-4">
                        <div class="card shadow-sm border-0 h-100" style="border-radius: 12px;">
                            {% if related.featured_image %}
                            <img src="{{ related.featured_image.url }}" class="card-img-top" alt="{{ related.title }}" style="height: 140px; object-fit: cover; border-radius: 12px 12px 0 0;">
                            {% endif %}
                            <div class="card-body">
                                <h6 class="card-title">
                                    <a href="{% url 'blog_detail' related.slug %}" class="text-decoration-none" style="color: #0e2e63;">
                                        {{ related.title }}
                                    </a>
                                </h6>
                                <p class="text-muted small">{{ related.created_at|date:"M d, Y" }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}