{% load i18n %}
<div class="modal fade" id="bpChatModal" tabindex="-1" aria-hidden="true" data-chat-modal>
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mb-0">
                    <i class="fas fa-comments me-2"></i>{% trans "Conditional offer chat" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <div class="bp-chat-summary small text-muted mb-3" data-chat-summary></div>
                <div class="alert alert-warning d-none" role="status" data-chat-status></div>
                <div class="bp-chat-message-list" data-chat-messages></div>
                <div class="bp-chat-actions alert alert-secondary d-none mt-3" data-chat-actions>
                    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2">
                        <div class="small" data-chat-action-status></div>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-success btn-sm" data-chat-accept>
                                <i class="fas fa-check me-1"></i>{% trans "Accept" %}
                            </button>
                            <button type="button" class="btn btn-outline-danger btn-sm" data-chat-reject>
                                <i class="fas fa-times me-1"></i>{% trans "Reject" %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <form class="bp-chat-form d-flex w-100 gap-2" data-chat-form>
                    {% csrf_token %}
                    <div class="flex-grow-1">
                        <label for="bpChatInput" class="visually-hidden">{% trans "Message" %}</label>
                        <textarea
                            id="bpChatInput"
                            class="form-control"
                            rows="2"
                            maxlength="2000"
                            data-chat-input
                            placeholder="{% trans 'Type your message...' %}"
                            required
                        ></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane me-1"></i>{% trans "Send" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
