{% extends 'shop/base.html' %}
{% block title %}Blog - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- 📢 Blog Header -->
    <div class="text-center mb-4">
        <h1 class="fw-bold display-5 blog-title">
            <i class="fas fa-blog text-success"></i> Our Blogs
        </h1>
        <p class="blog-subtext">Stay updated with the latest news, tips, and insights.</p>
    </div>

    <div class="row">
        <!-- 🎯 Blog Posts Section -->
        <div class="col-lg-8">
            <!-- 🔍 Search -->
            <form method="GET" class="d-flex mb-4 search-container">
                <input type="text" name="search" class="form-control search-input" placeholder="Search by title..." value="{{ request.GET.search }}">
                <button type="submit" class="btn btn-success search-btn"><i class="fas fa-search"></i></button>
            </form>

            {% for post in blog_posts %}
            <div class="card mb-4 shadow-sm blog-card">
                {% if post.image %}
                    <img src="{{ post.image.url }}" class="card-img-top blog-img" alt="{{ post.title }}">
                {% endif %}
                <div class="card-body">
                    <h5 class="fw-bold blog-post-title">{{ post.title }}</h5>
                    <p class="text-muted small"><i class="fas fa-calendar-alt"></i> {{ post.created_at|date:"F d, Y" }}</p>
                    <p class="blog-text">{{ post.content|truncatewords:30 }}</p>
                    <a href="{% url 'blog_detail' post.id %}" class="btn btn-outline-success btn-sm">
                        <i class="fas fa-book-open"></i> Read More
                    </a>
                </div>
            </div>
            {% empty %}
            <div class="alert alert-info text-center">
                <h5>No posts found! 📢</h5>
                <p>Try searching for something else.</p>
            </div>
            {% endfor %}

            <!-- 📌 Pagination -->
            <nav aria-label="Blog Pagination">
                <ul class="pagination justify-content-center mt-4">
                    {% if blog_posts.has_previous %}
                        <li class="page-item"><a class="page-link" href="?page=1">« First</a></li>
                        <li class="page-item"><a class="page-link" href="?page={{ blog_posts.previous_page_number }}">‹ Prev</a></li>
                    {% endif %}
                    <li class="page-item active"><a class="page-link" href="#">{{ blog_posts.number }}</a></li>
                    {% if blog_posts.has_next %}
                        <li class="page-item"><a class="page-link" href="?page={{ blog_posts.next_page_number }}">Next ›</a></li>
                        <li class="page-item"><a class="page-link" href="?page={{ blog_posts.paginator.num_pages }}">Last »</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>

        <!-- 📌 Sidebar (Recent Posts & Categories) -->
        <div class="col-lg-4">
            <!-- 🆕 Recent Posts -->
            <div class="card mb-4 shadow-sm blog-sidebar">
                <div class="card-header bg-success text-white fw-bold">
                    <i class="fas fa-clock"></i> Recent Posts
                </div>
                <div class="card-body">
                    {% for recent in recent_posts %}
                    <p><a href="{% url 'blog_detail' recent.id %}" class="recent-post-link">{{ recent.title }}</a></p>
                    {% empty %}
                    <p class="text-muted">No recent posts.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 🎨 Blog Page Styling -->
<style>
/* ✅ Blog Header */
.blog-title {
    color: #148818;
}

.blog-subtext {
    color: #148818;
}

/* ✅ Dark Mode Adjustments */
.dark-mode .blog-title {
    color: #00e676;
}

.dark-mode .blog-subtext {
    color: #00e676;
}

/* ✅ Blog Card */
.blog-card {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

.blog-card:hover {
    transform: scale(1.02);
}

/* ✅ Blog Image */
.blog-img {
    height: 250px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

/* ✅ Blog Post Title */
.blog-post-title {
    color: #148818;
}

.dark-mode .blog-post-title {
    color: #00e676;
}

/* ✅ Blog Text */
.blog-text {
    color: #333;
}

.dark-mode .blog-text {
    color: #ddd;
}

/* ✅ Sidebar */
.blog-sidebar {
    background-color: #f8f9fa;
    border-radius: 12px;
}

.dark-mode .blog-sidebar {
    background-color: #333;
    color: white;
}

/* ✅ Recent Post Links */
.recent-post-link {
    color: #148818;
    transition: all 0.3s ease-in-out;
}

.recent-post-link:hover {
    text-decoration: underline;
}

.dark-mode .recent-post-link {
    color: #00e676;
}

/* ✅ Search Bar & Button */
.search-container {
    display: flex;
    gap: 8px;
}

.search-input {
    border: 2px solid #148818;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    color: black;
}

.search-input::placeholder {
    color: #666;
}

.dark-mode .search-input {
    background: #333;
    color: white;
    border-color: #00e676;
}

.dark-mode .search-input::placeholder {
    color: #bbb;
}

/* ✅ Search Button */
.search-btn {
    background: #148818;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease-in-out;
}

.search-btn:hover {
    background: #0f6f12;
    transform: scale(1.05);
}

.dark-mode .search-btn {
    background: #00e676;
    color: black;
}

.dark-mode .search-btn:hover {
    background: #00c853;
}

/* ✅ Pagination Styling */
.page-link {
    color: #148818;
    font-weight: 600;
}

.page-link:hover {
    background-color: #148818;
    color: white;
}

.dark-mode .page-link {
    background-color: #222;
    color: white;
}

/* ✅ Responsive Adjustments */
@media (max-width: 991px) {
    .blog-sidebar {
        margin-top: 20px;
    }

    .search-container {
        flex-direction: column;
    }

    .search-input {
        width: 100%;
    }

    .search-btn {
        width: 100%;
    }
}
</style>

{% endblock %}