<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>{% block title %}EveAI Chat{% endblock %}</title>

    <link href="{{ asset_url('dist/chat-client.css') }}" rel="stylesheet" />

    <!-- Custom theme colors from tenant settings -->
    <style>
        :root {
            /* Visual viewport vh unit fallback (1vh if JS not yet set) */
            --vvh: 1vh;

            /* Legacy support - keeping for backward compatibility only */
            /* These variables are deprecated and should not be used in new code */
            --primary-color: {{ customisation.active_background_color|default('#ffffff') }};
            --secondary-color: {{ customisation.active_text_color|default('#212529') }};
            
            /* Sidebar customisation */
            --sidebar-color: {{ customisation.sidebar_color|default('#f8f9fa') }};
            --sidebar-background: {{ customisation.sidebar_background|default('#2c3e50') }};
            
            /* Gradient customisation */
            --gradient-start-color: {{ customisation.gradient_start_color|default('#f5f7fa') }};
            --gradient-end-color: {{ customisation.gradient_end_color|default('#c3cfe2') }};
            
            /* Markdown customisation */
            --markdown-background-color: {{ customisation.markdown_background_color|default('transparent') }};
            --markdown-text-color: {{ customisation.markdown_text_color|default('#ffffff') }};
            
            /* Active elements customisation */
            --active-background-color: {{ customisation.active_background_color|default('#ffffff') }};
            
            /* History customisation with alpha-based color manipulation */
            --history-background: {{ customisation.history_background|default(10)|adjust_color_alpha }};

            /* AI Message Colors */
            --ai-message-background: {{ customisation.ai_message_background|default('#f5f7fa') }};
            --ai-message-text-color: {{ customisation.ai_message_text_color|default('#212529') }};

            /* Human Message Colors */
            --human-message-background: {{ customisation.human_message_background|default('#ffffff') }};
            --human-message-text-color: {{ customisation.human_message_text_color|default('#212529') }};

        }
    </style>

    {% block head %}{% endblock %}
</head>
<body>
    <div id="app" class="app-container" data-vue-app="true">
        <!-- Mobile header - Vue component container (hidden on desktop) -->
        <div id="mobile-header-container"></div>
        
        <!-- Left sidebar - Vue component container (hidden on mobile) -->
        <div id="sidebar-container"></div>

        <!-- Right content area - contains the chat client -->
        <div class="content-area">
            <div class="chat-container">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    {% include 'scripts.html' %}
    {% block scripts %}{% endblock %}
</body>
</html>
