{% extends theme("layout.html") %}
{% block content %}
{% from theme('_macros/navigation.html') import navlink with context %}

<ol class="breadcrumb flaskbb-breadcrumb bg-light">
    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
    <li class="breadcrumb-item"><a href="{{ url_for('user.profile', username=current_user.username) }}">{{ current_user.username }}</a></li>
    <li class="breadcrumb-item active">{% trans %}Private Message{% endtrans %}</li>
</ol>

<div class="row">
    <div class="col-sm-3 col-md-2">
        <div class="sidebar">
            <ul class="nav sidenav">
                <div class="sidenav-btn">
                    <a href="{{ url_for('conversations_bp.new_conversation') }}" class="btn btn-success">{% trans %}New Message{% endtrans %}</a>
                </div>
                {{ navlink('conversations_bp.inbox', _('Inbox')) }}
                {{ navlink('conversations_bp.sent', _('Sent')) }}
                {{ navlink('conversations_bp.drafts', _('Drafts')) }}
                {{ navlink('conversations_bp.trash', _('Trash')) }}
            </ul>
        </div><!--/.sidebar -->
    </div><!--/.col-sm-3 -->
    {# replaced by the htmx requests of the conversation list and the reply form #}
    <div class="col-sm-9 col-md-10" id="message-content">
        {% block message_content %}{% endblock %}
    </div><!--/.col-sm-9 -->
</div><!--/.row -->
{% endblock %}

{% block scripts %}
<script>
    // Reply conversation. delegated, so it keeps working on the messages htmx
    // swapped in after a reply was sent
    document.addEventListener("click", (event) => {
        const button = event.target.closest(".reply-btn");
        if (!button) return;
        event.preventDefault();

        const editor = document.querySelector(".flaskbb-editor");
        fetch(button.dataset.rawUrl)
            .then((response) => response.text())
            .then((data) => {
                editor.value = data;
                editor.selectionStart = editor.selectionEnd = editor.value.length;
                editor.scrollTop = editor.scrollHeight;
                window.location.href = "#content";
            })
            .catch((error) => {
                console.error("something bad happened", error);
            });
    });
</script>
{% endblock %}