{% load i18n phoxtail_design_tags %}
<div class="phoxtail-chat-history-overlay"
     data-modal-animation="slide-left">
    <div class="phoxtail-chat-history-drawer phoxtail-modal-drawer">
        <div class="phoxtail-bar-panel-header">
            <span class="phoxtail-bar-panel-title">{% translate "Chats" %}</span>
            <div class="phoxtail-chat-history-header-actions">
                <button type="button"
                        class="phoxtail-chat-history-new-btn"
                        onclick="window.phoxtailChat && window.phoxtailChat.newChat(); closeModalLevel1();"
                        title="{% translate "New Chat (N)" %}">
                    {% icon "plus" class="phoxtail-bar-btn-icon" %}
                    <span>{% translate "New Chat" %}</span>
                </button>
                <button type="button"
                        onclick="closeModalLevel1()"
                        class="phoxtail-bar-panel-close"
                        title="{% translate "Close" %}">
                    {% icon "close" class="phoxtail-bar-btn-icon" %}
                </button>
            </div>
        </div>
        <div class="phoxtail-chat-history-search">
            <div class="phoxtail-chat-history-search-wrap">
                <span class="phoxtail-chat-history-search-icon {% if query %}phoxtail-chat-history-hidden{% endif %}"
                      id="phoxtail-chat-history-search-icon">
                    {% icon "search" class="phoxtail-bar-btn-icon" %}
                </span>
                <button type="button"
                        id="phoxtail-chat-history-clear"
                        class="phoxtail-chat-history-clear {% if not query %}phoxtail-chat-history-hidden{% endif %}"
                        title="{% translate "Clear search" %}"
                        aria-label="{% translate "Clear search" %}">
                    {% icon "close" class="phoxtail-bar-btn-icon" %}
                </button>
                <input type="text"
                       id="phoxtail-chat-history-input"
                       name="q"
                       value="{{ query }}"
                       placeholder="{% translate "Search…" %}"
                       autocomplete="off"
                       class="phoxtail-chat-history-search-input"
                       hx-get="{% url 'phoxtail_agent:chat_history' %}"
                       hx-target="#phoxtail-chat-history-list"
                       hx-trigger="input changed delay:300ms"
                       hx-swap="innerHTML">
            </div>
        </div>
        <div class="phoxtail-chat-history-list" id="phoxtail-chat-history-list">
            {% include "phoxtail_agent/partials/chat_history_list.html" %}
        </div>
    </div>
</div>
<script>
(function () {
    var input = document.getElementById('phoxtail-chat-history-input');
    var clear = document.getElementById('phoxtail-chat-history-clear');
    var icon  = document.getElementById('phoxtail-chat-history-search-icon');
    if (!input) return;
    function syncVisibility() {
        var hasVal = input.value.length > 0;
        icon.classList.toggle('phoxtail-chat-history-hidden', hasVal);
        clear.classList.toggle('phoxtail-chat-history-hidden', !hasVal);
    }
    input.addEventListener('input', syncVisibility);
    if (clear) {
        clear.addEventListener('click', function () {
            input.value = '';
            syncVisibility();
            input.dispatchEvent(new Event('input', { bubbles: true }));
            input.focus();
        });
    }

    /* Close on mousedown outside drawer — but not when clicking inside the chatbot */
    setTimeout(function () {
        function onOutsideDown(e) {
            var drawer = document.querySelector('.phoxtail-chat-history-drawer');
            if (!drawer) { document.removeEventListener('mousedown', onOutsideDown); return; }
            if (drawer.contains(e.target)) return;
            var chatbot = document.getElementById('phoxtail-chatbot-drawer');
            if (chatbot && chatbot.contains(e.target)) return;
            if (document.body.hasAttribute('data-phoxtail-dragging')) return;
            function doClose() {
                closeModalLevel1();
                if (window.phoxtailChat) window.phoxtailChat.close();
            }
            // If target is draggable, defer: cancel close if drag starts, proceed on mouseup (click)
            if (e.target.closest && e.target.closest('[draggable="true"]')) {
                var _dragged = false;
                function _onDragStart() { _dragged = true; document.removeEventListener('mouseup', _onMouseUp); }
                function _onMouseUp() { document.removeEventListener('dragstart', _onDragStart); if (!_dragged) doClose(); }
                document.addEventListener('dragstart', _onDragStart, { once: true });
                document.addEventListener('mouseup', _onMouseUp, { once: true });
                return;
            }
            doClose();
        }
        document.addEventListener('mousedown', onOutsideDown);
    }, 0);
})();
</script>