{% load i18n %}
<div 
    class="grid md:grid-cols-3 grid-cols-1 gap-3"
    bloomerp-component="permission-checkboxes"
    id="{{ id }}"
    data-name="{{ name }}"
    >
    {% for perm in permissions %}
        <label class="flex items-center gap-2 cursor-pointer">
            <input 
                type="checkbox" 
                class="checkbox rounded"
                name="{{ name }}"
                value="{{ perm.codename }}"
                {% if perm.codename in selected_permissions %}checked{% endif %}
                >
            <span class="text-sm text-gray-800 font-medium">{{ perm.name }}</span>
        </label>
    {% endfor %}
    {% if permissions|length > 1 %}
        <label class="flex items-center gap-2 cursor-pointer col-span-3">
            <input 
                type="checkbox" 
                class="checkbox rounded"
                name="{{ name }}"
                value="__all__"
                {% if permissions and permissions|length > 0 and selected_permissions|length == permissions|length %}checked{% endif %}>
            <span class="text-gray-800 font-medium text-sm">{% blocktrans %}All Permissions{% endblocktrans %}</span>
        </label>
    {% endif %}
</div>