{% if groupedMilestones is not empty %}
<form id="milestone-targets-form">
    <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>
            {% set allMonths = [] %}
            {% for group in groupedMilestones %}
                {% for month in group.milestones|keys %}
                    {% if month not in allMonths %}
                        {% set allMonths = allMonths|merge([month]) %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
            {% set allMonths = allMonths|sort %}
            {% for month in allMonths %}
                <th class="text-center">{{ month|date('M')|trans }} {{ month|date('Y') }}</th>
            {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for group in groupedMilestones %}
            <tr>
                <td class="sticky-col bg-white" style=" z-index: 5;">{{ group.activity.name }}</td>
                {% for month in allMonths %}
                    <td class="p-0 text-center align-middle">
                        {% set milestonesInMonth = group.milestones[month]|default([]) %}
                        {% if milestonesInMonth is not empty %}
                            {% for milestone in milestonesInMonth %}
                                <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 ?? 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 ['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"
                class="btn width-xl rounded-pill btn-primary float-end"
                {% if isReadOnly %}disabled{% endif %}>
            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 %}