{#
 # Chat Panel - Master-Detail Right Panel (Spec 030)
 #
 # Collapsible right-side panel for SMS conversations, used on both
 # Queue and Completed Buys screens. Contains:
 # - Toggle button (visible when collapsed)
 # - Conversation feed (All Conversations list)
 # - Thread conversation view (Syncfusion ChatUI)
 # - Composer with template picker + segment counter
 #
 # Requires: chat-panel.js, chat-feed.js, chat-segment-counter.js,
 #           chat-badge-manager.js, Syncfusion ChatUI
 #}

{# Backdrop for mobile overlay mode #}
<div class="chat-panel-backdrop" id="chatPanelBackdrop"></div>

{# Standalone chat toggle button - positioned by JS based on schedule panel presence #}
<button class="chat-toggle-fab" id="chatPanelToggle"
        title="Toggle Conversations">
    <i class="fa-solid fa-comments"></i>
    <span class="badge bg-danger rounded-pill chat-toggle-fab-badge" id="chatPanelToggleBadge"
          style="display:none;">0</span>
</button>

{# Main chat panel container #}
<div id="chatPanel" class="chat-panel collapsed">
    {# Panel header with title and close button #}
    <div class="chat-panel-header">
        <span class="chat-panel-title" id="chatPanelTitle">Conversations</span>
        <button class="chat-panel-back" id="chatPanelBack"
                style="display:none;" title="Back to conversations">
            <i class="fa-solid fa-arrow-left"></i>
        </button>
        <button class="chat-panel-mark-all-read" id="chatMarkAllRead"
                title="Mark all as read">
            <i class="fa-solid fa-check-double"></i>
        </button>
        <button class="chat-panel-close" id="chatPanelClose" title="Close panel">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>

    {# Panel body - switches between feed and conversation views #}
    <div class="chat-panel-body" id="chatPanelBody">
        {# Feed filter tabs (All / Unread / Unresponded) #}
        <div class="chat-feed-tabs" id="chatFeedTabs" role="tablist">
            <button class="chat-feed-tab active" data-filter="all" role="tab" aria-selected="true">
                All <span class="chat-feed-tab-badge" id="chatFeedBadgeAll"></span>
            </button>
            <button class="chat-feed-tab" data-filter="unread" role="tab" aria-selected="false">
                Unread <span class="chat-feed-tab-badge" id="chatFeedBadgeUnread"></span>
            </button>
            <button class="chat-feed-tab" data-filter="unresponded" role="tab" aria-selected="false">
                Unresponded <span class="chat-feed-tab-badge" id="chatFeedBadgeUnresponded"></span>
            </button>
        </div>

        {# Feed view (All Conversations list) #}
        <div id="chatFeedContainer" class="chat-panel-view chat-panel-view-feed">
            {# Populated by chat-feed.js #}
        </div>

        {# Thread conversation view #}
        <div id="chatThreadContainer" class="chat-panel-view chat-panel-view-thread" style="display:none;">
            {# Do Not Text banner (shown when customer is on DNT list) #}
            <div class="dnt-banner" id="chatDntBanner" style="display:none;">
                <i class="fa-solid fa-ban"></i>
                <span>This customer is on the Do Not Text list. Messaging is disabled.</span>
            </div>

            {# Syncfusion ChatUI mounts here #}
            <div id="chatUIContainer"></div>

            {# Freetext locked indicator (shown when staffCanFreetext is false) #}
            <div class="freetext-locked" id="chatFreetextLocked" style="display:none;">
                <div class="freetext-locked-message">
                    <i class="fa-solid fa-lock"></i>
                    <span>Freetext unlocks after the customer replies.</span>
                </div>
                <button class="chat-panel-template-btn freetext-locked-template-btn" id="chatTemplateLockedBtn">
                    <i class="fa-solid fa-message-lines"></i> Send a Template
                </button>
                {# Hidden input to hold template content for direct send when freetext is locked #}
                <input type="hidden" id="chatTemplateSendInput" value="">
            </div>

            {# Custom composer area (used instead of ChatUI's default footer) #}
            <div class="chat-panel-composer" id="chatComposerArea" style="display:none;">
                <div class="chat-panel-composer-actions" style="margin-bottom: 8px;">
                    <button class="chat-panel-template-btn" id="chatTemplateBtn">
                        <i class="fa-solid fa-message-lines"></i> Templates
                    </button>
                </div>
                <textarea id="chatMessageInput" class="form-control"
                          rows="2" placeholder="Type a message..."
                          maxlength="640"></textarea>
                <div class="chat-panel-composer-actions">
                    <span class="segment-counter" id="chatSegmentCounter">0/160 | 0 SMS</span>
                    <button class="chat-panel-send-btn" id="chatSendBtn" disabled>
                        <i class="fa-solid fa-paper-plane"></i> Send
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>