sweater/src/main/resources/templates/parts/messageList.ftl

<#include "security.ftl">
<#import "pager.ftl" as p>

<@p.pager url page! />
    <div class="row row-cols-1 row-cols-md-3 g-4" id="message-list">
        <#list page.content as message>
            <div class="col">
                <div class="card h-100" data-id="${message.id}"> <!-- h-100 делает карточки одинаковой высоты -->
                    <#if message.filename??>
                        <img src="/img/${message.filename}" class="card-img-top">
                    </#if>
                    <div class="card-body">
                        <span>${message.text}</span><br/>
                        <i>#${message.tag}</i>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <a href="/user-messages/${message.author.id}"> ${message.authorName} </a>
                        <#if message.author.id == currentUserId>
                            <a class="btn btn-primary btn-sm"
                               href="/user-messages/${message.author.id}?message=${message.id}">Edit</a>
                        </#if>
                    </div>
                </div>
            </div>
        <#else>
            <p>No messages found</p>
        </#list>
    </div>
<@p.pager url page />