johanleroy/ENI-sortir
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into Olivier

Browse Source
This commit is contained in:
Olivier PARPAILLON
2024-11-27 13:18:57 +01:00
parent 31b11d0544 8b5533526e
commit 806a023670
16 changed files with 499 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
templates/main/base.html.twig
View File

@@ -2,6 +2,7 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}&#128227; Sortie.com &#128266;{% endblock %}</title>
<link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
{% block stylesheets %}

158
templates/main/header.html.twig
View File

@@ -2,61 +2,123 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
<style>
#dropdown {
z-index: 10;
}
</style>
{% endblock %}
</head>
<body class="bg-gray-100">
<nav class="flex justify-between items-center py-4 px-6 shadow-md bg-gradient-to-r from-[#2A8D57] via-[#008167] to-[#1B5667]">
<!-- Logo et Titre -->
<a href="/" class="flex items-center space-x-3">
<img src="{{ asset('img/logo.svg') }}" alt="Logo" class="h-10">
<h3 class="text-3xl text-white font-bold">Sortie</h3>
</a>
<body>
<div class="mx-auto">
<nav class="flex justify-between items-center py-4 shadow-md" style="background-color: #2a8d57;">
<!-- Titre + Logo -->
<a href="/">
<div class="flex items-center space-x-3 pl-4">
<h3 class="text-3xl text-white font-bold">Sortie</h3>
<img src="{{ asset('img/logo.svg') }}" alt="Logo" class="h-10">
<!-- Navigation principale -->
<ul class="hidden md:flex space-x-6 text-white font-medium">
<li>
<a href="{{ path('home') }}"
class="{% if app.request.attributes.get('_route') == 'home' %}font-bold underline{% endif %} hover:text-gray-200">
Accueil
</a>
</li>
<li>
<a href="{{ path('sortie_list') }}"
class="{% if app.request.attributes.get('_route') == 'sortie_list' %}font-bold underline{% endif %} hover:text-gray-200">
Liste des sorties
</a>
</li>
<li>
<a href="{{ path('participants') }}"
class="{% if app.request.attributes.get('_route') == 'participants' %}font-bold underline{% endif %} hover:text-gray-200">
Participants
</a>
</li>
</ul>
<!-- Profil utilisateur -->
<div class="relative">
{% if app.user %}
<button id="profile-menu" class="flex items-center space-x-2 focus:outline-none">
<img src="{{ profile.fileName ? asset('upload/image/profile/' ~ profile.fileName) : asset('upload/image/profile/default.png') }}"
class="w-10 h-10 rounded-full border-2 border-white">
<span class="text-white font-medium hidden md:inline">Profil</span>
</button>
<!-- Menu déroulant -->
<div id="dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white shadow-md rounded-lg">
<ul class="py-2 text-gray-700">
<li><a href="{{ path('profile_view', {'uuid': app.user.idParticipant}) }}" class="block px-4 py-2 hover:bg-gray-100">Mon profil</a></li>
<li><a href="{{ path('dashboard', {'uuid': app.user.idParticipant}) }}" class="block px-4 py-2 hover:bg-gray-100">Dashboard</a></li>
{% if 'ROLE_ADMIN' in app.user.roles %}
<li><a href="{{ path('app_admin') }}" class="block px-4 py-2 hover:bg-gray-100">Administration</a></li>
{% endif %}
<li><a href="{{ path('app_logout') }}" class="block px-4 py-2 hover:bg-gray-100">Se déconnecter</a></li>
</ul>
</div>
</a>
<div class="relative">
{% if app.user %}
<div id="menu-button" class="w-full flex justify-center">
<div class="relative">
<img src="{{ profile.fileName ? asset('upload/image/profile/' ~ profile.fileName) : asset('upload/image/profile/default.png') }}"
class="w-16 h-16 rounded-full mr-4" />
</div>
</div>
{% else %}
<button style="height:64px; width: 64px;" id="menu-button" class="p-2 pr-4 text-gray-700 font-bold hover:text-blue-500 focus:outline-none">
<img alt="burger-menu" src="{{ asset('img/burger-menu.svg') }}">
</button>
{% endif %}
<ul id="navbar" class="hidden absolute top-20 right-0 w-max bg-white shadow-md p-4 pl-2 flex-col space-y-4">
{% if app.user %}
<li><a href="{{ path('home') }}" class="text-gray-700 font-bold hover:text-blue-500">Accueil</a></li>
<li><a href="{{ path('sortie_list') }}" class="text-gray-700 font-bold hover:text-blue-500">Liste des sorties</a></li>
<li><a href="{{ path('participants') }}" class="text-gray-700 font-bold hover:text-blue-500">Participants</a></li>
<li><a href="{{ path('profile_view', {'uuid': app.user.idParticipant}) }}" class="text-gray-700 font-bold hover:text-blue-500">Mon profile</a></li>
{% endif %}
{% if app.user and ('ROLE_ADMIN' in app.user.roles) %}
<li><a href="{{ path('app_admin') }}" class="text-gray-700 font-bold hover:text-blue-500">Administration</a></li>
{% endif %}
{% if app.user %}
<li><a href="{{ path('app_logout') }}" class="text-gray-700 font-bold hover:text-blue-500">Se déconnecter</a></li>
{% else %}
<li><a href="{{ path('app_register') }}" class="text-gray-700 font-bold hover:text-blue-500">S'inscrire</a></li>
<li><a href="{{ path('app_login') }}" class="text-gray-700 font-bold hover:text-blue-500">Se connecter</a></li>
{% endif %}
</ul>
</div>
</nav>
{% else %}
<div class="space-x-4">
<a href="{{ path('app_login') }}" class="text-white hover:text-gray-200">Se connecter</a>
<a href="{{ path('app_register') }}" class="text-white hover:text-gray-200">S'inscrire</a>
</div>
{% endif %}
</div>
<!-- Menu mobile -->
<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</nav>
<!-- Menu mobile (hidden par défaut) -->
<div id="mobile-menu" class="hidden bg-gradient-to-r from-[#2A8D57] via-[#008167] to-[#1B5667] text-white py-4 md:hidden">
<ul class="space-y-4 px-6">
<li><a href="{{ path('home') }}" class="block hover:text-gray-200">Accueil</a></li>
<li><a href="{{ path('sortie_list') }}" class="block hover:text-gray-200">Liste des sorties</a></li>
<li><a href="{{ path('participants') }}" class="block hover:text-gray-200">Participants</a></li>
</ul>
</div>
</body>
{% block content %}
{% endblock %}
<!-- Scripts -->
<script>
document.getElementById('menu-button').addEventListener('click', function () {
const navbar = document.getElementById('navbar');
navbar.classList.toggle('hidden');
});
</script>
// Toggle menu pour mobile
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
</html>
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Toggle menu déroulant pour le profil
const profileMenuButton = document.getElementById('profile-menu');
const dropdown = document.getElementById('dropdown');
if (profileMenuButton) {
profileMenuButton.addEventListener('click', (event) => {
event.stopPropagation(); // Empêche la fermeture immédiate lorsque le bouton est cliqué
dropdown.classList.toggle('hidden');
});
// Fermer le menu lorsqu'on clique ailleurs
document.addEventListener('click', (event) => {
if (!dropdown.classList.contains('hidden')) {
const isClickInsideMenu = dropdown.contains(event.target) || profileMenuButton.contains(event.target);
if (!isClickInsideMenu) {
dropdown.classList.add('hidden');
}
}
});
}
</script>
</body>
</html>

