<!DOCTYPE html>
<!--
  Familiar - Self-hosted AI Agent
  Copyright (c) 2026 George Scott Foley
  
  Licensed under the MIT License
  For commercial licensing, contact: licensing@familiar.ai
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Familiar Admin{% endblock %}</title>
    
    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- HTMX for dynamic updates -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    
    <!-- Alpine.js for interactivity -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <style>
        [x-cloak] { display: none !important; }
    </style>
    
    {% block head %}{% endblock %}
</head>
<body class="bg-gray-100 min-h-screen">
    {% if user %}
    <!-- Navigation -->
    <nav class="bg-purple-800 text-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex items-center space-x-8">
                    <a href="{{ url_for('admin.dashboard') }}" class="flex items-center space-x-2">
                        <span class="text-2xl">🐍</span>
                        <span class="font-bold text-xl">Familiar</span>
                    </a>
                    
                    <div class="hidden md:flex space-x-4">
                        <a href="{{ url_for('admin.dashboard') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if request.endpoint == 'admin.dashboard' %}bg-purple-900{% endif %}">
                            Dashboard
                        </a>
                        {% if user.role.value == 'admin' %}
                        <a href="{{ url_for('admin.users') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if 'user' in request.endpoint %}bg-purple-900{% endif %}">
                            Users
                        </a>
                        <a href="{{ url_for('admin.analytics') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if 'analytics' in request.endpoint %}bg-purple-900{% endif %}">
                            Analytics
                        </a>
                        <a href="{{ url_for('admin.budgets') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if 'budget' in request.endpoint %}bg-purple-900{% endif %}">
                            Budgets
                        </a>
                        <a href="{{ url_for('admin.activity') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if request.endpoint == 'admin.activity' %}bg-purple-900{% endif %}">
                            Activity
                        </a>
                        <a href="{{ url_for('admin.settings') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if request.endpoint == 'admin.settings' %}bg-purple-900{% endif %}">
                            Settings
                        </a>
                        <a href="{{ url_for('admin.audit') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if 'audit' in request.endpoint %}bg-purple-900{% endif %}">
                            Audit
                        </a>
                        <a href="{{ url_for('admin.system_status') }}" 
                           class="px-3 py-2 rounded-md hover:bg-purple-700 {% if 'system' in request.endpoint %}bg-purple-900{% endif %}">
                            System
                        </a>
                        {% endif %}
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <span class="text-sm text-purple-200">{{ user.display_name }}</span>
                    <span class="text-xs bg-purple-600 px-2 py-1 rounded">{{ user.role.value }}</span>
                    <a href="{{ url_for('admin.logout') }}" class="text-sm hover:text-purple-200">Logout</a>
                </div>
            </div>
        </div>
    </nav>
    {% endif %}
    
    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="max-w-7xl mx-auto px-4 mt-4">
        {% for category, message in messages %}
        <div x-data="{ show: true }" x-show="show" x-cloak
             class="p-4 rounded-lg mb-2 flex justify-between items-center
                    {% if category == 'error' %}bg-red-100 text-red-800 border border-red-200
                    {% elif category == 'success' %}bg-green-100 text-green-800 border border-green-200
                    {% elif category == 'warning' %}bg-yellow-100 text-yellow-800 border border-yellow-200
                    {% else %}bg-blue-100 text-blue-800 border border-blue-200{% endif %}">
            <span>{{ message }}</span>
            <button @click="show = false" class="text-lg">&times;</button>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
    
    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 py-6">
        {% block content %}{% endblock %}
    </main>
    
    <!-- Footer -->
    <footer class="mt-8 py-4 text-center text-gray-500 text-sm">
        Familiar Admin v2.0.0 &middot; 
        <a href="https://github.com/your-org/familiar" class="hover:text-purple-600">Documentation</a>
    </footer>
    
    {% block scripts %}{% endblock %}
</body>
</html>
