{% extends "base.html" %}
{% block content %}
<div class="app">
    <header class="topbar">
        <div class="workspace-selector"
             id="workspace-selector"
             role="button"
             tabindex="0"
             data-all='{{ workspaces|tojson }}'
             data-active='{{ active_workspaces|tojson }}'>
            <span class="workspace-dot" id="workspace-dot"></span>
            <span class="workspace-label" id="workspace-label"></span>
            <svg class="workspace-caret" width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2.5 4 L5 6.5 L7.5 4"/></svg>
        </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 files or folders here
        </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">
                    <svg class="composer-plus-icon"
                         width="24"
                         height="24"
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         aria-hidden="true"
                         focusable="false">
                        <path d="M12 5v14"/>
                        <path d="M5 12h14"/>
                    </svg>
                </button>
                <textarea name="query" placeholder="Ask 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 class="visually-hidden" type="file" id="image-input" accept="image/*" multiple>
    <input class="visually-hidden" type="file" id="folder-input" webkitdirectory directory multiple>

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

    <div class="toast" id="toast"></div>

    <dialog id="delete-workspace-dialog" class="workspace-dialog">
        <form id="delete-workspace-form"
              hx-post="/web/workspaces/delete"
              hx-swap="none">
            <h3 class="workspace-dialog-title">Delete workspace</h3>
            <p class="workspace-dialog-text">This will permanently delete all data for</p>
            <p class="workspace-dialog-name" id="delete-workspace-name"></p>
            <p class="workspace-dialog-text">Type the workspace name to confirm</p>
            <input type="hidden" name="workspace_name" id="delete-workspace-id">
            <input type="text"
                   name="confirm_name"
                   id="delete-workspace-confirm-input"
                   class="workspace-dialog-input"
                   autocomplete="off"
                   placeholder="Type workspace name...">
            <div class="workspace-dialog-actions">
                <button type="button"
                        class="workspace-dialog-cancel"
                        data-action="close-delete-workspace-dialog">Cancel</button>
                <button type="submit"
                        id="delete-workspace-confirm-btn"
                        class="workspace-dialog-delete"
                        disabled>Delete</button>
            </div>
        </form>
    </dialog>
</div>
{% endblock %}