<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="BLOOM LIMS - Laboratory Information Management System">
    <title>{% block title %}BLOOM LIMS{% endblock %}</title>
    
    <!-- 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;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" 
          crossorigin="anonymous" referrerpolicy="no-referrer">
    
    <!-- BLOOM Modern CSS -->
    <link rel="stylesheet" href="/static/modern/css/bloom_modern.css">

    {% block extra_css %}{% endblock %}

    <!-- Apply theme from localStorage immediately to prevent flash -->
    <script>
      (function() {
        const theme = localStorage.getItem('bloom_theme') || 'dark';
        if (theme === 'light') {
          document.documentElement.classList.add('theme-light-loading');
        }
      })();
    </script>
</head>
<body>
    <!-- Accent stripe bar -->
    <div class="bloom-stripe-bar"></div>
    
    <!-- Header -->
    <header class="header">
        {% set current_user = user or udat %}
        {% set is_admin_user = current_user and (current_user.role | default('user') | lower == 'admin') %}
        <a href="/" class="header-logo">
            <i class="fas fa-spa"></i>
            BLOOM
        </a>
        
        <nav class="header-nav" aria-label="Main navigation">
            <a href="/" class="{% if request.url.path == '/' %}active{% endif %}">
                <i class="fas fa-home"></i> Dashboard
            </a>
            <a href="/queue_details" class="{% if '/queue_details' in request.url.path %}active{% endif %}">
                <i class="fas fa-list-check"></i> Queue Runtime
            </a>
            <a href="/equipment" class="{% if '/equipment' in request.url.path %}active{% endif %}">
                <i class="fas fa-microscope"></i> Equipment
            </a>
            <a href="/reagents" class="{% if '/reagents' in request.url.path %}active{% endif %}">
                <i class="fas fa-vial"></i> Reagents
            </a>
            <a href="/create_object" class="{% if '/create_object' in request.url.path %}active{% endif %}">
                <i class="fas fa-plus-circle"></i> Create
            </a>
            <div class="nav-dropdown">
                <a href="#" class="nav-dropdown-toggle {% if '/search' in request.url.path or '/bulk_create' in request.url.path %}active{% endif %}">
                    <i class="fas fa-tools"></i> Tools <i class="fas fa-caret-down"></i>
                </a>
                <div class="nav-dropdown-menu">
                    <a href="/search"><i class="fas fa-search"></i> Search</a>
                    <a href="/bulk_create_containers"><i class="fas fa-upload"></i> Bulk Create Containers</a>
                </div>
            </div>
            {% if is_admin_user %}
            <a href="/admin" class="{% if '/admin' in request.url.path %}active{% endif %}">
                <i class="fas fa-cog"></i> Admin
            </a>
            {% endif %}
        </nav>
        
        <button class="menu-toggle" aria-label="Toggle navigation" aria-expanded="false">
            <i class="fas fa-bars"></i>
        </button>
        
        <div class="header-actions">
            {% if current_user and current_user.email %}
            <a href="/user_home" class="text-sm text-muted">{{ current_user.email }}</a>
            <a href="/logout" class="btn btn-outline btn-sm">
                <i class="fas fa-sign-out-alt"></i> Logout
            </a>
            {% else %}
            <a href="/login" class="btn btn-primary btn-sm">
                <i class="fas fa-sign-in-alt"></i> Login
            </a>
            {% endif %}
        </div>
    </header>
    
    <!-- Main Content -->
    <main class="main-content">
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-left">
                <div class="footer-mainline">
                    <span>{{ gui_meta.app_name }}</span>
                    <span class="footer-version">v{{ gui_meta.version }}</span>
                </div>
                <div class="footer-gitline">
                    <span class="footer-meta-chip">Branch: {{ gui_meta.branch }}</span>
                    <span class="footer-meta-chip">Tag: {{ gui_meta.tag }}</span>
                    <span class="footer-meta-chip">Commit: {{ gui_meta.hash }}</span>
                </div>
            </div>
            <div class="footer-right">
                <a href="/help" class="footer-link">
                    <i class="fas fa-circle-question"></i> Help
                </a>
                {% if gui_meta.support_email %}
                <a href="mailto:{{ gui_meta.support_email }}" class="footer-link">
                    <i class="fas fa-envelope"></i> {{ gui_meta.support_email }}
                </a>
                {% endif %}
                <a href="{{ gui_meta.github_repo_url }}" class="footer-link" target="_blank" rel="noopener">
                    <i class="fab fa-github"></i> GitHub
                </a>
            </div>
        </div>
    </footer>
    
    <!-- Toast Container (will be created by JS if needed) -->
    
    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loading-overlay">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <div class="loading-text">Loading...</div>
        </div>
    </div>
    
    <!-- BLOOM Modern JS -->
    <script src="/static/modern/js/timezone.js"></script>
    <script src="/static/modern/js/bloom_modern.js"></script>

    <!-- Global configuration -->
    <script>
        window.BloomConfig = {
            apiBase: '/api/v1',
            user: {{ udat | tojson | safe if udat else 'null' }},
            version: '{{ version | default("dev") }}'
        };
        if (!window.BloomConfig.user) {
            window.BloomConfig.user = {};
        }
        if (!window.BloomConfig.user.display_timezone) {
            window.BloomConfig.user.display_timezone = 'UTC';
        }

        // Apply theme from localStorage
        (function() {
            const theme = localStorage.getItem('bloom_theme') || 'dark';
            if (theme === 'light') {
                document.body.classList.add('theme-light');
            } else {
                document.body.classList.remove('theme-light');
            }
            // Remove loading class from html element
            document.documentElement.classList.remove('theme-light-loading');
        })();
    </script>

    {% block extra_js %}{% endblock %}
</body>
</html>
