{% extends "base.html" %}
{% load static %}

{% block title %}Crear Grupo - Plataforma Educativa{% endblock %}

{% block content %}
<style>
  .form-container {
    max-width: 600px;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  }
  
  .form-container h2 {
    color: #7a0f0f;
    margin-bottom: 1.5rem;
    font-weight: 800;
  }
  
  .form-group {
    margin-bottom: 1.5rem;
  }
  
  .form-group label {
    display: block;
    font-weight: 700;
    color: #222;
    margin-bottom: 0.5rem;
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: #7a0f0f;
    box-shadow: 0 0 0 3px rgba(122, 15, 15, 0.1);
  }
  
  .btn-submit {
    background: linear-gradient(90deg, #7a0f0f, #650d0d);
    color: #fff;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
  }
  
  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(122, 15, 15, 0.3);
  }
</style>

<div class="form-container">
  <h2>📚 Crear Nuevo Grupo</h2>
  <p style="color: #666; margin-bottom: 1.5rem;">
    Crea un grupo para tus estudiantes. Se generará automáticamente un código de acceso.
  </p>
  
  <form method="post" novalidate>
    {% csrf_token %}
    
    <div class="form-group">
      <label for="id_name">Nombre del Grupo *</label>
      {{ form.name }}
      {% if form.name.errors %}
        <small style="color: #d32f2f;">{{ form.name.errors.0 }}</small>
      {% endif %}
    </div>
    
    <div class="form-group">
      <label for="id_description">Descripción (opcional)</label>
      {{ form.description }}
      {% if form.description.errors %}
        <small style="color: #d32f2f;">{{ form.description.errors.0 }}</small>
      {% endif %}
    </div>
    
    <button type="submit" class="btn-submit">Crear Grupo</button>
  </form>
</div>
{% endblock %}