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

{% block title %}{{ group.name }} - Grupo{% endblock %}

{% block content %}
<style>
  .group-header {
    background: linear-gradient(135deg, #7a0f0f, #650d0d);
    color: #fff;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
  }
  
  .group-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
  }
  
  .group-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .info-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  }
  
  .info-card h3 {
    color: #7a0f0f;
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
  }
  
  .info-card p {
    margin: 0;
    font-weight: 700;
    font-size: 1.2rem;
    color: #222;
  }
  
  .members-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    overflow: hidden;
  }
  
  .members-box h2 {
    color: #7a0f0f;
    padding: 1.5rem;
    margin: 0;
    border-bottom: 2px solid #f5f2f0;
  }
  
  .member-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f5f2f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .member-item:last-child {
    border-bottom: none;
  }
  
  .member-info h4 {
    margin: 0;
    color: #222;
  }
  
  .member-info small {
    color: #999;
    display: block;
    margin-top: 0.3rem;
  }
</style>

<div class="group-header">
  <h1> {{ group.name }}</h1>
  {% if group.description %}
    <p>{{ group.description }}</p>
  {% endif %}
</div>

<div class="group-info">
  <div class="info-card">
    <h3> Profesor</h3>
    <p>{{ group.admin.first_name }} {{ group.admin.last_name }}</p>
  </div>
  
  <div class="info-card">
    <h3>👥 Miembros</h3>
    <p>{{ group.get_members_count }}</p>
  </div>
  
  <div class="info-card">
    <h3>Creado</h3>
    <p>{{ group.created_at|date:"d/m/Y" }}</p>
  </div>
</div>

<div class="members-box">
  <h2>👥 Compañeros de Clase</h2>
  
  <div class="member-item">
    <div class="member-info">
      <h4>{{ group.admin.first_name }} {{ group.admin.last_name }}</h4>
      <small>{{ group.admin.email }}</small>
    </div>
    <span style="background: #7a0f0f; color: #fff; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 700;">PROFESOR</span>
  </div>
  
  {% for member in members %}
    <div class="member-item">
      <div class="member-info">
        <h4>{{ member.user.first_name }} {{ member.user.last_name }}</h4>
        <small>{{ member.user.email }}</small>
      </div>
    </div>
  {% empty %}
    <div style="padding: 2rem; text-align: center; color: #999;">
      Aún no hay más estudiantes en este grupo.
    </div>
  {% endfor %}
</div>
{% endblock %}