{% set color = notification.color|default('secondary') %}
{% set icon = notification.icon|default('solar:bell-bing-line-duotone') %}
<tr id="notification_{{ notification.id }}" class="{{ not notification.lu ? 'table-light' : '' }}">
    <td>
        <a class="d-flex align-items-center gap-3 text-decoration-none text-body" href="{{ path('app_notification_open', {id: notification.id}) }}">
            <span class="flex-shrink-0 bg-{{ color }}-subtle rounded-circle round d-flex align-items-center justify-content-center fs-6 text-{{ color }}">
                <iconify-icon icon="{{ icon }}"></iconify-icon>
            </span>
            <span>
                <span class="fw-semibold d-block">{{ notification.titre }}</span>
                <span class="text-muted small">{{ notification.message }}</span>
            </span>
        </a>
    </td>
    <td><span class="badge bg-light text-dark">{{ notification.type }}</span></td>
    <td>{{ notification.createdAt ? notification.createdAt|date('d/m/Y H:i') : '-' }}</td>
    <td>
        {% if notification.lu %}
            <span class="badge bg-success-subtle text-success">Lue</span>
        {% else %}
            <span class="badge bg-primary-subtle text-primary">Non lue</span>
        {% endif %}
    </td>
    <td class="text-end">
        {% if notification.lu %}
            <form class="d-inline" method="post" action="{{ path('app_notification_mark_unread', {id: notification.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('notification_unread_' ~ notification.id) }}">
                <button class="btn btn-sm btn-outline-secondary" type="submit">Marquer non lue</button>
            </form>
        {% else %}
            <form class="d-inline" method="post" action="{{ path('app_notification_mark_read', {id: notification.id}) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('notification_read_' ~ notification.id) }}">
                <button class="btn btn-sm btn-outline-primary" type="submit">Marquer lue</button>
            </form>
        {% endif %}
    </td>
</tr>