{% 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 %}{{ project_name }}{% endblock %}</title>
    <meta name="description" content="Airbnb Host Loyalty CRM - Manage guests, properties and campaigns.">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Lexend:wght@600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={% now 'U' %}">
    
    <style>
        :root {
            --primary-slate: #1E293B;
            --accent-teal: #0D9488;
            --bg-soft: #F8FAFC;
            --text-main: #334155;
            --glass: rgba(255, 255, 255, 0.7);
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-soft);
            color: var(--text-main);
            min-height: 100vh;
        }
        
        h1, h2, h3, h4, .navbar-brand {
            font-family: 'Lexend', sans-serif;
            color: var(--primary-slate);
        }
        
        .navbar {
            background-color: white;
            border-bottom: 1px solid #E2E8F0;
            padding: 1rem 0;
        }
        
        .nav-link {
            font-weight: 500;
            color: #64748B;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--accent-teal);
        }
        
        .btn-primary {
            background-color: var(--accent-teal);
            border-color: var(--accent-teal);
            border-radius: 8px;
            padding: 0.6rem 1.2rem;
            font-weight: 600;
        }
        
        .btn-primary:hover {
            background-color: #0F766E;
            border-color: #0F766E;
        }
        
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            margin-bottom: 1.5rem;
        }
        
        .stat-card {
            background: linear-gradient(135deg, white 0%, #F1F5F9 100%);
            border-left: 4px solid var(--accent-teal);
        }
        
        /* Alert message styling */
        .messages {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            min-width: 300px;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show shadow" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="{% url 'home' %}">
                <span style="color: var(--accent-teal);">Host</span>Loyalty
            </a>
            <button class="navbar-toggler" 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">
                    <li class="nav-item">
                        <a class="nav-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}" href="{% url 'home' %}">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.resolver_match.url_name == 'guest_list' or request.resolver_match.url_name == 'import_guests' %}active{% endif %}" href="{% url 'guest_list' %}">Guests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {% if request.resolver_match.url_name == 'campaign_list' %}active{% endif %}" href="{% url 'campaign_list' %}">Campaigns</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/" target="_blank">Admin</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="py-5">
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </main>

    <footer class="py-4 mt-auto border-top bg-white">
        <div class="container text-center text-muted">
            <small>&copy; {% now "Y" %} Host Loyalty CRM. All rights reserved.</small>
        </div>
    </footer>

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