{% load static %}
<section data-controller="message">
    {% for message in messages %}
    <article class="message" id="message--{{ message.id }}" data-message-target="item">
        <h2 class="message__author">{{ message.author }}</h2>
        <p class="message__text">{{ message.text }}</p
        >
        <footer class="message__footer">
            <time class="message__created_at">{{ message.created_at }}</time>
            <div class="message__controls">
                <button data-action="click->message#displayUpdateForm" class="button messages__update" data-id="{{ message.id }}">Edit</button>
                <button data-action="click->message#deleteMessage" class="button messages__delete" data-id="{{ message.id }}">Delete</button>
            </div>
        </footer>
    </article>
    {% endfor %}
    <div id="paginator" data-message-target="paginator" data-page="{{ page }}" data-total-pages="{{ total_pages }}"></div>
</section>