{% extends '@TigrisBase/layout.html.twig' %}

{% block main %}
<h1>{{ 'notification.yours'|trans }}</h1>
<tigris-data-list route="tigris_base_notification_list" v-slot="{loadData, entities, filters, totalCount, begin, end, sort}">
<div id="notification-list">
    <ul class="list-group notification-list list-group-flush">
        <li v-for="notification in entities" :key="notification.id" class="list-group-item" :class="{unread: !notification.readed}">
            <div class="d-flex">
                <div class="flex-shrink-0" v-if="notification.icon">
                    <img :src="'/'+notification.icon" class="me-3 notification-icon" :alt="notification.title">
                </div>
                <div class="flex-grow-1 ms-3">
                    <h5 class="mt-0" v-if="notification.title">${notification.title}</h5>
                    <span class="text-muted">${ $filters.formatDate(notification.date, 'fromNow')}</span>
                    <div class="my-2">${notification.content}</div>
                    <a v-for="button in notification.buttons" :key="button.label" class="btn btn-sm btn-primary" :href="button.url">${button.label}</a>
                </div>
            </div>
        </li>
    </ul>
    <button type="button" class="btn btn-block btn-light" v-on:click="more()">{{ 'notification.more'|trans }}</button>
</div>
</tigris-data-list>
{% endblock %}