144
templates/main/home.html.twig Normal file
View File

@@ -0,0 +1,144 @@
{% extends 'main/base.html.twig' %}
{% block head %}
<head>
<meta charset="UTF-8">
{% block title %}&#128227; Sortie.com {{ profile.pseudo }} &#128266;{% endblock %}
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
.swiper-container {
width: 100%;
height: 500px; /* Ajustez selon vos besoins */
}
.swiper-slide {
position: relative;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem;
}
.swiper-slide .text-overlay {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 20px;
border-radius: 0.5rem;
text-align: left;
}
.swiper-slide .text-overlay h3 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.swiper-slide .text-overlay p {
font-size: 1rem;
line-height: 1.5;
}
.swiper-button-next,
.swiper-button-prev {
color: white;
}
.swiper-pagination-bullet {
background: #22c55e; /* Vert Tailwind (green-500) */
}
.swiper-pagination-bullet-active {
background: #16a34a; /* Vert plus foncé pour le point actif */
}
</style>
{% endblock %}
</head>
{% endblock %}
{% block content %}
<div class="container mx-auto py-10">
<!-- Section carrousel -->
<h2 class="text-4xl font-bold text-center mb-8">Dernières sorties</h2>
<div class="w-full relative">
<div class="swiper default-carousel swiper-container">
<div class="swiper-wrapper">
{% if lastSorties is not empty %}
{% for sortie in lastSorties %}
<div class="swiper-slide">
{% if sortie.image %}
<img src="{{ asset('img/sortie/' ~ sortie.image) }}" alt="{{ sortie.nom }}">
{% else %}
<img src="{{ asset('img/default-placeholder.png') }}" alt="Image par défaut">
{% endif %}
<div class="text-overlay">
<a href="{{ path('sortie_view', {'id': sortie.idSortie}) }}"
class="text-2xl font-bold text-green-600 hover:text-green-700 transition-colors">
{{ sortie.nom }}
</a>
<p>Date : {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}</p>
<p>{{ sortie.infosSortie|slice(0, 150) ~ '...' }}</p>
</div>
</div>
{% endfor %}
{% else %}
<p class="text-center text-gray-500">Aucune sortie récente disponible.</p>
{% endif %}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Section des événements terminés -->
<div class="mt-12">
<h2 class="text-3xl font-bold text-center mb-6">Événements terminés</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% if pastEvents is not empty %}
{% for event in pastEvents %}
<a href="{{ path('sortie_view', {'id': event.idSortie}) }}"
class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl hover:scale-105 transition-transform duration-300 ease-in-out">
{% if event.image %}
<img src="{{ asset('img/sortie/' ~ event.image) }}" alt="{{ event.nom }}" class="w-full h-40 object-cover rounded-md mb-4">
{% else %}
<img src="{{ asset('img/default-placeholder.png') }}" alt="Image par défaut" class="w-full h-40 object-cover rounded-md mb-4">
{% endif %}
<h3 class="text-xl font-bold text-green-600">{{ event.nom }}</h3>
<p class="text-gray-600 text-sm">Terminé le : {{ event.dateHeureDebut|date('d/m/Y H:i') }}</p>
<p class="text-gray-500 mt-2 text-sm">{{ event.infosSortie|slice(0, 100) ~ '...' }}</p>
</a>
{% endfor %}
{% else %}
<p class="text-center text-gray-500">Aucun événement terminé disponible.</p>
{% endif %}
</div>
</div>
<!-- Inclure les fichiers JavaScript Swiper -->
{% block javascripts %}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".default-carousel", {
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
{% endblock %}
{% endblock %}

2
templates/main/inscription.html.twig
View File

@@ -1,4 +1,4 @@
{% extends 'main/base.html.twig' %}
{% extends 'base.html.twig' %}
{% block head %}
<head>
<meta charset="UTF-8">

67
templates/sortie/create.html.twig
View File

@@ -46,6 +46,7 @@
.modern-button svg {
margin-right: 0.5rem;
}
#add-lieu-modal .bg-white {
max-width: 80%;
max-height: 90%;
@@ -60,8 +61,7 @@
<div class="w-full max-w-3xl bg-white p-8 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Créer une sortie</h1>
{{ form_start(form, { 'attr': { 'class': 'space-y-6' } }) }}
{{ form_start(form, { 'attr': { 'class': 'space-y-6', 'enctype': 'multipart/form-data' } }) }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
@@ -94,10 +94,29 @@
<label for="sortie_infosSortie">Description et infos</label>
{{ form_widget(form.infosSortie, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500' } }) }}
</div>
<div class="form-group">
<label for="sortie_imageFile">Image de la sortie</label>
{{ form_widget(form.imageFile, { 'attr': { 'class': 'block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500', 'onchange': 'previewImage(event)' } }) }}
<small class="text-gray-500">Formats acceptés : JPG, PNG (max. 5 Mo).</small>
{% if sortie and sortie.image %}
<div class="mt-4">
<img id="image-preview" src="{{ asset('img/sortie/' ~ sortie.image) }}" alt="Image prévisualisée" class="w-full h-auto rounded-lg border border-gray-300">
</div>
{% else %}
<div class="mt-4">
<img id="image-preview" src="" alt="Aucune image sélectionnée" class="w-full h-auto rounded-lg border border-gray-300 hidden">
</div>
{% endif %}
<button type="button" id="generate-image" class="modern-button mt-2">
Générer une image
</button>
</div>
</div>
<div class="space-y-4">
<div class="form-group">
<label for="sortie_lieu">Lieu</label>
<div class="flex items-center space-x-2">
@@ -131,7 +150,6 @@
<label class="block text-sm font-medium text-gray-700">Longitude :</label>
<span id="longitude-value" class="block w-full p-3 border border-gray-300 rounded-lg bg-gray-100">Renseigner avec le lieu</span>
</div>
</div>
</div>
@@ -148,30 +166,29 @@
</div>
</div>
<div id="add-lieu-modal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden">
<div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl">
<h2 class="text-xl font-bold mb-4">Ajouter un lieu</h2>
<div class="form-group mb-4">
<label for="lieu-nom" class="block text-sm font-medium text-gray-700">Nom du lieu</label>
<input type="text" id="lieu-nom" class="block w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Nom du lieu" />
<div id="lieu-nom-error" class="text-sm text-red-500 mt-1 hidden"></div>
</div>
<div id="map" class="w-full h-96 mb-4 rounded-lg"></div>
<div class="flex justify-end space-x-4">
<button type="button" id="cancel-add-lieu" class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300">Annuler</button>
<button type="button" id="save-lieu" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300">Enregistrer</button>
</div>
</div>
</div>
{% block javascripts %}
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.umd.js"></script>
{{ encore_entry_script_tags('add-lieu') }}
{{ encore_entry_script_tags('show-lieu') }}
<script>
function previewImage(event) {
const input = event.target;
const preview = document.getElementById('image-preview');
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = function (e) {
preview.src = e.target.result;
preview.classList.remove('hidden');
};
reader.readAsDataURL(input.files[0]);
} else {
preview.src = '';
preview.classList.add('hidden');
}
}
</script>
{% endblock %}
{% endblock %}
{% endblock %}

81
templates/sortie/list.html.twig
View File

@@ -1,32 +1,20 @@
{% extends 'main/base.html.twig' %}
{% block head %}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des sorties</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
<style>
.pin-creee {
background-color: #4CAF50;
}
.pin-ouverte {
background-color: #2196F3;
}
.pin-archivee {
background-color: #FF9800;
}
.pin-en-cours {
background-color: #FFC107;
}
.pin-terminee {
background-color: #9E9E9E;
}
.pin-annulee {
background-color: #f44336;
}
.pin-default {
background-color: #E0E0E0;
}
.pin-creee { background-color: #4CAF50; }
.pin-ouverte { background-color: #2196F3; }
.pin-archivee { background-color: #FF9800; }
.pin-en-cours { background-color: #FFC107; }
.pin-terminee { background-color: #9E9E9E; }
.pin-annulee { background-color: #f44336; }
.pin-default { background-color: #E0E0E0; }
.pin {
display: inline-block;
width: 12px;
@@ -43,15 +31,17 @@
<div class="container mx-auto p-4 sm:p-6 bg-gray-50 rounded-lg shadow-lg mt-4 sm:mt-6">
<h1 class="text-2xl sm:text-3xl font-bold text-center text-gray-800 mb-6 sm:mb-8">🎉 Liste des sorties</h1>
<!-- Formulaire de recherche -->
<form method="GET" action="{{ path('home') }}" class="bg-white rounded-lg shadow-md p-4 mb-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
<!-- Recherche -->
<div>
<label for="search" class="block text-sm font-medium text-gray-700">🔍 Recherche</label>
<input type="text" name="search" id="search" value="{{ app.request.query.get('search', '') }}"
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="Nom de la sortie">
</div>
<!-- Site -->
<div>
<label for="site" class="block text-sm font-medium text-gray-700">📍 Site</label>
<select name="site" id="site" class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
@@ -63,13 +53,13 @@
{% endfor %}
</select>
</div>
<!-- Date de début -->
<div>
<label for="start_date" class="block text-sm font-medium text-gray-700">📅 Date de début</label>
<input type="date" name="start_date" id="start_date" value="{{ app.request.query.get('start_date', '') }}"
class="block w-full mt-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
</div>
<!-- Date de fin -->
<div>
<label for="end_date" class="block text-sm font-medium text-gray-700">📅 Date de fin</label>
<input type="date" name="end_date" id="end_date" value="{{ app.request.query.get('end_date', '') }}"
@@ -77,6 +67,7 @@
</div>
</div>
<!-- Options supplémentaires -->
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="flex items-center">
<input type="checkbox" name="organisateur" id="organisateur" value="1"
@@ -84,21 +75,18 @@
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
<label for="organisateur" class="ml-2 text-sm text-gray-700">Sorties dont je suis l'organisateur/trice</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="inscrit" id="inscrit" value="1"
{% if app.request.query.get('inscrit') %}checked{% endif %}
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
<label for="inscrit" class="ml-2 text-sm text-gray-700">Sorties auxquelles je suis inscrit/e</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="non_inscrit" id="non_inscrit" value="1"
{% if app.request.query.get('non_inscrit') %}checked{% endif %}
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
<label for="non_inscrit" class="ml-2 text-sm text-gray-700">Sorties auxquelles je ne suis pas inscrit/e</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="passees" id="passees" value="1"
{% if app.request.query.get('passees') %}checked{% endif %}
@@ -107,6 +95,7 @@
</div>
</div>
<!-- Bouton de filtrage -->
<div class="mt-6 flex justify-end">
<button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600">
🔎 Filtrer
@@ -114,6 +103,7 @@
</div>
</form>
<!-- Liste des sorties -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
<a href="/sortie/creates" class="hidden sm:block">
<div class="bg-white rounded-lg shadow-md p-4 text-center">
@@ -126,30 +116,25 @@
<div class="bg-white rounded-lg shadow-md p-4">
<div class="flex items-center mb-2">
<div class="pin
{% if sortie.etat.libelle == 'Créée' %}
pin-creee
{% elseif sortie.etat.libelle == 'Ouverte' %}
pin-ouverte
{% elseif sortie.etat.libelle == 'Archivée' %}
pin-archivee
{% elseif sortie.etat.libelle == 'En cours' %}
pin-en-cours
{% elseif sortie.etat.libelle == 'Terminée' %}
pin-terminee
{% elseif sortie.etat.libelle == 'Annulée' %}
pin-annulee
{% else %}
pin-default
{% endif %}
{% if sortie.etat.libelle == 'Créée' %} pin-creee
{% elseif sortie.etat.libelle == 'Ouverte' %} pin-ouverte
{% elseif sortie.etat.libelle == 'Archivée' %} pin-archivee
{% elseif sortie.etat.libelle == 'En cours' %} pin-en-cours
{% elseif sortie.etat.libelle == 'Terminée' %} pin-terminee
{% elseif sortie.etat.libelle == 'Annulée' %} pin-annulee
{% else %} pin-default {% endif %}
"></div>
<h2 class="text-lg font-semibold text-gray-800">{{ sortie.nom }}</h2>
</div>
<p class="mt-2 text-gray-600">
<strong>Date de début :</strong> {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}<br>
<strong>Durée :</strong> {{ sortie.duree }} minutes<br>
<strong>Inscriptions max :</strong> {{ sortie.nbInscriptionsMax }}<br>
<strong>Infos :</strong> {{ sortie.infosSortie }}
</p>
{% if sortie.image %}
<img src="{{ asset('img/sortie/' ~ sortie.image) }}" alt="{{ sortie.nom }}" class="w-full h-48 object-cover rounded-lg mb-4">
{% endif %}
<p class="mt-2 text-gray-600">
<strong>Date de début :</strong> {{ sortie.dateHeureDebut|date('d/m/Y H:i') }}<br>
<strong>Durée :</strong> {{ sortie.duree }} minutes<br>
<strong>Inscriptions max :</strong> {{ sortie.nbInscriptionsMax }}<br>
<strong>Infos :</strong> {{ sortie.infosSortie }}
</p>
</div>
</a>
{% else %}