<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Astron Hosts Expense Tracker{% 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">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        .container-fluid {
            padding-left: 0;
            margin-left: 0;
        }
        .row.no-gutter-row {
            --bs-gutter-x: 0;
            margin-left: 0;
            margin-right: 0;
        }
        .sidebar {
            min-height: 100vh;
            background: #1a237e;
            color: #fff;
            padding-top: 2rem;
            padding-left: 1rem;
            border-radius: 0;
            margin-left: 0;
        }
        .sidebar .nav-link {
            color: #fff;
            font-weight: 500;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            transition: background 0.2s;
            padding-left: 1rem;
        }
        .sidebar .nav-link.active, .sidebar .nav-link:hover {
            background: #3949ab;
            color: #fff;
            width: 100%;
            display: block;
            padding: 1rem;
        }
        .sidebar .sidebar-brand {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .main-content {
            padding: 2rem 2rem 2rem 0;
        }
        @media (max-width: 991.98px) {
            .sidebar {
                min-height: auto;
                padding-top: 1rem;
            }
            .main-content {
                padding: 1rem;
            }
        }
        /* Remove extra margin between navbar and row */
        .no-gutter-row {
            --bs-gutter-x: 0;
            margin-right: 0;
            margin-left: 0;
        }
        .dark-mode body {
            background-color: #181a1b !important;
            color: #f1f1f1 !important;
        }
        .dark-mode .sidebar {
            background: #23272b !important;
            color: #f1f1f1 !important;
        }
        .dark-mode .main-content,
        .dark-mode .card,
        .dark-mode .navbar {
            background: #23272b !important;
            color: #f1f1f1 !important;
        }
        .dark-mode .card {
            border-color: #333 !important;
        }
        .dark-mode .form-control,
        .dark-mode .form-select {
            background: #23272b !important;
            color: #f1f1f1 !important;
            border-color: #444 !important;
        }
        .dark-mode .sidebar .nav-link.active,
        .dark-mode .sidebar .nav-link:hover {
            background: #3949ab !important;
            color: #fff !important;
        }
        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.7s cubic-bezier(.39,.575,.565,1) forwards;
        }
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: none;
            }
        }
        .card, .main-content, .alert, .modal-content {
            transition: box-shadow 0.3s, background 0.3s, color 0.3s, border 0.3s;
        }
        .sidebar .nav-link {
            transition: background 0.25s, color 0.25s, transform 0.2s;
        }
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            transform: scale(1.04);
        }
        .btn, .form-control, .form-select {
            transition: box-shadow 0.2s, background 0.2s, color 0.2s, border 0.2s, transform 0.15s;
        }
        .btn:active {
            transform: scale(0.97);
        }
        .progress-bar {
            transition: width 1s cubic-bezier(.39,.575,.565,1);
        }
        .modal.fade .modal-dialog {
            transition: transform 0.3s cubic-bezier(.39,.575,.565,1), opacity 0.3s cubic-bezier(.39,.575,.565,1);
            transform: translateY(40px);
            opacity: 0;
        }
        .modal.show .modal-dialog {
            transform: none;
            opacity: 1;
        }
        .alert {
            animation: fadeInUp 0.6s cubic-bezier(.39,.575,.565,1);
        }
    </style>
    {% block extra_head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm w-100" style="margin-bottom:0;">
    <div class="container-fluid">
        <a class="navbar-brand d-flex align-items-center gap-2" href="{% url 'dashboard' %}">
            <span style="font-weight:600; letter-spacing:1px; margin-left: 20px;;">Astron Hosts LTD</span>
        </a>
        <div class="d-flex gap-2">
            <button id="darkModeToggle" class="btn btn-outline-light me-2" type="button"><i class="bi bi-moon me-2"></i> Dark Mode</button>
            <form action="{% url 'logout' %}" method="post" style="display:inline;">
              {% csrf_token %}
              <button type="submit" class="btn btn-outline-light">Logout</button>
            </form>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <div class="row flex-nowrap no-gutter-row">
        <nav class="col-auto col-lg-2 sidebar d-flex flex-column align-items-start">
            <div class="sidebar-brand mb-4">
              Expense Tracker
            </div>
            <a class="nav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" href="{% url 'dashboard' %}"><i class="bi bi-speedometer2 me-2"></i> Dashboard</a>
            <a class="nav-link {% if request.resolver_match.url_name == 'add_income' %}active{% endif %}" href="{% url 'add_income' %}"><i class="bi bi-cash-stack me-2"></i> Add Income</a>
            <a class="nav-link {% if request.resolver_match.url_name == 'add_expense' %}active{% endif %}" href="{% url 'add_expense' %}"><i class="bi bi-credit-card me-2"></i> Add Expense</a>
            <a class="nav-link {% if request.resolver_match.url_name == 'categories' %}active{% endif %}" href="{% url 'categories' %}"><i class="bi bi-tags me-2"></i> Categories</a>
            <a class="nav-link {% if request.resolver_match.url_name == 'analytics' %}active{% endif %}" href="{% url 'analytics' %}"><i class="bi bi-bar-chart-line me-2"></i> Analytics</a>
            <a class="nav-link {% if request.resolver_match.url_name == 'settings' %}active{% endif %}" href="{% url 'settings' %}"><i class="bi bi-gear me-2"></i> Settings</a>
        </nav>
        <main class="col px-0 main-content">
            {% block content %}{% endblock %}
        </main>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const toggle = document.getElementById('darkModeToggle');
        const body = document.body;
        if (localStorage.getItem('darkMode') === 'enabled') {
            body.classList.add('dark-mode');
        }
        toggle.addEventListener('click', function() {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
            } else {
                localStorage.setItem('darkMode', 'disabled');
            }
        });
    });
</script>
{% block extra_js %}{% endblock %}
</body>
</html> 