{#
    Modal: Szablony opisów obszarów odpowiedzialności (globalny)
    Wyświetlany wyłącznie z poziomu overview.twig, gdy app_type == CONSULTANT.
    Umożliwia zdefiniowanie opisu i listy obowiązków dla każdego obszaru ze słownika.
    Dane zapisywane przez AJAX: PUT /ajax/consultant-area-templates/{key}
#}
<div class="modal fade" id="areaTemplatesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-card-list me-2"></i>
                    {{ translations.area_templates_title|default('Szablony opisów obszarów odpowiedzialności') }}
                </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.area_templates_hint|default('Zdefiniuj globalny opis i listę obowiązków dla każdego obszaru. Dane te zostaną skopiowane przy przypisywaniu obszaru do konkretnego konsultanta i będą niezależnie edytowalne.') }}
                </p>

                <div class="row g-0">
                    {# Lewa kolumna — lista obszarów #}
                    <div class="col-md-4 border-end pe-3">
                        <p class="text-uppercase text-muted small fw-semibold mb-2">
                            {{ translations.responsibility_areas|default('Obszary') }}
                        </p>
                        <div id="tpl_area_key_list" class="list-group list-group-flush">
                            <div class="text-center text-muted py-3">
                                <div class="spinner-border spinner-border-sm" role="status"></div>
                            </div>
                        </div>
                    </div>

                    {# Prawa kolumna — formularz #}
                    <div class="col-md-8 ps-3">

                        <div id="tpl_empty_state" class="d-flex align-items-center justify-content-center h-100 text-muted">
                            <span>← {{ translations.select_area_to_edit|default('Wybierz obszar z listy, aby edytować szablon') }}</span>
                        </div>

                        <div id="tpl_form_wrap" class="d-none">
                            <h6 id="tpl_form_area_label" class="mb-3 fw-bold"></h6>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">
                                    {{ translations.description|default('Opis') }}
                                </label>
                                <textarea id="tpl_description"
                                          class="form-control"
                                          rows="3"
                                          aria-label="{{ translations.description|default('Opis') }}"
                                          placeholder="{{ translations.area_description_placeholder|default('Krótki opis obszaru odpowiedzialności (1–2 zdania)…') }}"></textarea>
                            </div>

                            <div class="mb-2">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label fw-semibold mb-0">
                                        {{ translations.duties|default('Obowiązki') }}
                                    </label>
                                    <button type="button" class="btn btn-sm btn-outline-primary" id="tpl_add_duty_btn">
                                        <i class="bi bi-plus"></i> {{ translations.add_duty|default('Dodaj obowiązek') }}
                                    </button>
                                </div>
                                <div id="tpl_duties_container" class="d-flex flex-column gap-2"></div>
                                <p class="text-muted small mt-2 mb-0" id="tpl_duties_empty_hint">
                                    {{ translations.no_duties_yet|default('Brak obowiązków — kliknij „Dodaj obowiązek", aby dodać pierwszy.') }}
                                </p>
                            </div>

                            <div class="d-flex gap-2 mt-4">
                                <button type="button" class="btn btn-primary" id="tpl_save_btn">
                                    <i class="bi bi-save me-1"></i>
                                    {{ translations.save|default('Zapisz szablon') }}
                                </button>
                                <button type="button" class="btn btn-light" id="tpl_cancel_btn">
                                    {{ translations.cancel|default('Anuluj') }}
                                </button>
                            </div>
                        </div>

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

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ translations.close|default('Zamknij') }}
                </button>
            </div>

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