63 lines
3.1 KiB
Twig
63 lines
3.1 KiB
Twig
{% extends "layouts/app.twig" %}
|
|
{% import 'macros/base.twig' as m %}
|
|
{% import 'macros/form.twig' as f %}
|
|
|
|
{% block title %}{{ __('message.title') }}: {{ other_user.displayName }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>
|
|
{{ m.button(m.icon('chevron-left'), url('/messages'), null, 'sm', __('general.back')) }}
|
|
{{ __('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(__('general.datetime')) }}</small>
|
|
{% if own_message %}
|
|
<form action="{{ url('/messages/' ~ other_user.id ~ '/' ~ msg.id) }}"
|
|
enctype="multipart/form-data" method="post" class="ms-2"
|
|
>
|
|
{{ csrf() }}
|
|
{{ f.delete(null, {'btn_type': 'sm btn-danger'}) }}
|
|
</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">
|
|
{{ f.textarea(
|
|
'text',
|
|
__('message.message'),
|
|
{'required': true, 'rows': 3, 'label_hidden': true, 'no_div': true}
|
|
) }}
|
|
{{ f.submit(m.icon('send-fill')) }}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|