{% load static %}
{% load static_v %}
<div class="chat-widget">
    <button id="chat-fab" class="chat-fab" aria-label="{{ t.chat_open_assistant }}">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
    </button>

    <div id="chat-panel" class="chat-panel">
        <div class="chat-panel-header">
            <div>
                <strong>{{ t.chat_title }}</strong>
                <p id="chat-mode-label">{{ t.chat_subtitle }}</p>
            </div>
            <div style="display: flex; gap: 8px; align-items: center;">
                <button type="button" id="chat-mode-switch-btn" class="chat-reset-btn" title="{{ t.chat_mode_change }}" style="display: none;">{{ t.chat_mode }}</button>
                <button type="button" id="chat-memory-btn" class="chat-memory-btn" title="{{ t.chat_clear_memory_title }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
                    {{ t.chat_memory }}
                </button>
                <button type="button" id="chat-reset-btn" class="chat-reset-btn" title="{{ t.chat_clear_history_title }}">{{ t.chat_reset }}</button>
                <button type="button" id="chat-close-btn" class="chat-close-btn" aria-label="{{ t.chat_close }}">&times;</button>
            </div>
        </div>

        <div id="chat-mode-picker" class="chat-mode-picker">
            <p>{{ t.chat_choose_mode }}</p>
            <button type="button" class="chat-mode-btn" data-mode="purchase">
                <strong><i class="bi bi-cart3"></i> {{ t.chat_mode_purchase }}</strong>
                <span>{{ t.chat_mode_purchase_desc }}</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="plan">
                <strong><i class="bi bi-calendar2-week"></i> {{ t.chat_mode_plan }}</strong>
                <span>{{ t.chat_mode_plan_desc }}</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="market">
                <strong><i class="bi bi-graph-up"></i> {{ t.chat_mode_market }}</strong>
                <span>{{ t.chat_mode_market_desc }}</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="location">
                <strong><i class="bi bi-geo-alt"></i> {{ t.chat_mode_location }}</strong>
                <span>{{ t.chat_mode_location_desc }}</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="help">
                <strong><i class="bi bi-question-circle"></i> {{ t.chat_mode_help }}</strong>
                <span>{{ t.chat_mode_help_desc }}</span>
            </button>
        </div>

        <div id="chat-messages" class="chat-messages" style="display: none;"></div>
        <div id="chat-checkout-bar" class="chat-checkout-bar">
            <span class="chat-checkout-count">{{ t.chat_items_in_cart }}</span>
            <a href="{% url 'market:cart' %}" class="chat-checkout-link">{{ t.chat_go_to_checkout }}</a>
        </div>
        <form id="chat-form" class="chat-input-row" style="display: none;">
            <input type="text" id="chat-input" placeholder="{{ t.chat_type_message }}" autocomplete="off">
            <button type="submit" aria-label="{{ t.chat_send }}">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M22 2 11 13M22 2 15 22l-4-9-9-4 20-7z"/></svg>
            </button>
        </form>
    </div>
</div>
<script>
    window.CHAT_I18N = {
        chooseMode: "{{ t.chat_choose_mode|escapejs }}",
        itemsInCart: "{{ t.chat_items_in_cart|escapejs }}",
        vehicleIconsUrl: "{% static_v 'js/vehicle-icons.js' %}",
        cartTitle: "{{ t.chat_cart_title|escapejs }}",
        subtotalLabel: "{{ t.chat_subtotal_label|escapejs }}",
        orderScheduledTitle: "{{ t.chat_order_scheduled_title|escapejs }}",
        pickerLabel: "{{ t.chat_picker_label|escapejs }}",
        deliveryDateLabel: "{{ t.chat_delivery_date_label|escapejs }}",
        quickDeliveryLabel: "{{ t.chat_quick_delivery_label|escapejs }}",
        feeLabel: "{{ t.chat_fee_label|escapejs }}",
        deliveryFeeLabel: "{{ t.schedule_delivery_fee|escapejs }}",
        pickingFeeLabel: "{{ t.schedule_picking_fee|escapejs }}",
        packageFeeLabel: "{{ t.schedule_package_fee|escapejs }}",
        totalLabel: "{{ t.chat_total_label|escapejs }}",
        viewOrderLabel: "{{ t.chat_view_order_label|escapejs }}",
        errorNoLocation: "{{ t.chat_error_no_location|escapejs }}",
        errorEmptyCart: "{{ t.chat_error_empty_cart|escapejs }}",
        errorNoPicker: "{{ t.chat_error_no_picker|escapejs }}",
        errorB2bNotSupported: "{{ t.chat_error_b2b_not_supported|escapejs }}",
        errorHomeNotSet: "{{ t.chat_error_home_not_set|escapejs }}",
        errorBusinessNotSet: "{{ t.chat_error_business_not_set|escapejs }}",
        awaitingPayment: "{{ t.order_awaiting_payment|escapejs }}",
        totalDue: "{{ t.order_total_due|escapejs }}",
        paymentSendToOne: "{{ t.payment_send_to_one|escapejs }}",
        paymentNoMethods: "{{ t.payment_no_methods|escapejs }}",
        paymentStepPay: "{{ t.payment_step_pay|escapejs }}",
        paymentStepScreenshot: "{{ t.payment_step_screenshot|escapejs }}",
        paymentStepSend: "{{ t.payment_step_send|escapejs }}",
        paymentSendProofBtn: "{{ t.payment_send_proof_btn|escapejs }}",
        greetings: {
            purchase: "{{ t.chat_greeting_purchase|escapejs }}",
            plan: "{{ t.chat_greeting_plan|escapejs }}",
            market: "{{ t.chat_greeting_market|escapejs }}",
            location: "{{ t.chat_greeting_location|escapejs }}",
            help: "{{ t.chat_greeting_help|escapejs }}"
        }
    };
</script>
<script src="{% static_v 'js/chat-widget.js' %}"></script>