{% load static %}
{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>{% block title %}LARA{% endblock title %}</title>
    <meta name="description" content="{% block meta_description %}LARA Laboratory Automation and Research Assistant{% endblock meta_description %}">
    
    <!-- Tailwind CSS 4.0 via webpack bundle -->
    {% render_bundle 'lara_django_base_core' 'css' config='BASE' %}
    <link rel="stylesheet" href="{% static 'lara_django_base/css/lara_django_base_core.css' %}">
    
    <!-- Preload critical resources -->
    <link rel="preload" href="{% static 'lara_django_base/icons/symbols.svg' %}" as="image" type="image/svg+xml">
    
    {% block extra_head %}{% endblock extra_head %}
</head>

<body class="h-full bg-gray-50 antialiased" data-theme="light">
    <!-- Skip to main content for accessibility -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded">
        Skip to main content
    </a>

    <div class="min-h-full">
        <!-- Header -->
        <header class="bg-white shadow-sm">
            {% block header %}
                {% include 'lara_django_base/partials/navbar.html' %}
            {% endblock header %}
        </header>

        <!-- Main layout -->
        <div class="flex h-[calc(100vh-4rem)]">
            <!-- Sidebar -->
            <aside class="hidden lg:flex lg:flex-shrink-0">
                {% block sidebar %}
                    {% include 'lara_django_base/partials/sidebar.html' %}
                {% endblock sidebar %}
            </aside>

            <!-- Main content area -->
            <main id="main-content" class="flex-1 overflow-auto">
                <!-- Content header -->
                {% block content_header %}
                <div class="bg-white shadow-sm border-b">
                    <div class="px-6 py-4">
                        <h1 class="text-2xl font-semibold text-gray-900">
                            {% block page_title %}Dashboard{% endblock page_title %}
                        </h1>
                        {% block breadcrumbs %}{% endblock breadcrumbs %}
                    </div>
                </div>
                {% endblock content_header %}

                <!-- Page content -->
                <div class="px-6 py-6">
                    {% block content %}{% endblock content %}
                </div>
            </main>
        </div>
    </div>

    <!-- Mobile sidebar overlay -->
    <div id="mobile-sidebar-overlay" class="fixed inset-0 z-40 lg:hidden hidden">
        <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
        <nav class="fixed top-0 left-0 bottom-0 w-64 bg-white shadow-xl">
            {% include 'lara_django_base/components/mobile-sidebar.html' %}
        </nav>
    </div>

    <!-- Scripts -->
    <script>
        // CSRF token for HTMX and other requests
        window.csrfToken = '{{ csrf_token }}';
    </script>
    
    {% block scripts %}{% endblock scripts %}
    {% render_bundle 'lara_django_base_core' 'js' config='BASE' %}
</body>
</html>