{% extends 'base.html.twig' %}

{% block title %}Évènements
{% endblock %}

{% block body %}
	<div class="p-4 max-w-5xl mx-auto space-y-6" data-controller="project-drawer">
		<div class="flex items-center justify-between">
			<h1 class="text-3xl font-bold">Évènements</h1>

			<a href="{{ path('app_project_new') }}" class="button-style brand-button-style">
				Ajouter un évènement
			</a>
		</div>

		<div class="flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-300px)]">
			{% for project in projects %}
				{{ component('Project:ProjectComponent', { projectId: project.id, key: project.id }) }}
			{% else %}
				<div class="rounded border border-gray-200 bg-white shadow-sm overflow-hidden px-4 py-2 text-center">
					Aucun évènement défini.
				</div>
			{% endfor %}
		</div>

		{% include "project/_show.html.twig" %}

		<div id="drawerOverlay" data-project-drawer-target="overlay" data-action="click->project-drawer#close" class="fixed inset-0 bg-black/40 hidden z-40"></div>
	</div>
{% endblock %}