{% load phoxtail_design_tags phoxtail_streams_tags static %}
{% if user.is_superuser %}
{% url 'wagtailadmin_home' as admin_home %}
{% url 'phoxtail_core:modal_level_1' as chat_history_modal_url %}
{% url 'dashboard:index' as site_dashboard_url %}
{% url 'phoxtail_agent:chat_history' as chat_history_url %}
{% url 'phoxtail_agent:media_picker' as media_picker_url %}
{% url 'phoxtail_agent:model_picker_panel' as model_picker_url %}
<link rel="stylesheet" href="{% static 'phoxtail_cms/css/phoxtail_bar.css' %}">
{% if perms.phoxtail_agent.access_chatbot %}
<link rel="stylesheet" href="{% static 'phoxtail_agent/css/chatbot.css' %}">
{% endif %}
{% if media_picker_url %}
<link rel="stylesheet" href="{% static 'phoxtail_agent/css/media_picker.css' %}">
{% endif %}

<script type="application/json" id="phoxtail-bar-manifest">
{% if page %}{"id": {{ page.id }}, "title": "{{ page.title|escapejs }}", "type": "{{ page.content_type.app_label }}.{{ page.content_type.model }}", "slug": "{{ page.slug }}", "locale": "{{ page.locale.language_code }}", "live": {{ page.live|yesno:"true,false" }}, "view_draft_url": "{{ admin_home }}pages/{{ page.id }}/view_draft/"}{% else %}{"id": null}{% endif %}
</script>

<div id="phoxtail-bar"
     {% if media_picker_url %}data-media-picker-url="{{ media_picker_url }}" data-media-picker-modal-url="{{ chat_history_modal_url }}"{% endif %}>
    <div class="phoxtail-bar-dock">
        {% if page %}
        <div class="phoxtail-bar-page-info">
            <span class="phoxtail-bar-page-title" title="{{ page.title }}">{{ page.title|truncatechars:22 }}</span>
            <span class="phoxtail-bar-sep">·</span>
            <span class="phoxtail-bar-type">{{ page.content_type.model }}</span>
            <span class="phoxtail-bar-sep">·</span>
            <span class="phoxtail-bar-live-dot phoxtail-bar-live-dot--{% if page.live %}on{% else %}off{% endif %}" title="{% if page.live %}live{% else %}draft{% endif %}"></span>
            <span class="phoxtail-bar-sep">·</span>
            <span class="phoxtail-bar-locale">{{ page.locale.language_code }}</span>
        </div>
        <div class="phoxtail-bar-divider"></div>
        {% endif %}
        <div class="phoxtail-bar-actions">
            {% if media_picker_url %}
            <button type="button"
                    id="phoxtail-bar-media-btn"
                    class="phoxtail-bar-btn phoxtail-bar-media-btn"
                    title="Menu &amp; Media (M)"
                    aria-expanded="false">
                {% icon "menu" class="phoxtail-bar-btn-icon" %}
            </button>
            {% endif %}
            {% if perms.phoxtail_agent.access_chatbot %}
            <button type="button"
                    id="phoxtail-bar-chatbot-btn"
                    class="phoxtail-bar-btn"
                    title="Chat (C)"
                    aria-expanded="false">
                {% icon "chat" class="phoxtail-bar-btn-icon" %}
            </button>
            {% endif %}
            <button type="button"
                    id="phoxtail-bar-actions-btn"
                    class="phoxtail-bar-btn"
                    title="Actions (A)"
                    aria-haspopup="menu"
                    aria-expanded="false">
                {% icon "more_horiz" class="phoxtail-bar-btn-icon" %}
            </button>
        </div>
    </div>

    <div class="phoxtail-bar-panel phoxtail-bar-actions-panel" id="phoxtail-bar-actions-panel">
        <div class="phoxtail-bar-panel-header">
            <span class="phoxtail-bar-panel-title">Actions</span>
            <button type="button" id="phoxtail-bar-actions-close" class="phoxtail-bar-panel-close" title="Close">
                {% icon "close" class="phoxtail-bar-btn-icon" %}
            </button>
        </div>
        <div class="phoxtail-bar-panel-body">
            {% if page %}
            <button type="button"
                    id="phoxtail-bar-publish-btn"
                    class="phoxtail-bar-actions-item"
                    role="menuitem"
                    title="Publish (P)">
                {% icon "cloud_upload" class="phoxtail-bar-row-icon" %}
                <div class="phoxtail-bar-row-info">
                    <span class="phoxtail-bar-row-type">Publish</span>
                    <span class="phoxtail-bar-row-meta">Make this page live</span>
                </div>
            </button>
            {% if page.live %}
            <button type="button"
                    id="phoxtail-bar-unpublish-btn"
                    class="phoxtail-bar-actions-item"
                    role="menuitem"
                    title="Unpublish (U)">
                {% icon "cloud_off" class="phoxtail-bar-row-icon" %}
                <div class="phoxtail-bar-row-info">
                    <span class="phoxtail-bar-row-type">Unpublish</span>
                    <span class="phoxtail-bar-row-meta">Take this page offline</span>
                </div>
            </button>
            {% endif %}
            <div class="phoxtail-bar-sep-line"></div>
            <a href="{{ admin_home }}pages/{{ page.id }}/edit/"
               id="phoxtail-bar-edit-btn"
               class="phoxtail-bar-actions-item"
               role="menuitem"
               title="Edit page (E)">
                {% icon "edit" class="phoxtail-bar-row-icon" %}
                <div class="phoxtail-bar-row-info">
                    <span class="phoxtail-bar-row-type">Edit page</span>
                    <span class="phoxtail-bar-row-meta">Open in page editor</span>
                </div>
            </a>
            <div class="phoxtail-bar-sep-line"></div>
            {% endif %}
            <a href="{{ admin_home }}"
               id="phoxtail-bar-admin-btn"
               class="phoxtail-bar-actions-item"
               role="menuitem"
               title="Admin Dashboard (D)">
                {% icon "settings" class="phoxtail-bar-row-icon" %}
                <div class="phoxtail-bar-row-info">
                    <span class="phoxtail-bar-row-type">Admin Dashboard</span>
                    <span class="phoxtail-bar-row-meta">Go to admin dashboard</span>
                </div>
            </a>
            {% if site_dashboard_url %}
            <a href="{{ site_dashboard_url }}"
               id="phoxtail-bar-dashboard-btn"
               class="phoxtail-bar-actions-item"
               role="menuitem"
               title="Site Dashboard (S)">
                {% icon "browse" class="phoxtail-bar-row-icon" %}
                <div class="phoxtail-bar-row-info">
                    <span class="phoxtail-bar-row-type">Site Dashboard</span>
                    <span class="phoxtail-bar-row-meta">Go to frontend dashboard</span>
                </div>
            </a>
            {% endif %}
        </div>
    </div>
