{% load static %}

{% with id=widget.attrs.id %}
<div class="grouped-permissions-widget" id="{{ id }}_container">
    <link rel="stylesheet" href="{% static 'users/css/permissions.css' %}">
    
    <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 }}">تحديد الكل</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 }} وحدة
                    </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 }}">تحديد الكل</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 }}"
                                                   {% if option.selected %}checked{% endif %}>
                                            <label class="form-check-label small" for="{{ option.attrs.id }}">
                                                {{ option.label }}
                                            </label>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

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