{% extends "base.html" %}
{% block content %}
<div class="app">
    <header class="topbar">
        <div class="workspace-chips" id="workspace-chips">
            <span class="ws-chip" data-ws="{{ workspace }}">
                {{ workspace }}
            </span>
            <button class="ws-add-btn" id="ws-add-btn"
                    hx-get="/web/workspaces"
                    hx-target="#panel-content"
                    hx-swap="innerHTML">+ workspace</button>
        </div>
        <div class="topbar-spacer"></div>
        <button class="topbar-btn" id="files-btn"
                hx-get="/web/files"
                hx-target="#panel-content"
                hx-swap="innerHTML">Files</button>
    </header>

    <main class="chat-area" id="chat-area">
        <div id="chat-messages" class="chat-messages">
            <div class="welcome" id="welcome">
                <div class="welcome-brand">DlightRAG</div>
                <div class="welcome-sub">Ask anything about your documents</div>
            </div>
        </div>
    </main>

    <!-- Drop zone overlay (hidden by default) -->
    <div class="drop-overlay" id="drop-overlay">
        <div class="drop-overlay-content">
            Drop images here.<br>Up to 3 images (PNG, JPG, WebP)
        </div>
    </div>

    <div class="composer" id="composer">
        <div class="composer-inner">
            <!-- Thumbnail strip (outside, above composer) -->
            <div class="thumbnail-strip" id="thumbnail-strip"></div>
            <form id="query-form" class="composer-form">
                <button type="button" class="composer-plus" id="composer-plus" aria-label="Attach image">+</button>
                <textarea name="query" placeholder="Inquiry anything" class="composer-input" rows="1" autocomplete="off"></textarea>
                <button type="submit" class="composer-send" aria-label="Send">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </button>
            </form>
        </div>
    </div>

    <!-- Hidden file input for image upload -->
    <input type="file" id="image-input" accept="image/*" multiple style="display:none">

    <aside class="panel" id="panel">
        <div class="panel-header">
            <span id="panel-title">SOURCES</span>
            <button class="panel-close" id="panel-close-btn">&#10005;</button>
        </div>
        <div id="panel-content" class="panel-content"></div>
    </aside>

    <div class="toast" id="toast"></div>
</div>
{% endblock %}