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

{% block title %}Nuevo grupo{% endblock %}

{% block body %}
<div class="auth-wrapper">
    <div class="auth-card glass-card">
        <div class="auth-header">
            <span class="auth-logo">🎲</span>
            <h1 class="auth-title">Crear grupo</h1>
            <p class="auth-subtitle">Organiza partidas con tus amigos</p>
        </div>

        {{ form_start(form, {attr: {novalidate: 'novalidate', enctype: 'multipart/form-data'}}) }}
            <div class="form-group">
                {{ form_label(form.nombre, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.nombre, {attr: {class: 'form-control', autofocus: true}}) }}
                {{ form_errors(form.nombre) }}
            </div>
            <div class="form-group">
                {{ form_label(form.descripcion, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.descripcion, {attr: {class: 'form-control'}}) }}
                {{ form_errors(form.descripcion) }}
            </div>
            <div class="form-group">
                {{ form_label(form.imagenFile, null, {label_attr: {class: 'form-label'}}) }}
                {{ form_widget(form.imagenFile, {attr: {class: 'form-control', accept: 'image/*'}}) }}
                {{ form_errors(form.imagenFile) }}
            </div>
            <button type="submit" class="btn btn--primary btn--full">Crear grupo</button>
        {{ form_end(form) }}

        <p class="auth-footer">
            ¿Tienes un código? <a href="{{ path('app_grupo_unirse') }}">Únete a un grupo</a>
        </p>
    </div>
</div>
{% endblock %}