{% extends "page_base.html" %}


{% block main_class %}flex h-full bg-gray-900 overflow-hidden{% endblock %}

{% block content %}
    <!-- Sidebar Menu (Imported) -->
    {% include "chat/page_chat_menu.html" %}

    <!-- 
        Main Chat Area 
        - flex-1: Takes remaining width
        - flex-col: Stacks header, messages, input
    -->
    <div class="flex-1 flex flex-col min-w-0 bg-[#131314] relative transition-colors duration-300">
        
        <!-- Mobile Sidebar Toggle (Visible when sidebar hidden) -->
        <div class="absolute top-0 left-0 p-4 z-20">
             <button id="main-sidebar-toggle" class="text-gray-400 hover:text-gray-200 p-2 rounded-full hover:bg-gray-800 transition-colors hidden">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                </svg>
            </button>
        </div>

        <!-- 
            Chat Messages Container
            - overflow-y-auto: Scrollable
            - pb-32: Padding bottom to account for fixed input area
        -->
        <div id="chat-messages" 
                class="flex-1 overflow-y-auto p-4 scroll-smooth space-y-6 pt-16 pb-48">
                <div class="max-w-3xl mx-auto space-y-6">
                
                {% if not history_html %}
                <!-- Welcome Message (Only show if no history) -->
                <div class="flex flex-col items-start gap-4 mt-10 mb-10 animate-fade-in">
                    <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-emerald-400 leading-tight">
                        Hello, {{ user_name }}
                    </h1>
                    <p class="text-xl text-gray-400 font-medium">How can I help you today?</p>
                </div>
                {% endif %}

                <!-- Chat History (Injected) -->
                {{ history_html | safe }}
            </div>

        </div>

        <!-- 
            Input Area (Fixed Bottom) 
        -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-gray-900 via-gray-900 to-transparent pb-6 pt-10">
            <div class="max-w-3xl mx-auto">
                
                <!-- 
                    HTMX Chat Form 
                    - hx-post: Sends message to /htmx/chats/{id}/conversation
                    - hx-target: Append response to #chat-messages > div
                    - hx-swap: beforeend (adds new message at bottom)
                    - hx-disabled-elt: Disables button during request
                -->
                <form id="chat-form" hx-post="{{ '/htmx-stream' if enable_streaming else '/htmx' }}/chats/{{ chat_id }}/conversation"
                        hx-target="#chat-messages > div" 
                        hx-swap="beforeend"
                        hx-encoding="multipart/form-data"
                        hx-disabled-elt="#search-btn"
                        hx-include="#model-select"
                        class="w-full relative">
                    
                    <!-- Input Pill Container -->
                    <div class="bg-gray-800/80 backdrop-blur-xl border border-gray-700 rounded-3xl p-3 transition-colors focus-within:bg-gray-800 hover:bg-gray-800 focus-within:border-gray-600 shadow-lg flex flex-col gap-2">
                        
                        <!-- File Preview (Managed by JS) -->
                            <div id="file-preview" class="hidden flex items-center gap-2 bg-gray-700/50 rounded-lg mx-2 mt-2 p-2 text-sm text-gray-300 w-fit">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                class="w-4 h-4 text-blue-400">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                            </svg>
                            <span id="file-name" class="truncate max-w-[200px]"></span>
                            <button type="button" id="remove-file-btn" 
                            class="text-gray-400 hover:text-red-400 transition-colors ml-1 p-1 rounded-full hover:bg-gray-600">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-3.5 h-3.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>

                        <!-- Row 1: Text Input -->
                        <div class="w-full px-2">
                            <textarea  name="message" id="message-input" required placeholder="Enter a prompt here"
                                style="min-height: 48px; max-height: 200px;"
                                class="w-full bg-transparent border-none text-white p-0 focus:ring-0 focus:outline-none placeholder-gray-500 resize-none overflow-y-auto leading-normal"></textarea>
                        </div>

                        <!-- Row 2: Controls -->
                        <div class="flex items-center justify-between px-1">
                            
                            <!-- Left: Attachment Trigger -->
                            <label class="p-2 text-gray-400 hover:text-white hover:bg-gray-700/50 rounded-full cursor-pointer transition-colors">
                                <input type="file" id="file-input" name="file" class="hidden">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                    class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M12 4.5v15m7.5-7.5h-15" />
                                </svg>
                            </label>

                            <!-- Right: Model Selector + Submit -->
                            <div class="flex items-center gap-2">
                                <!-- Generic Select (Styled as pill) -->
                                <div class="relative group">
                                    <select id="model-select" name="model" 
                                            class="appearance-none bg-gray-800 hover:bg-gray-700 text-gray-300 text-xs rounded-full border border-gray-600 px-3 py-1.5 pr-8 cursor-pointer focus:outline-none focus:border-blue-500 transition-colors">
                                        {% for model in model_names %}
                                        <option value="{{ model }}" {% if model == current_model %}selected{% endif %}>
                                            {{ model }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
                                        <svg class="fill-current h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                                    </div>
                                </div>
                            
                                <!-- Submit Button -->
                                <button type="submit" id="search-btn"
                                    class="p-2 bg-white text-gray-900 hover:bg-gray-200 rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                    <!-- Send Icon -->
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                        class="w-5 h-5 icon-default">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                                    </svg>
                                    <!-- Loading Spinner (Toggled by CSS via htmx-request class) -->
                                    <svg class="animate-spin w-5 h-5 text-gray-900 hidden icon-loading" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                
                <div class="text-center mt-2">
                    <span class="text-xs text-gray-500">Go Chat may display inaccurate info, including about people, so double-check its responses.</span>
                </div>
            </div>
        </div>
    </div>

{% endblock %}