<!DOCTYPE html>
{% raw %}{% load static %}{% endraw %}
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% raw %}{% block title %}{{ project_name|title }}{% endblock %}{% endraw %}</title>
    
    <!-- TailwindCSS + DaisyUI -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.8"></script>
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
    
    <!-- HyperScript -->
    <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% raw %}{% static 'css/main.css' %}{% endraw %}">
    
    {% raw %}{% block extra_head %}{% endblock %}{% endraw %}
</head>
<body class="h-full bg-base-100" hx-boost="true">
    <!-- Navigation -->
    <div class="navbar bg-primary text-primary-content">
        <div class="flex-1">
            <a class="btn btn-ghost text-xl" href="{% raw %}{% url 'home' %}{% endraw %}">{{ project_name|title }}</a>
        </div>
        <div class="flex-none">
            <ul class="menu menu-horizontal px-1">
                {% raw %}{% if user.is_authenticated %}{% endraw %}
                    <li><a href="/admin/">Admin</a></li>
                    <li>
                        <div class="dropdown dropdown-end">
                            <div tabindex="0" role="button" class="btn btn-ghost">
                                {% raw %}{{ user.email|default:user.username }}{% endraw %}
                            </div>
                            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 text-base-content rounded-box w-52">
                                <li><a href="{% raw %}{% url 'account_logout' %}{% endraw %}">Logout</a></li>
                            </ul>
                        </div>
                    </li>
                {% raw %}{% else %}{% endraw %}
                    <li><a href="{% raw %}{% url 'account_login' %}{% endraw %}">Login</a></li>
                    <li><a href="{% raw %}{% url 'account_signup' %}{% endraw %}">Sign Up</a></li>
                {% raw %}{% endif %}{% endraw %}
            </ul>
        </div>
    </div>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        <!-- Messages -->
        {% raw %}{% if messages %}{% endraw %}
            <div class="mb-6" x-data="{ show: true }" x-show="show">
                {% raw %}{% for message in messages %}{% endraw %}
                    <div class="alert alert-{% raw %}{% if message.tags == 'error' %}error{% elif message.tags == 'warning' %}warning{% elif message.tags == 'success' %}success{% else %}info{% endif %}{% endraw %} mb-2">
                        <span>{% raw %}{{ message }}{% endraw %}</span>
                        <button class="btn btn-sm btn-ghost" @click="show = false">×</button>
                    </div>
                {% raw %}{% endfor %}{% endraw %}
            </div>
        {% raw %}{% endif %}{% endraw %}

        {% raw %}{% block content %}{% endblock %}{% endraw %}
    </main>

    <!-- Footer -->
    <footer class="footer footer-center p-10 bg-base-200 text-base-content rounded mt-auto">
        <nav class="grid grid-flow-col gap-4">
            <a class="link link-hover" href="{% raw %}{% url 'home' %}{% endraw %}">Home</a>
            <a class="link link-hover" href="/admin/">Admin</a>
        </nav>
        <aside>
            <p>Copyright © {% raw %}{% now "Y" %}{% endraw %} - {{ project_name|title }}</p>
        </aside>
    </footer>

    <!-- Custom JavaScript -->
    <script src="{% raw %}{% static 'js/main.js' %}{% endraw %}"></script>
    {% raw %}{% block extra_js %}{% endblock %}{% endraw %}
</body>
</html>