</div>

{% if perms.phoxtail_agent.access_chatbot %}
<div id="phoxtail-chatbot-drawer"
     aria-label="Chatbot"
     role="complementary"
     data-chat-history-url="{{ chat_history_url }}"
     data-model-picker-url="{{ model_picker_url }}">
    <div class="phoxtail-chatbot-resize-handle"
         id="phoxtail-chatbot-resize-handle"
         title="Drag to resize — double-click to reset"></div>
    <div class="phoxtail-chatbot-drawer-messages" id="phoxtail-chatbot-messages">
        {# In-flow topbar: scrolls away with the conversation instead of floating #}
        <div class="phoxtail-chatbot-topbar">
            <div class="phoxtail-chatbot-topbar-left">
                <button type="button"
                        id="phoxtail-chatbot-history-btn"
                        class="phoxtail-chatbot-topbar-history"
                        title="Chat history (H)"
                        onclick="window.phoxtailChat && window.phoxtailChat.toggleHistory()">
                    {% icon "menu" class="phoxtail-bar-btn-icon" %}
                </button>
                <button type="button"
                        id="phoxtail-chatbot-newchat-btn"
                        class="phoxtail-chatbot-topbar-history"
                        title="New chat (N)"
                        onclick="window.phoxtailChat && window.phoxtailChat.newChat();">
                    {% icon "plus" class="phoxtail-bar-btn-icon" %}
                </button>
            </div>
            <div class="phoxtail-chatbot-topbar-left">
                <button type="button"
                        id="phoxtail-chatbot-expand-btn"
                        class="phoxtail-chatbot-topbar-history"
                        title="Expand (E)">
                    {% icon "open_in_full" class="phoxtail-bar-btn-icon" %}
                </button>
                <button type="button" id="phoxtail-chatbot-drawer-close" class="phoxtail-chatbot-topbar-close" title="Close (C)">
                    {% icon "close" class="phoxtail-bar-btn-icon" %}
                </button>
            </div>
        </div>
        <div class="phoxtail-chatbot-empty-state" id="phoxtail-chatbot-empty">
            <img src="{% static 'phoxtail_core/phoxtail/logo/symbol-on-light.svg' %}" class="phoxtail-chatbot-empty-logo phoxtail-chatbot-empty-logo--light" alt="Phoxtail">
            <img src="{% static 'phoxtail_core/phoxtail/logo/symbol-on-dark.svg' %}" class="phoxtail-chatbot-empty-logo phoxtail-chatbot-empty-logo--dark" alt="Phoxtail">
        </div>
    </div>
    <form class="phoxtail-chatbot-compose" id="phoxtail-chatbot-form" autocomplete="off">
        <div class="phoxtail-bar-panel phoxtail-chatbot-blocks-panel phoxtail-chatbot-model-panel" id="phoxtail-model-picker-panel">
            <div class="phoxtail-bar-panel-header">
                <span class="phoxtail-bar-panel-title">
                    {% icon "cognition" class="phoxtail-bar-btn-icon" %}
                    Inference
                </span>
                <button type="button" id="phoxtail-model-picker-close" class="phoxtail-bar-panel-close" title="Close">
                    {% icon "close" class="phoxtail-bar-btn-icon" %}
                </button>
            </div>
            <div class="phoxtail-bar-search-wrap">
                <span class="phoxtail-bar-search-icon"
                      id="phoxtail-model-search-icon" aria-hidden="true">
                    {% icon "search" class="phoxtail-bar-btn-icon" %}
                </span>
                <button type="button"
                        id="phoxtail-model-search-clear"
                        class="phoxtail-bar-search-clear phoxtail-bar-hidden"
                        title="Clear search"
                        aria-label="Clear search">
                    {% icon "close" class="phoxtail-bar-btn-icon" %}
                </button>
                <input type="text"
                       id="phoxtail-model-search"
                       name="q"
                       placeholder="Search models…"
                       autocomplete="off"
                       class="phoxtail-bar-search-input"
                       hx-get="{{ model_picker_url }}"
                       hx-trigger="input changed delay:250ms, search"
                       hx-target="#phoxtail-model-picker-body"
                       hx-include="this">
            </div>
            <div class="phoxtail-bar-panel-body" id="phoxtail-model-picker-body"></div>
        </div>
        {% if page %}
        <div class="phoxtail-bar-panel phoxtail-chatbot-blocks-panel" id="phoxtail-bar-blocks-panel">
            <div class="phoxtail-bar-panel-header">
                <span class="phoxtail-bar-panel-title">
                    Blocks
                    <span class="phoxtail-bar-badge" id="phoxtail-bar-blocks-count">{{ page.body|length }}</span>
                </span>
                <button type="button" id="phoxtail-bar-panel-close" class="phoxtail-bar-panel-close" title="Close">
                    {% icon "close" class="phoxtail-bar-btn-icon" %}
                </button>
            </div>
            {# id lets page-swapping UIs replace the rows out-of-band; row     #}
            {# handlers are delegated to the panel, so a body swap is safe.    #}
            <div class="phoxtail-bar-panel-body" id="phoxtail-bar-blocks-body">
                <div class="phoxtail-bar-page-row" data-phoxtail-bar-copy="page" draggable="true">
                    {% icon "web" class="phoxtail-bar-row-icon" %}
                    <div class="phoxtail-bar-row-info">
                        <span class="phoxtail-bar-row-type">{{ page.title|truncatechars:28 }}</span>
                        <span class="phoxtail-bar-row-meta">{{ page.content_type.model }} · #{{ page.id }} · {{ page.locale.language_code }} · {% if page.live %}live{% else %}draft{% endif %}</span>
                    </div>
                    <button type="button" class="phoxtail-bar-copy-btn" title="Copy page context">
                        {% icon "content_copy" class="phoxtail-bar-btn-icon" %}
                    </button>
                    <button type="button" class="phoxtail-bar-add-btn" title="Add to chat">
                        {% icon "plus" class="phoxtail-bar-btn-icon phoxtail-add-btn-icon-add" %}
                        {% icon "remove" class="phoxtail-bar-btn-icon phoxtail-add-btn-icon-remove" %}
                    </button>
                </div>
                <div class="phoxtail-bar-sep-line"></div>
                {% for block in page.body %}
                {% effective_variant block.value block.block_type as variant %}
                <div class="phoxtail-bar-block-row"
                     tabindex="0"
                     draggable="true"
                     data-phoxtail-bar-copy="block"
                     data-phoxtail-bar-uuid="{{ block.id }}"
                     data-phoxtail-bar-type="{{ block.block_type }}"
                     {% if variant %}data-phoxtail-bar-variant-id="{{ variant.id }}" data-phoxtail-bar-variant-identifier="{{ variant.identifier }}"{% endif %}>
                    {% icon "layers" class="phoxtail-bar-row-icon" %}
                    <div class="phoxtail-bar-row-info">
                        <span class="phoxtail-bar-row-type">{{ block.block_type }}</span>
                        {% if variant %}<span class="phoxtail-bar-row-meta">{{ variant.identifier }}</span>{% endif %}
                    </div>
                    <button type="button" class="phoxtail-bar-copy-btn" title="Copy block context">
                        {% icon "content_copy" class="phoxtail-bar-btn-icon" %}
                    </button>
                    <button type="button" class="phoxtail-bar-add-btn" title="Add to chat">
                        {% icon "plus" class="phoxtail-bar-btn-icon phoxtail-add-btn-icon-add" %}
                        {% icon "remove" class="phoxtail-bar-btn-icon phoxtail-add-btn-icon-remove" %}
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        <textarea
            id="phoxtail-chatbot-input"
            class="phoxtail-chatbot-input"
            placeholder="Chat with Phoxtail…"
            rows="1"
            aria-label="Message"></textarea>
        <div class="phoxtail-chatbot-compose-actions">
            <div class="phoxtail-chatbot-compose-actions-left">
                {% if page %}
                <button type="button"
                        id="phoxtail-bar-blocks-btn"
                        class="phoxtail-chatbot-compose-action-btn"
                        title="Blocks (B)"
                        aria-expanded="false">
                    {% icon "layers" class="phoxtail-bar-btn-icon" %}
                </button>
                {% endif %}
                {% if media_picker_url %}
                <button type="button"
                        id="phoxtail-chatbot-media-btn"
                        class="phoxtail-chatbot-compose-action-btn phoxtail-bar-media-btn"
                        title="Menu &amp; Media (M)"
                        onclick="window.phoxtailChat && window.phoxtailChat.toggleMedia()">
                    {% icon "menu" class="phoxtail-bar-btn-icon" %}
                </button>
                {% endif %}
                <button type="button"
                        id="phoxtail-model-picker-btn"
                        class="phoxtail-chatbot-compose-action-btn phoxtail-chatbot-model-btn"
                        title="Model (I)"
                        aria-expanded="false">
                    {% icon "cognition" class="phoxtail-bar-btn-icon" %}
                    <span id="phoxtail-model-picker-label" class="phoxtail-model-picker-label"></span>
                </button>
            </div>
            <button type="button"
                    class="phoxtail-chatbot-stop-btn"
                    title="Stop generation">
                {% icon "stop_fill" class="phoxtail-bar-btn-icon" %}
            </button>
            <button type="submit" class="phoxtail-chatbot-send-btn" title="Send (Enter)">
                {% icon "arrow_upward" class="phoxtail-bar-btn-icon" %}
            </button>
        </div>
        <div class="phoxtail-chatbot-chips" id="phoxtail-chatbot-chips" style="display:none"></div>
    </form>
</div>

<div id="phoxtail-chip-icons" hidden aria-hidden="true">
    <span data-chip-icon="image">{% icon "image" class="phoxtail-chip-icon" %}</span>
    <span data-chip-icon="video">{% icon "videocam" class="phoxtail-chip-icon" %}</span>
    <span data-chip-icon="audio">{% icon "music_note" class="phoxtail-chip-icon" %}</span>
    <span data-chip-icon="document">{% icon "draft" class="phoxtail-chip-icon" %}</span>
    <span data-chip-icon="block">{% icon "layers" class="phoxtail-chip-icon" %}</span>
    <span data-chip-icon="page">{% icon "web" class="phoxtail-chip-icon" %}</span>
</div>
{% endif %}

<script src="{% static 'phoxtail_cms/js/phoxtail_bar.js' %}"></script>
{% if media_picker_url %}
<script src="{% static 'phoxtail_agent/js/media_picker.js' %}"></script>
{% endif %}
{% endif %}