{% extends "base.html" %}
{% block content %}
<div class="app"
     id="app"
     data-attachment-count-limit="{{ query_attachment_count_limit }}"
     data-attachment-image-max-bytes="{{ query_attachment_image_max_bytes }}"
     data-attachment-document-max-bytes="{{ query_attachment_document_max_bytes }}"
     data-attachment-extensions='{{ query_attachment_extensions|tojson }}'
     data-attachment-image-capability="{{ query_attachment_image_capability }}"
     data-attachment-image-limit="{{ query_attachment_image_limit }}">
    <nav id="chat-sidebar" aria-label="Conversations">
        <div class="conversation-top-row">
            <button id="new-conversation-btn" type="button">
                <svg class="new-chat-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
                </svg>
                New chat
            </button>
            <button id="conversation-sidebar-toggle"
                    type="button"
                    aria-label="Collapse conversations"
                    aria-controls="chat-sidebar">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <rect x="3" y="3" width="18" height="18" rx="2"/>
                    <path d="M9 3v18"/>
                    <path d="M14 10l-2 2 2 2"/>
                </svg>
            </button>
        </div>
        <conversation-list id="conversation-list" role="list" aria-live="polite"></conversation-list>
        <button id="delete-all-conversations-btn"
                type="button"
                aria-label="Delete all conversations">
            <span class="conversation-retention-note">Inactive conversations expire after 30 days.</span>
            <span class="conversation-delete-all-label" aria-hidden="true">Delete all conversations</span>
        </button>
    </nav>
    <div id="conversation-sidebar-backdrop" hidden></div>

    <header class="topbar">
        <button id="conversation-sidebar-open"
                type="button"
                aria-label="Open conversations"
                aria-controls="chat-sidebar">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="2"/>
                <path d="M9 3v18"/>
                <path d="M10 10l2 2-2 2"/>
            </svg>
        </button>
        <span class="topbar-scope-label">Search in:</span>
        <workspace-scope class="workspace-selector"
             id="workspace-selector"
             role="button"
             tabindex="0"
             aria-label="Choose search workspaces"
             data-all='{{ workspaces|tojson }}'
             data-primary="{{ primary_workspace }}"
             data-active='{{ active_workspaces|tojson }}'></workspace-scope>
        <div class="topbar-spacer"></div>
        <button class="topbar-btn" id="files-btn" type="button">Files</button>
        <div id="theme-control">
            <button id="theme-trigger"
                    type="button"
                    aria-label="Appearance"
                    title="Appearance"
                    aria-haspopup="menu"
                    aria-controls="theme-menu"
                    aria-expanded="false">
                <svg class="theme-icon theme-icon-moon"
                     width="17"
                     height="17"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="1.7"
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     aria-hidden="true">
                    <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
                </svg>
                <svg class="theme-icon theme-icon-sun"
                     width="17"
                     height="17"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="1.7"
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     aria-hidden="true">
                    <circle cx="12" cy="12" r="4" />
                    <path d="M12 2v2" />
                    <path d="M12 20v2" />
                    <path d="m4.93 4.93 1.41 1.41" />
                    <path d="m17.66 17.66 1.41 1.41" />
                    <path d="M2 12h2" />
                    <path d="M20 12h2" />
                    <path d="m6.34 17.66-1.41 1.41" />
                    <path d="m19.07 4.93-1.41 1.41" />
                </svg>
            </button>
            <div id="theme-menu" role="menu" aria-label="Appearance" hidden>
                <button type="button" role="menuitemradio" data-theme-value="system" aria-checked="true" tabindex="-1">
                    <span class="theme-menu-icon" aria-hidden="true">
                        <svg width="16"
                             height="16"
                             viewBox="0 0 24 24"
                             fill="none"
                             stroke="currentColor"
                             stroke-width="1.7"
                             stroke-linecap="round"
                             stroke-linejoin="round">
                            <rect width="20" height="14" x="2" y="3" rx="2" />
                            <line x1="8" x2="16" y1="21" y2="21" />
                            <line x1="12" x2="12" y1="17" y2="21" />
                        </svg>
                    </span>
                    <span class="theme-menu-label">System</span>
                    <span class="theme-menu-check" aria-hidden="true">✓</span>
                </button>
                <button type="button" role="menuitemradio" data-theme-value="light" aria-checked="false" tabindex="-1">
                    <span class="theme-menu-icon" aria-hidden="true">
                        <svg width="16"
                             height="16"
                             viewBox="0 0 24 24"
                             fill="none"
                             stroke="currentColor"
                             stroke-width="1.7"
                             stroke-linecap="round"
                             stroke-linejoin="round">
                            <circle cx="12" cy="12" r="4" />
                            <path d="M12 2v2" />
                            <path d="M12 20v2" />
                            <path d="m4.93 4.93 1.41 1.41" />
                            <path d="m17.66 17.66 1.41 1.41" />
                            <path d="M2 12h2" />
                            <path d="M20 12h2" />
                            <path d="m6.34 17.66-1.41 1.41" />
                            <path d="m19.07 4.93-1.41 1.41" />
                        </svg>
                    </span>
                    <span class="theme-menu-label">Light</span>
                    <span class="theme-menu-check" aria-hidden="true">✓</span>
                </button>
                <button type="button" role="menuitemradio" data-theme-value="dark" aria-checked="false" tabindex="-1">
                    <span class="theme-menu-icon" aria-hidden="true">
                        <svg width="16"
                             height="16"
                             viewBox="0 0 24 24"
                             fill="none"
                             stroke="currentColor"
                             stroke-width="1.7"
                             stroke-linecap="round"
                             stroke-linejoin="round">
                            <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
                        </svg>
                    </span>
                    <span class="theme-menu-label">Dark</span>
                    <span class="theme-menu-check" aria-hidden="true">✓</span>
                </button>
            </div>
        </div>
    </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 files">
                    <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" aria-label="Message" placeholder="Ask anything" class="composer-input" rows="1" autocomplete="off"></textarea>
                <button type="submit" class="composer-send" aria-label="Send">
                    <svg class="composer-send-icon composer-send-icon--send" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                    <svg class="composer-send-icon composer-send-icon--stop" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
                </button>
            </form>
        </div>
        <!-- Query attachments: current query images plus Composer documents. -->
         <input class="hidden" type="file" id="attachment-input"
             accept="{{ query_attachment_accept }}" multiple>
    </div>

    <input class="hidden" type="file" id="folder-input" webkitdirectory directory multiple>

    <aside class="panel" id="panel">
        <div class="panel-header">
            <span id="panel-title"></span>
            <button class="source-toggle-all" id="source-toggle-all-btn" type="button"
                    aria-pressed="false" hidden>Show all</button>
            <ingest-target class="ingest-target" id="ingest-target"></ingest-target>
            <button class="panel-close" id="panel-close-btn" type="button" aria-label="Close panel">&#10005;</button>
        </div>
        <div id="panel-content" class="panel-content"></div>
    </aside>
    <div id="panel-backdrop" hidden></div>

    <div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>

    <div class="notify-offer" id="notify-offer" role="group"
         aria-label="Answer notifications" hidden>
      <span class="notify-offer-text">Notify you when an answer finishes?</span>
      <button class="ui-btn" id="notify-offer-accept" type="button">Enable</button>
      <button class="ui-btn" id="notify-offer-decline" type="button">Not now</button>
    </div>

    <dialog id="delete-conversation-dialog"
            aria-labelledby="delete-conversation-title"
            aria-describedby="delete-conversation-message">
        <form method="dialog">
            <h2 id="delete-conversation-title">Delete conversation</h2>
            <p id="delete-conversation-message">This conversation and its history will be permanently deleted.</p>
            <p id="delete-conversation-draft-warning" hidden>Your unsent draft and attachments will also be discarded.</p>
            <div class="ui-dialog-actions">
                <button type="submit" value="cancel">Cancel</button>
                <button type="submit" value="delete" class="ui-dialog-danger">Delete</button>
            </div>
        </form>
    </dialog>

    <dialog id="delete-all-conversations-dialog"
            aria-labelledby="delete-all-conversations-title">
        <form method="dialog">
            <h2 id="delete-all-conversations-title">Delete all conversations?</h2>
            <p id="delete-all-conversations-draft-warning" hidden>Draft and attachments will also be deleted.</p>
            <div class="ui-dialog-actions">
                <button type="submit" value="cancel">Cancel</button>
                <button type="submit" value="delete-all" class="ui-dialog-danger">Delete all</button>
            </div>
        </form>
    </dialog>

    <dialog id="discard-draft-dialog" aria-labelledby="discard-draft-title">
        <form method="dialog">
            <h2 id="discard-draft-title">Discard draft?</h2>
            <p>Your unsent message and attachments will not move to another conversation.</p>
            <div class="ui-dialog-actions">
                <button type="submit" value="cancel">Keep editing</button>
                <button type="submit" value="discard">Discard and continue</button>
            </div>
        </form>
    </dialog>

    <dialog id="delete-workspace-dialog" class="workspace-dialog">
        <form id="delete-workspace-form">
            <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="ui-dialog-actions">
                <button type="button"
                        data-action="close-delete-workspace-dialog">Cancel</button>
                <button type="submit"
                        id="delete-workspace-confirm-btn"
                        class="ui-dialog-danger"
                        disabled>Delete</button>
            </div>
        </form>
    </dialog>
</div>
{% endblock %}