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

{% block title %}Mis grupos{% endblock %}

{% block body %}
<div class="container">
    <div class="page-header">
        <h1 class="page-title">Mis grupos</h1>
        <div class="page-actions">
            <a href="{{ path('app_grupo_nuevo') }}" class="btn btn--primary">+ Nuevo grupo</a>
            <a href="{{ path('app_grupo_unirse') }}" class="btn btn--ghost">Unirse con código</a>
        </div>
    </div>

    {% if grupos|length > 0 %}
    <div class="card-grid">
        {% for grupo in grupos %}
        <a href="{{ path('app_grupo_show', {id: grupo.id}) }}" class="glass-card card-group">
            {% if grupo.imagen %}
            <div class="card-group-img">
                <img src="{{ asset('uploads/grupos/' ~ grupo.imagen) }}" alt="{{ grupo.nombre }}">
            </div>
            {% endif %}
            <h3 class="card-group-name">{{ grupo.nombre }}</h3>
            {% if grupo.descripcion %}
            <p class="card-group-desc">{{ grupo.descripcion|u.truncate(80, '…') }}</p>
            {% endif %}
            <p class="card-group-meta">{{ grupo.miembros|length }} miembro(s)</p>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>Aún no perteneces a ningún grupo.</p>
        <div class="empty-state-actions">
            <a href="{{ path('app_grupo_nuevo') }}" class="btn btn--primary">Crear grupo</a>
            <a href="{{ path('app_grupo_unirse') }}" class="btn btn--ghost">Unirse con código</a>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}