{% extends 'base.html.twig' %}

{% block title %}Permisos — {{ grupo.nombre }}{% endblock %}

{% block body %}
<div class="container">

    <div class="page-header">
        <div>
            <h1 class="page-title">Permisos del grupo</h1>
            <p class="page-subtitle">{{ grupo.nombre }}</p>
        </div>
        <div class="page-actions">
            <a href="{{ path('app_grupo_show', {id: grupo.id}) }}" class="btn btn--ghost">← Volver al grupo</a>
        </div>
    </div>

    {% set labels = {
        'crear_eventos':     'Crear eventos',
        'gestionar_eventos': 'Gestionar eventos',
        'invitar_miembros':  'Invitar miembros',
        'expulsar_miembros': 'Expulsar miembros',
        'gestionar_telegram':'Telegram',
        'enviar_telegram':   'Enviar Telegram',
        'gestionar_permisos':'Gestionar permisos'
    } %}

    {# Forms fuera de la tabla para evitar HTML inválido dentro de <tr> #}
    {% for miembro in miembros %}
        {% if not miembro.isAdmin and miembro.usuario != app.user %}
        <form id="form-permisos-{{ miembro.usuario.id }}"
              method="post"
              action="{{ path('app_grupo_actualizar_permisos', {id: grupo.id, usuarioId: miembro.usuario.id}) }}"
              style="display:none;">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('grupo_permisos_' ~ grupo.id ~ '_' ~ miembro.usuario.id) }}">
        </form>
        {% endif %}
    {% endfor %}

    <div class="glass-card" style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;">
            <thead>
                <tr>
                    <th style="text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-separator);">Miembro</th>
                    {% for permiso in permisos %}
                    <th style="text-align:center;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--color-separator);font-size:0.75rem;font-weight:600;color:var(--color-label-2);">
                        {{ labels[permiso.value] ?? permiso.value }}
                    </th>
                    {% endfor %}
                    <th style="text-align:center;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-separator);"></th>
                </tr>
            </thead>
            <tbody>
            {% for miembro in miembros %}
                {% set esMismoUsuario = miembro.usuario == app.user %}
                {% set esAdmin = miembro.isAdmin %}
                {% set formId = 'form-permisos-' ~ miembro.usuario.id %}
                <tr style="border-bottom:1px solid var(--color-separator);">
                    <td style="padding:var(--space-3) var(--space-4);">
                        <span style="font-weight:600;">{{ miembro.usuario.nombre }}</span>
                        <span style="color:var(--color-label-2);font-size:0.8rem;margin-left:var(--space-2);">{{ miembro.usuario.usernameTag }}</span>
                        {% if esAdmin %}
                        <span class="badge badge--admin" style="margin-left:var(--space-2);">Admin</span>
                        {% endif %}
                        {% if esMismoUsuario %}
                        <span style="color:var(--color-label-2);font-size:0.75rem;margin-left:var(--space-2);">(tú)</span>
                        {% endif %}
                    </td>

                    {% for permiso in permisos %}
                    <td style="text-align:center;padding:var(--space-3) var(--space-2);">
                        {% if esAdmin %}
                            <input type="checkbox" checked disabled title="Los administradores tienen todos los permisos">
                        {% elseif esMismoUsuario %}
                            <input type="checkbox"
                                {% if miembro.hasPermission(permiso) %}checked{% endif %}
                                disabled title="No puedes modificar tus propios permisos">
                        {% else %}
                            {% set isGestionarPermisos = permiso.value == 'gestionar_permisos' %}
                            {% set canToggle = membership.isAdmin or not isGestionarPermisos %}
                            {% if canToggle %}
                            <input type="checkbox"
                                form="{{ formId }}"
                                name="permisos[]"
                                value="{{ permiso.value }}"
                                {% if miembro.hasPermission(permiso) %}checked{% endif %}>
                            {% else %}
                            <input type="checkbox"
                                {% if miembro.hasPermission(permiso) %}checked{% endif %}
                                disabled title="Solo un administrador puede gestionar este permiso">
                            {% endif %}
                        {% endif %}
                    </td>
                    {% endfor %}

                    <td style="text-align:center;padding:var(--space-3) var(--space-4);">
                        {% if not esAdmin and not esMismoUsuario %}
                        <button type="submit" form="{{ formId }}" class="btn btn--primary btn--xs">Guardar</button>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <p style="margin-top:var(--space-4);color:var(--color-label-2);font-size:0.85rem;">
        Los administradores tienen todos los permisos y no pueden ser modificados desde esta pantalla.
    </p>
</div>
{% endblock %}