`{#
    Modal: Obszary odpowiedzialności stanowiska CONSULTANT
    Wyświetlany wyłącznie z poziomu overview.twig, gdy app_type == CONSULTANT.
    Dane ładowane dynamicznie przez AJAX przy otwarciu.
#}
<div class="modal fade" id="consultantAreasModal" tabindex="-1" aria-labelledby="consultantAreasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="consultantAreasModalLabel">
                    <i class="bi bi-tags me-2"></i>
                    {{ translations.consultant_responsibility_areas|default('Obszary odpowiedzialności') }}
                    — <span id="consultantAreasPositionName" class="text-muted fw-normal"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <p class="text-muted small mb-3">
                    {{ translations.consultant_areas_hint|default('Zaznacz obszary odpowiedzialności przypisane do tego stanowiska konsultanta. Obszary te będą wykorzystywane do routowania interakcji w panelu użytkownika.') }}
                </p>

                <div id="consultantAreasLoading" class="text-center py-4 text-muted">
                    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                    {{ translations.loading|default('Ładowanie…') }}
                </div>

                <div id="consultantAreasContent" class="d-none">
                    <div class="row g-3" id="consultantAreasCheckboxes">
                        {# Wypełniane dynamicznie przez JS #}
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ translations.close|default('Zamknij') }}
                </button>
                <button type="button" class="btn btn-primary" id="saveConsultantAreasBtn">
                    <i class="bi bi-check2 me-1"></i>
                    {{ translations.save|default('Zapisz') }}
                </button>
            </div>

        </div>
    </div>
</div>