{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Digital Bookstore | Premium PDFs{% endblock %}</title>
    <meta name="description" content="{% block meta_description %}Buy and download high-quality PDF books online. Safe, fast, and secure.{% endblock %}">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg sticky-top navbar-light bg-glass py-3">
        <div class="container">
            <a class="navbar-brand fw-bold fs-3" href="{% url 'home' %}">
                <span class="text-primary-gradient">Book</span><span class="text-dark">Store</span>
            </a>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item"><a class="nav-link px-3" href="{% url 'home' %}">Home</a></li>
                    <li class="nav-item"><a class="nav-link px-3" href="{% url 'book_list' %}">Explore</a></li>
                    <li class="nav-item"><a class="nav-link px-3" href="{% url 'about' %}">About</a></li>
                    <li class="nav-item"><a class="nav-link px-3" href="{% url 'contact' %}">Contact</a></li>
                    <li class="nav-item ms-lg-3">
                        <a href="/admin/" class="btn btn-dark rounded-pill px-4 shadow-sm" target="_blank">
                            <i class="fas fa-user-shield me-2"></i>Admin
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Messaging System -->
    {% if messages %}
    <div class="container mt-4">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-4 shadow-sm border-0" role="alert">
            <i class="fas {% if message.tags == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %} me-2"></i>
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Main Content -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer class="footer bg-white pt-5 pb-3 mt-5 border-top">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4">
                    <a class="navbar-brand fw-bold fs-3 d-block mb-3" href="{% url 'home' %}">
                        <span class="text-primary-gradient">Book</span><span class="text-dark">Store</span>
                    </a>
                    <p class="text-muted pe-lg-5">Your premium destination for high-quality digital PDF books. Empowering knowledge sharing across the globe.</p>
                    <div class="social-links d-flex gap-3 mt-4">
                        <a href="https://wa.me/252634844506" class="btn btn-sm btn-outline-success rounded-circle" target="_blank"><i class="fab fa-whatsapp"></i></a>
                        <a href="#" class="btn btn-sm btn-outline-primary rounded-circle"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="btn btn-sm btn-outline-info rounded-circle"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="btn btn-sm btn-outline-danger rounded-circle"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4">
                    <h6 class="fw-bold mb-4">Quick Links</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="{% url 'home' %}" class="text-muted text-decoration-none hover-primary">Home</a></li>
                        <li class="mb-2"><a href="{% url 'book_list' %}" class="text-muted text-decoration-none hover-primary">All Books</a></li>
                        <li class="mb-2"><a href="{% url 'about' %}" class="text-muted text-decoration-none hover-primary">Our Story</a></li>
                        <li class="mb-2"><a href="{% url 'contact' %}" class="text-muted text-decoration-none hover-primary">Contact Us</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-4">
                    <h6 class="fw-bold mb-4">Legal</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="{% url 'privacy' %}" class="text-muted text-decoration-none hover-primary">Privacy Policy</a></li>
                        <li class="mb-2"><a href="{% url 'terms' %}" class="text-muted text-decoration-none hover-primary">Terms & Conditions</a></li>
                    </ul>
                </div>
                <div class="col-lg-3 col-md-4">
                    <h6 class="fw-bold mb-4">Contact Support</h6>
                    <p class="small text-muted mb-3">Reach out to us via WhatsApp for instant support.</p>
                    <div class="d-grid">
                        <a href="https://wa.me/252634844506" class="btn btn-success rounded-pill fw-bold">
                            <i class="fab fa-whatsapp me-2"></i> +252 63 4844506
                        </a>
                    </div>
                </div>
            </div>
            <hr class="my-4 text-muted opacity-25">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
                <p class="text-muted small mb-0">&copy; 2026 BookStore. All rights reserved.</p>
                <div class="payment-icons d-flex gap-3 text-muted opacity-50">
                    <span class="small fw-bold me-2">Payments:</span>
                    <i class="fas fa-mobile-screen-button fa-lg" title="EVC Plus"></i>
                    <i class="fas fa-wallet fa-lg" title="Zaad"></i>
                    <i class="fab fa-whatsapp fa-lg" title="Order via WhatsApp"></i>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Scroll interaction for glass navbar
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                nav.classList.add('shadow-sm');
                nav.style.padding = '0.5rem 0';
            } else {
                nav.classList.remove('shadow-sm');
                nav.style.padding = '1rem 0';
            }
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>