{% load i18n interventions_tags short_name tz %}
{% if show_occupations %}
        <div id="section-occupations" class="card mb-4 mt-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>
                    {% translate "Occupations" %}
                    {% if occupations_required and not occupations %}
                        <span class="badge bg-warning text-dark ms-2" title="{% translate "Obligatoire pour terminer cette intervention corrective" %}">
                            <i class="bi bi-exclamation-triangle-fill"></i> {% translate "Obligatoire" %}
                        </span>
                    {% endif %}
                </h4>
                {% if can_manage_occupations %}
                    <button class="btn btn-light border-0 open-occupation-modal" title="{% translate "Ajouter" %}"
                        data-bs-toggle="modal" data-bs-target="#occupationModal">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </button>
                {% endif %}
            </div>
            <div class="card-body">
                <div id="occupationsAlertContainer" class="m-1"></div>
                <div id="occupationsContainer">
                    {% for occupation in occupations %}
                        <div id="occupation-{{ occupation.id }}"
                             class="occupation-item py-3 {% if not forloop.last %}border-bottom{% endif %}"
                             data-occupation-id="{{ occupation.id }}"
                             data-member-id="{{ occupation.member_id }}"
                             data-member-display="{{ occupation.member.name|escapejs }}"
                             data-minutes="{{ occupation.minutes }}"
                             data-created-at="{% if occupation.created_at %}{{ occupation.created_at|timezone:'Europe/Paris'|date:'Y-m-d\\TH:i:s' }}{% endif %}"
                             data-updated-at="{% if occupation.updated_at %}{{ occupation.updated_at|timezone:'Europe/Paris'|date:'Y-m-d\\TH:i:s' }}{% endif %}"
                             data-created-by-display="{{ occupation.created_by|short_name|default_if_none:''|escapejs }}"
                             data-updated-by-display="{{ occupation.updated_by|short_name|default_if_none:''|escapejs }}">
                            <div class="d-flex justify-content-between align-items-start gap-2">
                                <div class="flex-grow-1">
                                    <span class="fw-semibold">{{ occupation.member.name }}</span>
                                    <div class="text-muted small">
                                        {{ occupation.created_at|timezone:"Europe/Paris"|date:"d/m/Y H:i" }}
                                        {% if occupation.created_by %}
                                            — {{ occupation.created_by|short_name }}
                                        {% endif %}
                                    </div>
                                    {% if occupation.updated_by %}
                                        <div class="text-muted small">
                                            {% translate "Mis à jour par" %} {{ occupation.updated_by|short_name }}
                                            ({{ occupation.updated_at|timezone:"Europe/Paris"|date:"d/m/Y H:i" }})
                                        </div>
                                    {% endif %}
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-primary">{{ occupation.minutes|minutes_to_hours_minutes }}</span>
                                    {% if can_manage_occupations %}
                                        <div class="mt-2">
                                            <button type="button" class="btn btn-link text-secondary p-0 edit-occupation-btn"
                                                    data-occupation-id="{{ occupation.id }}"
                                                    aria-label="{% translate "Modifier l'occupation" %}">
                                                <i class="bi bi-pencil-square fs-6"></i>
                                            </button>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <p id="occupationsEmptyState" class="text-muted mb-0 {% if occupations|length %}d-none{% endif %}">
                    {% translate "Aucune occupation enregistrée pour le moment." %}
                </p>
            </div>
            <div class="card-footer text-end">
                <strong>{% translate "Total" %}:</strong>
                <span id="occupationsTotal" data-minutes="{{ total_occupation_minutes }}">{{ total_occupation_minutes|minutes_to_hours_minutes }}</span>
            </div>
        </div>
        {% if can_manage_occupations and occupation_form %}
        <div class="modal fade" id="occupationModal" tabindex="-1" aria-labelledby="occupationModalTitle" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="occupationModalTitle">{% translate "Ajouter une occupation" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate "Fermer" %}"></button>
                    </div>
                    <form id="occupationForm" data-intervention-id="{{ intervention.id }}">
                        <div class="modal-body">
                            {% csrf_token %}
                            <input type="hidden" name="occupation_id" id="occupationIdField">
                            <input type="hidden" name="minutes" id="id_minutes">
                            <div class="mb-3">
                                <label for="{{ occupation_form.member.id_for_label }}" class="form-label">{% translate "Technicien" %}</label>
                                {{ occupation_form.member }}
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{% translate "Durée" %}</label>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="occupationHours" name="hours" min="0" step="1" value="0">
                                            <span class="input-group-text">{% translate "h" %}</span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="occupationMinutes" name="mins" min="0" max="59" step="1" value="0">
                                            <span class="input-group-text">{% translate "min" %}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" id="occupationSubmitButton">{% translate "Ajouter" %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}
        {% endif %}