{# Template personnalisé pour afficher les rôles de manière ergonomique #}
{% block sonata_all_roles_widget %}
    <div class="sonata-roles-container">
        {# Hidden field to store the serialized roles as JSON #}
        {# JavaScript sync is handled in assets/js/admin.js #}
        <input type="hidden" name="{{ full_name }}" id="{{ id }}" value="{{ value|json_encode }}" />
        <style>
            .sonata-roles-container {
                width: 100%;
            }

            .roles-categories {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                margin-top: 15px;
            }

            .role-category-card {
                flex: 1 1 300px;
                min-width: 300px;
                max-width: 100%;
                border: 1px solid #ddd;
                border-radius: 8px;
                padding: 15px;
                background: #fff;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            .role-category-header {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                margin-bottom: 5px;
                padding-bottom: 10px;
                border-bottom: 2px solid #3498db;
            }

            .role-category-description {
                font-size: 12px;
                color: #666;
                margin-bottom: 12px;
                font-style: italic;
            }

            .role-checkbox-group {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            /* Single column on small screens */
            @media (max-width: 768px) {
                .role-checkbox-group {
                    grid-template-columns: 1fr;
                }
            }

            .role-checkbox-item {
                display: flex;
                align-items: center;
                padding: 6px 8px;
                border-radius: 4px;
                transition: background-color 0.2s;
            }

            .role-checkbox-item:hover {
                background-color: #f8f9fa;
            }

            .role-checkbox-item input[type="checkbox"] {
                margin-right: 10px;
                width: 18px;
                height: 18px;
                cursor: pointer;
            }

            .role-checkbox-item label {
                margin: 0;
                margin-left: 5px;
                cursor: pointer;
                font-size: 14px;
                flex: 1;
                user-select: none;
            }

            .role-value-badge {
                font-size: 10px;
                color: #999;
                font-family: monospace;
                margin-left: 5px;
            }

            /* Highlight pour "Tous les droits" */
            .role-checkbox-item.all-rights {
                background-color: #e8f4f8;
                font-weight: 600;
            }

            .role-checkbox-item.all-rights:hover {
                background-color: #d0ebf5;
            }

            /* Responsive for cards */
            @media (max-width: 768px) {
                .role-category-card {
                    flex: 1 1 100%;
                    min-width: 100%;
                }
            }

            @media (min-width: 769px) and (max-width: 1200px) {
                .role-category-card {
                    flex: 1 1 calc(50% - 10px);
                    min-width: calc(50% - 10px);
                }
            }

            @media (min-width: 1201px) {
                .role-category-card {
                    flex: 1 1 calc(33.333% - 14px);
                    min-width: calc(33.333% - 14px);
                }
            }
        </style>

        {% if roles_by_category is defined %}
            <div class="roles-categories">
                {% for categoryName, categoryData in roles_by_category %}
                    <div class="role-category-card">
                        <div class="role-category-header">
                            {{ categoryName }}
                        </div>
                        {% if categoryData.description is defined %}
                            <div class="role-category-description">
                                {{ categoryData.description }}
                            </div>
                        {% endif %}

                        <div class="role-checkbox-group">
                            {% for roleValue, roleLabel in categoryData.roles %}
                                {# Check if this role is in the current values (data from database) #}
                                {% set isChecked = false %}
                                {% if value is defined and value is not empty %}
                                    {% if roleValue in value %}
                                        {% set isChecked = true %}
                                    {% endif %}
                                {% endif %}

                                {% set isAllRights = roleLabel == 'Tous les droits' or roleValue ends with '_ALL' %}

                                <div class="role-checkbox-item {{ isAllRights ? 'all-rights' : '' }}">
                                    <input
                                        type="checkbox"
                                        class="sonata-role-checkbox"
                                        id="{{ id }}_{{ roleValue|replace({'_': '', '.': '', '[': '', ']': ''}) }}"
                                        value="{{ roleValue }}"
                                        {{ isChecked ? 'checked' : '' }}
                                    />
                                    <label for="{{ id }}_{{ roleValue|replace({'_': '', '.': '', '[': '', ']': ''}) }}">
                                        {{ roleLabel }}
                                        <span class="role-value-badge" title="{{ roleValue }}">
                                            {% if isAllRights %}
                                                <i class="fas fa-crown"></i>
                                            {% endif %}
                                        </span>
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            {# Fallback to default rendering if roles_by_category is not available #}
            {{ block('choice_widget_expanded') }}
        {% endif %}
    </div>
{% endblock %}