{% extends 'layout/content.html.twig' %}

{% block stylesheets %}{% endblock %}

{% block javascripts %}{% endblock %}

{% block breadcrumb %}
	<nav aria-label="breadcrumb">
		<ol class="breadcrumb bg-white px-3 py-2 rounded shadow-sm rounded-pill align-items-center">
			<li class="breadcrumb-item d-flex align-items-center">
				<a href="{{ url('app_dashboard') }}" class="text-primary">
					<i class="fa fa-home me-1"></i>
					Accueil
				</a>
			</li>
			<li class="breadcrumb-item active" aria-current="page">
				<a href="{{ url('app_project_list') }}">Notifications</a>
			</li>
		</ol>
	</nav>
{% endblock %}

{% set hasSidebar = false %}
{% block sidebar %}{% endblock %}

{% set containerType = 'container' %}
{% block content %}
	<div class="row">
		<div class="col-12">
			<div class="d-flex justify-content-between align-items-center mb-3">
				<h4 class="mb-0">Mes notifications</h4>
				<form method="post" action="{{ path('app_in_app_notifications_mark_all_as_read') }}">
					<button type="submit" class="btn btn-sm rounded-4 waves-effect btn-primary">
						<i class="mdi mdi-check-all me-2"></i>
						Marquer toutes comme lues
					</button>
				</form>
			</div>

			{% if notifications is empty %}
				<div class="card card-body rounded-4 text-center p-3">Aucune notification disponible.</div>
			{% else %}
				<div class="list-group rounded-4">
					{% for notif in notifications %}
						<a href="{{ notif.subjectLink ?: '#' }}" class="list-group-item list-group-item-action py-2 px-3 d-flex gap-3 align-items-center {% if not notif.read %}bg-primary-subtle border-start border-primary-subtle{% endif %}">
							<div class="flex-shrink-0">
								<div class="rounded-circle bg-{{ notif.read ? 'secondary' : 'primary' }} d-flex align-items-center justify-content-center" style="width: 36px; height: 36px;">
									<i class="mdi {{ notif.icon ?: 'mdi-bell-ring-outline' }} text-white"></i>
								</div>
							</div>
							<div class="flex-grow-1">
								<div class="d-flex justify-content-between">
									<strong class="text-truncate">{{ notif.author ?: 'Système' }}</strong>
									<small class="text-muted">{{ notif.createdAt|date('d/m/Y H:i') }}</small>
								</div>
								<div class="text-muted small text-truncate">{{ notif.message }}</div>
								{% if not notif.read %}
									<small class="text-primary">Non lue</small>
								{% endif %}
							</div>
						</a>
					{% endfor %}
				</div>
			{% endif %}
		</div>
	</div>
{% endblock %}