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

{% block title %}Unirse a Grupo - Plataforma Educativa{% endblock %}

{% block content %}
<style>
  .join-container {
    max-width: 600px;
    margin: 2rem auto;
  }
  
  .form-box {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    margin-bottom: 2rem;
  }
  
  .form-box 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 {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: border-color 0.3s;
  }
  
  .form-group input: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;
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(122, 15, 15, 0.3);
  }
  
  .message {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-weight: 600;
  }
  
  .message-error {
    background: #ffebee;
    color: #d32f2f;
    border-left: 4px solid #d32f2f;
  }
  
  .my-groups {
    margin-top: 2rem;
  }
  
  .groups-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }
  
  .group-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    border-left: 4px solid #7a0f0f;
  }
  
  .group-card h3 {
    color: #7a0f0f;
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
  }
  
  .group-card p {
    color: #666;
    margin: 0.5rem 0;
    font-size: 0.95rem;
  }
  
  .group-card .btn-visit {
    display: inline-block;
    background: #7a0f0f;
    color: #fff;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 1rem;
    transition: transform 0.2s;
  }
  
  .group-card .btn-visit:hover {
    transform: translateY(-2px);
  }
</style>

<div class="join-container">
  {% if message %}
    <div class="message message-error">{{ message }}</div>
  {% endif %}
  
  <div class="form-box">
    <h2> Unirse a un Grupo</h2>
    <p style="color: #666; margin-bottom: 1.5rem;">
      Ingresa el código que tu profesor te proporcionó para acceder al grupo.
    </p>
    
    <form method="post" novalidate>
      {% csrf_token %}
      
      <div class="form-group">
        <label for="id_code">Código de Grupo *</label>
        {{ form.code }}
        {% if form.code.errors %}
          <small style="color: #d32f2f;">{{ form.code.errors.0 }}</small>
        {% endif %}
      </div>
      
      <button type="submit" class="btn-submit">Unirse al Grupo</button>
    </form>
  </div>
  
  {% if my_groups %}
    <div class="my-groups">
      <h3 style="color: #7a0f0f; margin-bottom: 1rem;"> Mis Grupos</h3>
      <div class="groups-list">
        {% for membership in my_groups %}
          <div class="group-card">
            <h3>{{ membership.group.name }}</h3>
            {% if membership.group.description %}
              <p>{{ membership.group.description }}</p>
            {% endif %}
            <p style="font-size: 0.85rem; color: #999;">
               Profesor: <strong>{{ membership.group.admin.first_name }} {{ membership.group.admin.last_name }}</strong>
            </p>
            <p style="font-size: 0.85rem; color: #999;">
               {{ membership.group.get_members_count }} miembro(s)
            </p>
            <a href="{% url 'projects:group_student_detail' membership.group.pk %}" class="btn-visit">
              Ver Grupo →
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}