{% if groupedMilestones is not empty %}
	<form id="milestone-targets-form" action="{{ url('milestone_targets_save', { id: project.id }) }}" method="post">
		<div class="table-responsive-horizontal">
			<table class="table bg-white rounded table-bordered fs-6">
				<thead class="table-light">
				<tr>
					<th class="sticky-col bg-white" style="width: 200px; z-index: 5;">Activité</th>
					{% for period in allPeriods %}
						<th class="text-center">{{ period.label }}</th>
					{% endfor %}
				</tr>
				</thead>
				<tbody>
				{% for group in groupedMilestones %}
					<tr>
						<td class="sticky-col bg-white" style="z-index: 5;">
							{% set activity = group.activity %}
							<span class="badge bg-soft-primary text-primary fw-normal">{{ activity.acronym }}</span>
							<span class="fw-bolder">{{ activity.name }}</span>
						</td>

						{% for period in allPeriods %}
							{% set milestonesInPeriod = group.milestones[period.key]|default([]) %}

							<td class="p-0 text-center align-middle">
								{% if milestonesInPeriod is not empty %}
									{% for milestone in milestonesInPeriod %}
										<div class="d-inline-flex align-items-center justify-content-center position-relative percent-input-wrapper">
											<input
													type="number"
													name="targets[{{ milestone.id }}]"
													class="form-control-plaintext text-end pe-2 m-1 no-spinner percent-input"
													value="{{ milestone.plannedProgress|number_format(0) }}"
													min="0" max="100" step="1"
													{% if project.status in ['in_execution','on_hold','completed'] %}disabled{% endif %}
											/>
											<span class="percent-sign">%</span>
										</div>
									{% endfor %}
								{% else %}
									<div class="text-muted text-center">–</div>
								{% endif %}
							</td>
						{% endfor %}
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>

		{% set isReadOnly = project.status in ['planned','followup_initiated','in_execution','on_hold','completed'] %}
		{% if isReadOnly %}
			<div class="alert bg-warning-subtle d-flex align-items-center justify-content-center gap-2 text-center mt-3 fw-semibold">
				<i class="mdi mdi-lock-alert me-2 fs-5"></i>
				Les cibles ne peuvent plus être modifiées car le projet est en cours d’exécution, en pause ou terminé.
			</div>
		{% endif %}

		<div class="text-end my-4">
			<button type="submit" id="milestone-targets-submit-btn" class="btn width-xl rounded-pill btn-primary float-end" {% if isReadOnly %}disabled{% endif %}>
				<i class="mdi mdi-check-bold me-2"></i>Enregistrer
			</button>
			<button class="btn btn-primary width-xl rounded-pill d-none" disabled type="button">
				<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
			</button>
		</div>
	</form>
{% else %}
	<div class="alert alert-secondary d-flex align-items-center justify-content-center text-center mt-4 p-5 rounded-4 border-0">
		<i class="mdi mdi-information-outline fs-2 me-3 text-secondary"></i>
		<div class="fs-5 text-secondary-emphasis">
			Aucun jalon n’a encore été défini pour ce projet.<br>
			<small class="text-muted">Ajoutez des jalons pour suivre l’avancement des activités.</small>
		</div>
	</div>
{% endif %}