{% extends "base.html" %}
{% load static %}
{% block title %}Explore Digital Library | BookStore{% endblock %}

{% block content %}
<header class="bg-white border-bottom py-5 mb-5">
    <div class="container py-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2 small">
                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none text-muted">Home</a></li>
                <li class="breadcrumb-item active fw-bold text-primary" aria-current="page">Explore Library</li>
            </ol>
        </nav>
        <h1 class="fw-800 display-5 mb-0">Browse Our <span class="text-primary-gradient">Collection</span></h1>
        <p class="text-muted fs-5 mt-2">Discover the best digital books across all categories.</p>
    </div>
</header>

<div class="container mb-5">
    <div class="row g-5">
        <!-- Sidebar Filter -->
        <div class="col-lg-3">
            <div class="sticky-top" style="top: 100px; z-index: 10;">
                <h6 class="fw-bold text-uppercase letter-spacing-1 mb-4 small text-muted">Filter By Category</h6>
                <div class="list-group list-group-flush shadow-soft rounded-4 overflow-hidden border">
                    <a href="{% url 'book_list' %}" class="list-group-item list-group-item-action py-3 px-4 border-0 d-flex justify-content-between align-items-center {% if not selected_category %}bg-primary text-white fw-bold shadow-sm{% else %}text-dark hover-primary{% endif %}">
                        All Books
                        {% if not selected_category %}<i class="fas fa-check-circle"></i>{% endif %}
                    </a>
                    {% for category in categories %}
                    <a href="{% url 'book_list' %}?category={{ category.slug }}" class="list-group-item list-group-item-action py-3 px-4 border-0 d-flex justify-content-between align-items-center {% if selected_category == category.slug %}bg-primary text-white fw-bold shadow-sm{% else %}text-dark hover-primary{% endif %}">
                        {{ category.name }}
                        {% if selected_category == category.slug %}
                            <i class="fas fa-check-circle"></i>
                        {% else %}
                            <span class="badge bg-light text-muted rounded-pill small fw-normal">{{ category.books.count }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>

                <!-- AdSense Sidebar Slot -->
                <div class="adsense-slot mt-5 rounded-4 border-0 bg-white shadow-soft p-4 text-center text-muted small opacity-75">
                    <i class="fas fa-bullhorn mb-2 d-block"></i>
                    Partner Spotlight
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-9">
            <!-- Search & Info Bar -->
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-4">
                <div>
                    <h5 class="fw-bold mb-1">
                        {% if selected_category %}
                            Category: <span class="text-primary">{{ selected_category|capfirst }}</span>
                        {% else %}
                            All Available Books
                        {% endif %}
                    </h5>
                    <p class="text-muted small mb-0">Showing {{ books.count }} results found</p>
                </div>
                <div class="search-box-wrap d-flex border align-items-center px-3 py-1 rounded-pill bg-white shadow-sm" style="min-width: 300px;">
                    <i class="fas fa-search text-muted me-2 small"></i>
                    <form action="{% url 'book_list' %}" method="GET" class="w-100">
                        <input type="text" name="q" class="form-control border-0 bg-transparent py-2 shadow-none small" placeholder="Quick search..." value="{{ request.GET.q }}">
                        {% if selected_category %}
                            <input type="hidden" name="category" value="{{ selected_category }}">
                        {% endif %}
                    </form>
                </div>
            </div>

            <div class="row g-4">
                {% for book in books %}
                <div class="col-md-4 col-sm-6">
                    <div class="card book-card h-100">
                        <div class="position-relative">
                            {% if book.cover_image %}
                            <img src="{{ book.cover_image.url }}" class="card-img-top" alt="{{ book.title }}" style="height: 300px; object-fit: cover;">
                            {% else %}
                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 300px;">
                                <i class="fas fa-book fa-3x text-muted opacity-25"></i>
                            </div>
                            {% endif %}
                            <div class="position-absolute top-0 end-0 m-3">
                                <span class="badge bg-white text-dark shadow-sm rounded-pill fw-bold px-3 py-2 border small">${{ book.price }}</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="text-primary small fw-bold mb-2 text-uppercase letter-spacing-1" style="font-size: 0.75rem;">{{ book.category.name }}</p>
                            <h6 class="card-title fw-bold text-dark mb-3 line-clamp-2" style="font-size: 1.05rem;">{{ book.title }}</h6>
                            <div class="d-grid mt-auto">
                                <a href="{% url 'book_detail' book.slug %}" class="btn btn-outline-dark rounded-pill py-2 small fw-bold">View Details</a>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12 text-center py-5">
                    <div class="bg-white p-5 rounded-4 shadow-soft">
                        <i class="fas fa-search-minus fa-3x text-muted mb-4"></i>
                        <h4 class="fw-bold">No Books Found</h4>
                        <p class="lead text-muted">Try adjusting your search or category filters.</p>
                        <a href="{% url 'book_list' %}" class="btn btn-primary rounded-pill px-5 mt-3">Reset Filters</a>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- AdSense Middle Slot -->
            <div class="adsense-slot mt-5 rounded-4 border-0 bg-white shadow-soft p-5 text-center text-muted small">
                [Google AdSense Footer Slot]
            </div>
        </div>
    </div>
</div>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
{% endblock %}