{% extends 'website/layouts/base.html' %}
{% load static %}

{% block title %}{{ post.meta_title|default:post.title }}{% endblock %}

{% block meta %}
<meta name="description" content="{{ post.meta_description|default:post.excerpt|default:post.content|striptags|truncatechars:160 }}">
{% if post.meta_keywords %}
<meta name="keywords" content="{{ post.meta_keywords }}">
{% endif %}
{% endblock %}

{% block content %}
<!--====== Start Page Hero Section ======-->
<section class="page-hero bg_cover p-r z-1" data-src="{% static 'assets/images/page-bg.jpg' %}" style="background-image: url(&quot;{% static 'assets/images/page-bg.jpg' %}&quot;);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!--=== Page Content ===-->
                <div class="page-content text-center">
                    <h1 class="text-white">Blog Details</h1>
                    <ul class="breadcrumb-nav">
                        <li><a href="{% url 'home' %}">Home</a></li>
                        <li><a href="{% url 'blog_list' %}" class="text-white">/ Blog</a></li>
                        <li class="text-white-50">/ Details</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== End Page Hero Section ======-->

<!--====== Start Blog Details Section ======-->
<section class="orbia-blog-details-sec pt-120 pb-70">
    <div class="container">
        <div class="row">
            <div class="col-xl-8">
                <!--=== Blog Details wrapper ===-->
                <div class="blog-details-wrapper">
                    <!--=== Blog Post Main ===-->
                    <div class="blog-post-main mb-70">
                        <div class="blog-post-item">
                            {% if post.featured_image %}
                            <div class="post-thumbnail mb-4" style="overflow: hidden; border-radius: 8px;">
                                <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" class="img-fluid w-100">
                            </div>
                            {% endif %}
                            
                            <div class="post-content">
                                <div class="post-meta mb-3" style="font-size: 14px; color: #777;">
                                    <span class="me-3"><i class="fa fa-user me-1"></i> By {{ post.author.get_full_name|default:post.author.username }}</span>
                                    <span class="me-3"><i class="fa fa-calendar me-1"></i> {{ post.created_at|date:"M d, Y" }}</span>
                                    <span class="me-3"><i class="fa fa-eye me-1"></i> {{ post.views_count }} Views</span>
                                    <!-- <span class="badge {% if post.status == 'PUBLISHED' %}bg-success{% else %}bg-warning{% endif %}">{{ post.status }}</span> -->
                                </div>
                                
                                {% if request.user.is_staff %}
                                <div class="staff-tools mb-4 py-2 px-3 bg-light rounded d-inline-flex gap-3 align-items-center">
                                    <span class="text-muted fw-semibold" style="font-size: 13px;">Manage Post (Staff Only):</span>
                                    <a href="{% url 'blog_update' post.slug %}" class="btn btn-sm btn-outline-primary px-3" style="border-radius: 6px;"><i class="fa-solid fa-pen me-1"></i>Edit</a>
                                    <a href="{% url 'blog_delete' post.slug %}" class="btn btn-sm btn-outline-danger px-3" style="border-radius: 6px;"><i class="fa-solid fa-trash me-1"></i>Delete</a>
                                </div>
                                {% endif %}
                                
                                <h2 class="title mb-4 text-dark">{{ post.title }}</h2>
                                
                                <div class="post-body text-secondary" style="line-height: 1.8; font-size: 16px;">
                                    {{ post.content|linebreaks }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-4">
                <!--=== Sidebar Widget Area ===-->
                <div class="sidebar-widget-area">
                    <!--=== Sidebar Search Widget ===-->
                    <div class="sidebar-widget sidebar-search-widget mb-30">
                        <div class="widget-content">
                            <form action="{% url 'blog_list' %}" method="get">
                                <div class="form-group position-relative">
                                    <input type="search" class="form-control" placeholder="Search blog posts..." name="q" required style="padding-right: 45px;">
                                    <button class="search-btn border-0 bg-transparent position-absolute" style="right: 15px; top: 50%; transform: translateY(-50%);">
                                        <i class="fa fa-search text-muted"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!--=== Sidebar Recent Posts Widget ===-->
                    {% if recent_posts %}
                    <div class="sidebar-widget sidebar-post-widget mb-40">
                        <h4 class="widget-title mb-3 pb-2 border-bottom">Recent Posts</h4>
                        <div class="widget-content">
                            <ul class="recent-post-list list-unstyled">
                                {% for recent in recent_posts %}
                                <li class="post-thumbnail-content d-flex mb-4 align-items-center">
                                    <div class="flex-shrink-0 me-3" style="width: 80px; height: 60px; overflow: hidden; border-radius: 4px;">
                                        {% if recent.featured_image %}
                                        <img src="{{ recent.featured_image.url }}" alt="{{ recent.title }}" style="width: 100%; height: 100%; object-fit: cover;">
                                        {% else %}
                                        <img src="{% static 'assets/images/innerpage/blog/blog-grid-img1.jpg' %}" alt="{{ recent.title }}" style="width: 100%; height: 100%; object-fit: cover;">
                                        {% endif %}
                                    </div>
                                    <div class="post-title-date">
                                        <span class="posted-on text-muted" style="font-size: 12px;">{{ recent.created_at|date:"M d, Y" }}</span>
                                        <h6 class="mb-0" style="font-size: 14px; line-height: 1.4;">
                                            <a href="{% url 'blog_detail' recent.slug %}" class="text-dark hover-primary">{{ recent.title }}</a>
                                        </h6>
                                    </div>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== End Blog Details Section ======-->
{% endblock %}