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

{% block title %}Blog - Our Latest Insights & Updates{% 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">Our Blog</h1>
                    <ul class="breadcrumb-nav">
                        <li><a href="{% url 'home' %}">Home</a></li>
                        <li class="text-white">/ Blog</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--====== End Page Hero Section ======-->

<!--====== Start Blog Section ======-->
<section class="orbia-blog-grid-sec pt-120 pb-120">
    <div class="container">
        {% if request.user.is_staff %}
        <div class="row mb-5">
            <div class="col-12 text-end">
                <a href="{% url 'blog_create' %}" class="theme-btn gradient-btn" ><i class="fa-solid fa-plus me-2"></i>Create New Blog Post</a>
            </div>
        </div>
        {% endif %}
        <!-- Search Info -->
        {% if query %}
        <div class="row mb-4">
            <div class="col-12 d-flex justify-content-between align-items-center">
                <h5>Search results for: "<span class="text-primary">{{ query }}</span>" ({{ total_count }} found)</h5>
                <a href="{% url 'blog_list' %}" class="btn btn-sm btn-outline-secondary">Clear Search</a>
            </div>
        </div>
        {% endif %}

        <div class="row">
            {% for post in page_obj %}
            <div class="col-xl-4 col-md-6 col-sm-12">
                <!-- Blog Post Item -->
                <div class="orbia-blog-post-item style-one mb-40">
                    <div class="post-thumbnail" style="overflow: hidden; height: 240px;">
                        {% if post.featured_image %}
                            <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;">
                        {% else %}
                            <img src="{% static 'assets/images/innerpage/blog/blog-grid-img1.jpg' %}" alt="{{ post.title }}" style="width: 100%; height: 100%; object-fit: cover;">
                        {% endif %}
                    </div>
                    <div class="post-content" style="padding: 25px; border: 1px solid #f0f0f0; border-top: none;">
                        <div class="post-meta mb-2" 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><i class="fa fa-eye me-1"></i>{{ post.views_count }}</span>
                        </div>
                        <h4 class="title mb-3" style="font-size: 20px; line-height: 1.4;">
                            <a href="{% url 'blog_detail' post.slug %}" class="text-dark hover-primary">{{ post.title }}</a>
                        </h4>
                        {% if post.excerpt %}
                            <p class="mb-4" style="color: #666;">{{ post.excerpt|truncatewords:20 }}</p>
                        {% else %}
                            <p class="mb-4" style="color: #666;">{{ post.content|striptags|truncatewords:20 }}</p>
                        {% endif %}
                        <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
                            <a href="{% url 'blog_detail' post.slug %}" class="read-more style-one text-primary font-weight-bold">
                                Read More <i class="fa fa-arrow-right ms-1"></i>
                            </a>
                            {% if request.user.is_staff %}
                            <div class="d-flex gap-2">
                                <a href="{% url 'blog_update' post.slug %}" class="btn btn-sm btn-outline-secondary py-1 px-2" style="font-size: 12px; border-radius: 6px;" title="Edit Post"><i class="fa-solid fa-pen"></i></a>
                                <a href="{% url 'blog_delete' post.slug %}" class="btn btn-sm btn-outline-danger py-1 px-2" style="font-size: 12px; border-radius: 6px;" title="Delete Post"><i class="fa-solid fa-trash"></i></a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <h3>No blog posts found.</h3>
                <p class="text-muted">Check back later or try a different search query!</p>
                {% if query %}
                    <a href="{% url 'blog_list' %}" class="btn btn-primary mt-3">Reset Search</a>
                {% endif %}
            </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <div class="row">
            <div class="col-lg-12">
                <div class="theme-pagination text-center mt-30">
                    <ul class="d-inline-flex list-unstyled align-items-center justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="mx-1">
                                <a href="?page={{ page_obj.previous_page_number }}{% if query %}&q={{ query }}{% endif %}" class="btn btn-outline-primary" style="padding: 10px 15px;">
                                    <i class="fas fa-arrow-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="mx-1">
                                    <span class="btn btn-primary active" style="padding: 10px 18px;">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="mx-1">
                                    <a href="?page={{ num }}{% if query %}&q={{ query }}{% endif %}" class="btn btn-outline-primary" style="padding: 10px 18px;">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="mx-1">
                                <a href="?page={{ page_obj.next_page_number }}{% if query %}&q={{ query }}{% endif %}" class="btn btn-outline-primary" style="padding: 10px 15px;">
                                    <i class="fas fa-arrow-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</section>
<!--====== End Blog Section ======-->
{% endblock %}