engelsystem/resources/views/pages/messages/conversation.twig

{% extends "layouts/app.twig" %}
{% import 'macros/base.twig' as m %}
{% import 'macros/form.twig' as f %}

{% block title %}{{ __('message.title') }}: {{ other_user.name }}{% endblock %}

{% block content %}
    <div class="container">
        <div class="page-header">
            <h1>
                {{ __('message.title') }}: {{ m.user(other_user, {'show_pronoun_if_configured': true}) }}
            </h1>
        </div>

        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <div class="row conversation">
                    {% for msg in messages %}
                        {% if msg.user_id == other_user.id %}
                            <div class="col-12">
                                <div>
                                    <div class="message alert alert-secondary position-relative">
                                        <div>{{ msg.text | nl2br }}</div>
                                        <div class="text-end">
                                            <small
                                                class="opacity-75">{{ msg.created_at.format(__('Y-m-d H:i')) }}</small>
                                        </div>
                                        {% if msg.read == false %}
                                            <span class="position-absolute top-0 start-100 translate-middle-x p-2
                                            bg-danger rounded-circle"></span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <div class="message alert alert-primary">
                                        <div>{{ msg.text | nl2br }}</div>
                                        <div class="text-end">

                                            <form action="{{ url('/messages/' ~ other_user.id ~ '/' ~ msg.id) }}"
                                                  enctype="multipart/form-data" method="post">
                                                {{ csrf() }}
                                                <small class="opacity-75">{{ msg.created_at }}</small>
                                                {{ f.submit(m.icon('trash'), {'btn_type': 'primary', 'size': 'sm'}) }}
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>

                <form action="" enctype="multipart/form-data" method="post">
                    {{ csrf() }}

                    <div class="input-group">
                        <textarea class="form-control" id="text" name="text" required="" rows="2"></textarea>
                        {{ f.submit(m.icon('send-fill')) }}
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}