120 lines
5.3 KiB
Twig
120 lines
5.3 KiB
Twig
{% extends 'main/base.html.twig' %}
|
|
|
|
{% block head %}
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Modifier la sortie</title>
|
|
{% block stylesheets %}
|
|
{{ encore_entry_link_tags('app') }}
|
|
{% endblock %}
|
|
</head>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto p-8 bg-white rounded-lg shadow-lg mt-8">
|
|
<h1 class="text-3xl font-extrabold text-center text-gray-800 mb-10">📝 Modifier la sortie</h1>
|
|
|
|
{{ form_start(form, { 'attr': { 'class': 'space-y-8' } }) }}
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<label for="nom" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
🎉 Nom de la sortie
|
|
</label>
|
|
{{ form_row(form.nom, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
|
</div>
|
|
<div>
|
|
<label for="dateHeureDebut" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
🕒 Date et heure de début
|
|
</label>
|
|
{{ form_row(form.dateHeureDebut, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<label for="duree" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
⏳ Durée (minutes)
|
|
</label>
|
|
{{ form_row(form.duree, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
|
</div>
|
|
<div>
|
|
<label for="dateLimiteInscription" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
📆 Date limite d'inscription
|
|
</label>
|
|
{{ form_row(form.dateLimiteInscription, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<label for="nbInscriptionsMax" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
👥 Nombre maximum d'inscriptions
|
|
</label>
|
|
{{ form_row(form.nbInscriptionsMax, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
|
</div>
|
|
<div>
|
|
<label for="infosSortie" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
📝 Informations complémentaires
|
|
</label>
|
|
{{ form_row(form.infosSortie, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<label for="lieu" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
📍 Lieu
|
|
</label>
|
|
{{ form_row(form.lieu, { 'attr': { 'class': 'w-full rounded-md border-gray-300 shadow focus:ring-blue-500 focus:border-blue-500' } }) }}
|
|
</div>
|
|
</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="max-w-xs 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="max-w-xs h-auto rounded-lg border border-gray-300 hidden">
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex justify-end mt-8 space-x-4">
|
|
<a href="{{ path('sortie_view', { id: sortie.getIdSortie() }) }}" class="btnAnnule">
|
|
❌ Annuler
|
|
</a>
|
|
<button type="submit" class="btnPrimary">
|
|
💾 Enregistrer
|
|
</button>
|
|
</div>
|
|
|
|
{{ form_end(form) }}
|
|
</div>
|
|
{% block javascripts %}
|
|
<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 %} |