{% 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 %}Wardrobe Planner{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg-dark: #121212;
            --surface-dark: #1E1E1E;
            --primary-accent: #BB86FC;
            --secondary-accent: #03DAC6;
            --text-main: #E0E0E0;
            --text-dim: #9E9E9E;
        }
        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            padding-bottom: 80px;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
        }
        .surface {
            background-color: var(--surface-dark);
            border-radius: 16px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .glass-card {
            background: rgba(30, 30, 30, 0.6);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .accent-lavender { color: var(--primary-accent); }
        .accent-teal { color: var(--secondary-accent); }
        
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--surface-dark);
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
        }
        .nav-item {
            color: var(--text-dim);
            text-decoration: none;
            font-size: 0.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: color 0.3s ease;
        }
        .nav-item.active {
            color: var(--primary-accent);
        }
        .nav-item i {
            font-size: 1.3rem;
            margin-bottom: 4px;
        }
        .season-icon {
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.3s;
        }
        .season-icon.active {
            opacity: 1;
        }
        
        .btn-accent {
            background-color: var(--primary-accent);
            color: #000;
            font-weight: 600;
            border-radius: 12px;
        }
        .btn-accent:hover {
            background-color: #a370f7;
            color: #000;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <div class="container py-3">
        {% block content %}{% endblock %}
    </div>

    <nav class="bottom-nav">
        <a href="{% url 'home' %}" class="nav-item {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        <a href="{% url 'new_fit' %}" class="nav-item {% if request.resolver_match.url_name == 'new_fit' %}active{% endif %}">
            <i class="fas fa-plus-circle"></i>
            <span>New Fit</span>
        </a>
        <a href="{% url 'outfit_list' %}" class="nav-item {% if request.resolver_match.url_name == 'outfit_list' %}active{% endif %}">
            <i class="fas fa-tshirt"></i>
            <span>Outfits</span>
        </a>
        <a href="{% url 'accessory_list' %}" class="nav-item {% if request.resolver_match.url_name == 'accessory_list' %}active{% endif %}">
            <i class="fas fa-gem"></i>
            <span>Accs</span>
        </a>
        <a href="{% url 'wardrobe_list' %}" class="nav-item {% if request.resolver_match.url_name == 'wardrobe_list' %}active{% endif %}">
            <i class="fas fa-box"></i>
            <span>Wardrobe</span>
        </a>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>