{% 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, {'pronoun': true}) }}
            </h1>
        </div>

        <div class="row">
            <div class="col-12 col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
                <div class="row conversation mb-2">
                    {% for msg in messages %}
                        {% set own_message = msg.user_id == user.id %}
                        <div class="col-12"{% if loop.last %} id="newest"{% endif %}>
                            <div class="d-flex{% if own_message %} justify-content-end{% endif %}">
                                <div class="card {% if own_message %}text-bg-primary{% else %}text-bg-secondary{% endif %} mb-3">
                                    <div class="card-body">
                                        <p class="card-text">{{ msg.text | nl2br }}</p>
                                    </div>
                                    <div class="card-footer d-flex justify-content-end align-items-center fw-light">
                                        <small class="opacity-75">{{ msg.created_at.format(__('Y-m-d H:i')) }}</small>
                                        {% if own_message %}
                                            <form action="{{ url('/messages/' ~ other_user.id ~ '/' ~ msg.id) }}"
                                                enctype="multipart/form-data" method="post" class="ms-2"
                                            >
                                                {{ csrf() }}
                                                {{ f.submit(m.icon('trash'), {'btn_type': 'primary', 'size': 'sm'}) }}
                                            </form>
                                        {% endif %}
                                    </div>
                                    {% if not own_message and 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>
                    {% endfor %}
                </div>

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

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