{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/BLINKBOX.png' %}" />
    <meta name="description" content="Watch and download the latest movies and TV series online in HD quality. Stream top-rated films and shows from all genres — action, drama, comedy, thriller, and more. Fast streaming, easy downloads, and no subscription required!" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <title>{% block title %}Welcome to Blinkbox | The Home of Entertainment{% endblock %}</title>

    <link rel="stylesheet"  href="{% static 'css/style.css' %}">
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    
<div id="container-d9b904aa5c97cf47aed9ca083712b234"></div>
    <div class="nav-bar">
        <div class="nav-logo">
            <a href="/"><img src="/static/images/BLINKBOX.png" alt="BlickBox Logo"></a>
        </div>
        <div class="nav-links">
            <a href="/home/" class="{% if request.path == '/home/' %}active{% endif %}">Home</a>
            <div class="dropdown">
                <a href="#" class="category-toggle">Categories</a>
                <div class="dropdown-content" id="category-list"></div>
            </div>           
             <a href="/see-all/" class="{% if request.path == '/see-all/' %}active{% endif %}">See-all</a>
            <a href="/explore/" class="{% if request.path == '/explore/' %}active{% endif %}">Explore</a>
            <a href="/account/" class="{% if request.path == '/account/' %}active{% endif %}">Account</a>
            <a href="/login/" onclick="logout()">Log Out</a>
        </div>
        <div class="nav-toggle">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <div class="sidebar">
        <a href="/home/" class="sidebar-item {% if request.path == '/home/' %}active{% endif %}"><i class="fas fa-home"></i> Home</a>
        <div class="sidebar-dropdown">
            <a href="#" class="sidebar-item category-toggle"><i class="fas fa-list"></i> Categories</a>
            <div class="sidebar-dropdown-content" id="sidebar-category-list"></div>
        </div>
        <a href="/see-all/" class="sidebar-item {% if request.path == '/see-all/' %}active{% endif %}"><i class="fas fa-search"></i> See all</a>
        <a href="/explore/" class="sidebar-item {% if request.path == '/explore/' %}active{% endif %}"><i class="fas fa-search"></i> Explore</a>
        <a href="/account/" class="sidebar-item {% if request.path == '/account/' %}active{% endif %}"><i class="fas fa-user"></i> Account</a>
        <a href="/login/" class="sidebar-item" onclick="logout()"><i class="fas fa-sign-out-alt"></i> Log Out</a>
    </div>
    <div class="nav-dropdown" id="nav-dropdown">
        <a href="/home/" class="{% if request.path == '/home/' %}active{% endif %}">Home</a>
        <div class="dropdown">
            <a href="#" class="category-toggle">Categories</a>
            <div class="dropdown-content" id="mobile-category-list"></div>
        </div>
        <a href="/see-all/" class="{% if request.path == '/see-all/' %}active{% endif %}">See all</a>

        <a href="/explore/" class="{% if request.path == '/explore/' %}active{% endif %}">Explore</a>
        <a href="/account/" class="{% if request.path == '/account/' %}active{% endif %}">Account</a>
        <a href="/login/" onclick="logout()">Log Out</a>
    </div>
    <div class="container">
        <div class="main-content">
            {% if request.path != '/home/' %}
            <div class="back-button" onclick="history.back()"><span>←</span></div>
            {% endif %}
            {% block content %}
            {% endblock %}
        </div>
    </div>
    <div class="bottom-nav">
        <a href="/home/" class="bottom-nav-item {% if request.path == '/home/' %}active{% endif %}">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        <div class="bottom-nav-item bottom-nav-dropdown">
            <a href="#" class="category-toggle">
                <i class="fas fa-list"></i>
                <span>Categories</span>
            </a>
            <div class="bottom-nav-dropdown-content" id="bottom-nav-category-list"></div>
        </div>
        <a href="/see-all/" class="bottom-nav-item {% if request.path == '/see-all/' %}active{% endif %}">
            <i class="fas fa-search"></i>
            <span>See all/</span>
        </a>
        <a href="/explore/" class="bottom-nav-item {% if request.path == '/explore/' %}active{% endif %}">
            <i class="fas fa-search"></i>
            <span>Explore</span>
        </a>
        
        <a href="/account/" class="bottom-nav-item {% if request.path == '/account/' %}active{% endif %}">
            <i class="fas fa-user"></i>
            <span>Account</span>
        </a>
        <a href="/login/" class="bottom-nav-item" onclick="logout()">
            <i class="fas fa-sign-out-alt"></i>
            <span>Log Out</span>
        </a>
    </div>
    <footer class="footer">
    <div class="footer-links">
        <a href="/terms/">Terms and Conditions</a>
        <a href="/privacy/">Privacy Policy</a>
        <a href="/about/">About Us</a>
        <a href="/contact/">Contact Us</a>
    </div>
    <div class="footer-app-links">
        <a href="https://play.google.com/store/apps" target="_blank"><i class="fab fa-google-play"></i> Google Play</a>
        <a href="https://www.apple.com/app-store/" target="_blank"><i class="fab fa-app-store"></i> App Store</a>
    </div>
    <p>© 2025 BlickBox. All rights reserved.</p>\
    
</footer>
    <script>
        async function loadCategories() {
            try {
                const response = await fetch('/api/categories/', {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                if (!response.ok) throw new Error('Failed to fetch categories');
                const categories = await response.json();
                const lists = [
                    document.getElementById('category-list'),
                    document.getElementById('mobile-category-list'),
                    document.getElementById('sidebar-category-list'),
                    document.getElementById('bottom-nav-category-list')
                ];
                categories.forEach(category => {
                    const link = document.createElement('a');
                    link.href = `/category/${category.name}/`;
                    link.textContent = category.name;
                    lists.forEach(list => list && list.appendChild(link.cloneNode(true)));
                });
            } catch (err) {
                console.error('Error loading categories:', err);
            }
        }

        function logout() {
            localStorage.removeItem('access_token');
            localStorage.removeItem('refresh_token');
        }

        document.addEventListener('DOMContentLoaded', () => {
            loadCategories();
            const hamburger = document.querySelector('.nav-toggle');
            const navDropdown = document.getElementById('nav-dropdown');
            const mobileCategoryToggle = document.querySelector('.nav-dropdown .category-toggle');
            const mobileCategoryList = document.getElementById('mobile-category-list');
            const sidebarCategoryToggle = document.querySelector('.sidebar .category-toggle');
            const sidebarCategoryList = document.getElementById('sidebar-category-list');
            const bottomNavCategoryToggle = document.querySelector('.bottom-nav .category-toggle');
            const bottomNavCategoryList = document.getElementById('bottom-nav-category-list');

            hamburger.addEventListener('click', () => {
                navDropdown.classList.toggle('active');
            });

            mobileCategoryToggle.addEventListener('click', (e) => {
                e.preventDefault();
                mobileCategoryList.classList.toggle('active');
            });

            sidebarCategoryToggle.addEventListener('click', (e) => {
                e.preventDefault();
                sidebarCategoryList.classList.toggle('active');
            });

            bottomNavCategoryToggle.addEventListener('click', (e) => {
                e.preventDefault();
                bottomNavCategoryList.classList.toggle('active');
            });

            document.addEventListener('click', (e) => {
                if (!hamburger.contains(e.target) && !navDropdown.contains(e.target)) {
                    navDropdown.classList.remove('active');
                }
                if (!mobileCategoryToggle.contains(e.target) && !mobileCategoryList.contains(e.target)) {
                    mobileCategoryList.classList.remove('active');
                }
                if (!sidebarCategoryToggle.contains(e.target) && !sidebarCategoryList.contains(e.target)) {
                    sidebarCategoryList.classList.remove('active');
                }
                if (!bottomNavCategoryToggle.contains(e.target) && !bottomNavCategoryList.contains(e.target)) {
                    bottomNavCategoryList.classList.remove('active');
                }
            });

            // Redirect authenticated users from index to home
            

            // Redirect non-authenticated users to login for non-public pages
            const publicPaths = ['/login/', '/signup/', '/', '/terms/', '/privacy/', '/about/', '/contact/'];
            if (!localStorage.getItem('access_token') && !publicPaths.some(path => window.location.pathname === path)) {
                window.location.href = '/login/';
            }
        });
    </script>
    {% block scripts %}
    {% endblock %}
</body>
</html>