{% load static %}

{% with id=widget.attrs.id %}
<div class="grouped-permissions-widget" id="{{ id }}_container">
    <link rel="stylesheet" href="{% static 'microsys/users/css/permissions.css' %}">

    {% if widget.staff_tier_preview %}
    <div class="ms-staff-tier-preview mb-3"
         data-tier-preview-config="{{ widget.staff_tier_preview.config_json|escape }}">
        <div class="ms-staff-tier-preview__header">
            <div>
                <div class="ms-staff-tier-preview__eyebrow">{{ MS_TRANS.staff_tier_preview|default:"Staff Tier Preview" }}</div>
                <h5 class="ms-staff-tier-preview__title mb-1"></h5>
                <p class="ms-staff-tier-preview__description mb-0"></p>
                <p class="small text-muted mt-2 mb-0">{{ MS_TRANS.staff_tier_preview_caption|default:"Read-only summary based on staff access, scope, and selected permissions." }}</p>
            </div>
            <div class="ms-staff-tier-preview__badges"></div>
        </div>
        <ul class="ms-staff-tier-preview__capabilities mb-0"></ul>
        <div class="ms-staff-tier-preview__warnings"></div>
    </div>
    {% endif %}
    
    <div class="detailed-list mt-3">
        {% for app_label, app_data in widget.grouped_perms.items %}
        <div class="permissions-card">
            <!-- Header serves as both master checkbox and toggle -->
            <div class="permissions-card-header collapsed" 
                 data-bs-toggle="collapse" 
                 data-bs-target="#collapse_{{ app_label }}" 
                 aria-expanded="false">
                
                <div class="d-flex align-items-center">
                    <div class="form-check me-3 prevent-toggle">
                        <input class="form-check-input app-master-checkbox" type="checkbox" id="master_{{ app_label }}">
                        <label class="form-check-label d-none" for="master_{{ app_label }}">{{ MS_TRANS.select_all }}</label>
                    </div>
                    <h5 class="app-title">{{ app_data.name|title }}</h5>
                </div>
                
                <div class="d-flex align-items-center">
                    <span class="badge bg-soft-primary text-primary border-primary me-3 px-2 py-1">
                        {{ app_data.models|length }} {{ MS_TRANS.unit_items }}
                    </span>
                    <i class="bi bi-chevron-down toggle-icon"></i>
                </div>
            </div>

            <!-- Body contains models and permissions -->
            <div id="collapse_{{ app_label }}" class="collapse">
                <div class="permissions-card-body">
                    <div class="row g-3">
                        {% for model_name, model_data in app_data.models.items %}
                        <div class="col-md-6 col-lg-4">
                            <div class="model-group">
                                <div class="model-header">
                                    <div class="form-check me-2">
                                        <input class="form-check-input model-master-checkbox" type="checkbox" id="master_{{ app_label }}_{{ model_name }}">
                                        <label class="form-check-label d-none" for="master_{{ app_label }}_{{ model_name }}">{{ MS_TRANS.select_all }}</label>
                                    </div>
                                    <h6 class="model-title">{{ model_data.name }}</h6>
                                </div>
                                <div class="model-permissions">
                                    {% for option in model_data.permissions %}
                                    <div class="permission-item">
                                        <div class="form-check">
                                            <input type="checkbox" name="{{ option.name }}" value="{{ option.value }}" 
                                                   class="form-check-input permission-checkbox" 
                                                   id="{{ option.attrs.id }}"
                                                   data-action="{{ option.attrs.data_action }}"
                                                   data-model="{{ option.attrs.data_model }}"
                                                   data-codename="{{ option.attrs.data_codename }}"
                                                   {% if option.attrs.disabled %}disabled{% endif %}
                                                   {% if option.selected %}checked{% endif %}>
                                            <label class="form-check-label small" for="{{ option.attrs.id }}">
                                                {{ option.label }}
                                            </label>
                                            {% if option.help_text %}
                                            <div class="form-text">{{ option.help_text }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<script src="{% static 'microsys/users/js/permissions.js' %}" nonce="{{ request.csp_nonce }}"></script>
{% endwith %}