{# ============================================================
    OSEP — Modal CRUD événement calendrier
    Variables attendues (toutes optionnelles) :
      - creatableTypes  : liste { value, label, icon }
      - organizationUsers OU projectUsers : liste User (pour le select multi)
      - organizationProjects : liste Project (uniquement sur calendrier global)
      - currentProject  : si défini, le projet est verrouillé sur celui-ci
    ============================================================ #}
<div class="modal fade osep-modal" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="eventModalLabel">
					<i class="mdi mdi-calendar-edit-outline"></i>
					<span id="eventModalTitle">Nouvel événement</span>
				</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
			</div>

			<form id="eventForm" novalidate>
				<input type="hidden" id="eventId" name="id" value="">

				{# Bandeau "Décision requise" — affiché conditionnellement par le JS #}
				<div id="eventDecisionBanner" class="osep-event-banner osep-event-banner--decision" hidden>
					<i class="mdi mdi-alert-circle-outline"></i>
					<div>
						<strong>Décision requise</strong>
						<small>Les utilisateurs assignés recevront cet événement comme une demande de décision dans leur dashboard projet.</small>
					</div>
				</div>

				<div class="modal-body osep-event-form-body">

					{# ---------- Type d'événement (select avec icônes) ---------- #}
					<div class="osep-form-row">
						<label for="eventType" class="osep-form-label">Type d'événement *</label>
						<select class="osep-input osep-select" id="eventType" name="type" required>
							{% if creatableTypes is defined %}
								{% for t in creatableTypes %}
									<option value="{{ t.value }}" data-icon="{{ t.icon }}">{{ t.label }}</option>
								{% endfor %}
							{% endif %}
						</select>
					</div>

					{# ---------- Titre ---------- #}
					<div class="osep-form-row">
						<label for="eventName" class="osep-form-label">Intitulé *</label>
						<input class="osep-input" type="text" id="eventName" name="title"
							placeholder="Ex : COPIL #3 — point d'avancement Q4"
							maxlength="200" required>
					</div>

					{# ---------- Projet (caché si on est sur un calendrier projet) ---------- #}
					{% if currentProject is defined and currentProject %}
						<input type="hidden" id="eventProjectId" name="projectId" value="{{ currentProject.id }}">
						<div class="osep-form-row">
							<label class="osep-form-label">Projet</label>
							<div class="osep-input osep-input--readonly">
								<i class="mdi mdi-folder-open-outline"></i>
								<strong>{{ currentProject.acronym }}</strong>
								<span class="osep-text-soft">— {{ currentProject.name }}</span>
							</div>
						</div>
					{% else %}
						<div class="osep-form-row">
							<label for="eventProjectId" class="osep-form-label">Projet *</label>
							<select class="osep-input osep-select" id="eventProjectId" name="projectId" required>
								<option value="">— Choisir un projet —</option>
								{% if organizationProjects is defined %}
									{% for p in organizationProjects %}
										<option value="{{ p.id }}">{{ p.acronym }} — {{ p.name }}</option>
									{% endfor %}
								{% endif %}
							</select>
						</div>
					{% endif %}

					{# ---------- Dates (début + fin) ---------- #}
					<div class="osep-form-row osep-form-row--two">
						<div>
							<label for="eventStartDate" class="osep-form-label">Date de début *</label>
							<input class="osep-input" type="date" id="eventStartDate" name="startDate" required>
						</div>
						<div>
							<label for="eventEndDate" class="osep-form-label">Date de fin</label>
							<input class="osep-input" type="date" id="eventEndDate" name="endDate">
						</div>
					</div>

					{# ---------- Heures (début + fin) ---------- #}
					<div class="osep-form-row osep-form-row--two">
						<div>
							<label for="eventStartTime" class="osep-form-label">Heure début</label>
							<input class="osep-input" type="time" id="eventStartTime" name="startTime">
						</div>
						<div>
							<label for="eventEndTime" class="osep-form-label">Heure fin</label>
							<input class="osep-input" type="time" id="eventEndTime" name="endTime">
						</div>
					</div>

					{# ---------- Lieu ---------- #}
					<div class="osep-form-row">
						<label for="eventLocation" class="osep-form-label">Lieu</label>
						<input class="osep-input" type="text" id="eventLocation" name="location"
							placeholder="Salle de réunion, lien visio, ville…"
							maxlength="255">
					</div>

					{# ---------- Description ---------- #}
					<div class="osep-form-row">
						<label for="eventDescription" class="osep-form-label">Description / contexte</label>
						<textarea class="osep-input" id="eventDescription" name="description"
							rows="4"
							placeholder="Ordre du jour, contexte de la décision, points clés à aborder…"></textarea>
					</div>

					{# ---------- Utilisateurs assignés ---------- #}
					<div class="osep-form-row">
						<label for="eventUsers" class="osep-form-label">
							Utilisateurs assignés
							<span class="osep-form-hint--inline">(laisser vide = visible par tous)</span>
						</label>
						<select class="osep-input osep-select" id="eventUsers" name="userIds[]" multiple>
							{% set _users = projectUsers is defined ? projectUsers : (organizationUsers ?? []) %}
							{% for u in _users %}
								<option value="{{ u.id }}">
									{{ u.firstName }} {{ u.lastName }}{% if u.fonction %} — {{ u.fonction }}{% endif %}
								</option>
							{% endfor %}
						</select>
						<small class="osep-form-hint">
							<i class="mdi mdi-information-outline"></i>
							Si aucun utilisateur n'est sélectionné, l'événement sera visible par <strong>tous les membres du projet</strong>.
							Sinon, il sera visible <strong>uniquement par les utilisateurs assignés</strong>.
						</small>
					</div>
				</div>

				<div class="modal-footer">
					<button type="button" class="osep-btn osep-btn--danger osep-btn--sm" id="deleteEvent" hidden>
						<i class="mdi mdi-trash-can-outline"></i>
						Supprimer
					</button>
					<button type="button" class="osep-btn osep-btn--ghost osep-btn--sm" data-bs-dismiss="modal">
						Annuler
					</button>
					<button type="button" class="osep-btn osep-btn--primary osep-btn--sm" id="saveEvent">
						<i class="mdi mdi-content-save-outline"></i>
						Enregistrer
					</button>
				</div>
			</form>
		</div>
	</div>
</div>