{% load i18n %}
<div class="modal fade bp-chat-modal" id="bpChatModal" tabindex="-1" aria-hidden="true" data-chat-modal>
    <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down bp-chat-dialog">
        <div class="modal-content bp-chat-surface">
            <div class="modal-header bp-chat-header">
                <div class="bp-chat-header__title">
                    <span class="bp-chat-header__icon" aria-hidden="true"><i class="fas fa-comments"></i></span>
                    <span class="bp-chat-header__text">{% trans "Conditional offer chat" %}</span>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>

            <div class="modal-body bp-chat-body">
                <div class="bp-chat-summary" data-chat-summary></div>

                <div class="alert alert-warning d-none bp-chat-status" role="status" data-chat-status></div>

                <div class="bp-chat-actions alert alert-secondary d-none" 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="bp-chat-action-buttons">
                            <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 class="bp-chat-message-list" data-chat-messages></div>
            </div>

            <div class="modal-footer bp-chat-footer">
                <form class="bp-chat-form" data-chat-form>
                    {% csrf_token %}
                    <label for="bpChatInput" class="visually-hidden">{% trans "Message" %}</label>
                    <textarea
                        id="bpChatInput"
                        class="form-control bp-chat-input"
                        rows="2"
                        maxlength="2000"
                        data-chat-input
                        placeholder="{% trans 'Type your message...' %}"
                        required
                    ></textarea>
                    <button type="submit" class="btn btn-primary bp-chat-send">
                        <i class="fas fa-paper-plane"></i>
                        <span class="d-none d-sm-inline ms-1">{% trans "Send" %}</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
