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

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

{% block content %}
    <div class="container">
        <div class="page-header">
            <h1>
                {{ block('title') }}
            </h1>
        </div>
        <form action="" enctype="multipart/form-data" method="post">
            {{ csrf() }}
            <div class="row gx-2 mb-3">
                <div class="col-auto">
                    {{ f.select('user_id', users, null, null,
                        { 'class': 'pe-5', 'required': true, 'default_option': __('message.choose_angel') }) }}
                </div>
                <div class="col">
                    {{ f.submit(__('message.to_conversation'), {'btn_type': 'secondary'}) }}
                </div>
            </div>
        </form>

        <table class="table table-striped data">
            <thead>
            <tr>
                <th>{{ __('angel') }}</th>
                <th>{{ __('message.message') }}</th>
                <th>{{ __('date') }}</th>
            </tr>
            </thead>
            <tbody>
            {% for c in conversations %}
            <tr>
                <td>
                    {{ m.user(c.other_user, {'show_pronoun_if_configured': true, 'url': url('messages/' ~ c.other_user.id ~ '#newest')}) }}

                    {% if c.unread_messages > 0 %}
                        <span class="badge bg-danger">{{ c.unread_messages }}</span>
                    {% endif %}
                    </td>
                <td>
                    <a href="{{ url('messages/' ~ c.other_user.id ~ '#newest') }}">
                        {{ c.latest_message.text|length > 100 ? c.latest_message.text|slice(0, 100) ~ '…' : c.latest_message.text }}
                    </a>
                </td>
                <td>
                    {{ c.latest_message.created_at.format(__('Y-m-d H:i')) }}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

    </div>

{% endblock %}