{% extends 'base.html' %}
{% block title %}{{ group.name }} — Grupy{% endblock %}

{% block content %}
<div class="mb-3">
  <a href="{{ url_for('groups') }}" class="text-muted text-decoration-none">
    <i class="bi bi-arrow-left me-1"></i>Grupy emaili
  </a>
</div>

<div class="d-flex align-items-center justify-content-between mb-4">
  <h4 class="mb-0 fw-bold"><i class="bi bi-people me-2"></i>{{ group.name }}</h4>
  <form method="post" action="{{ url_for('delete_group', gid=group.id) }}"
        onsubmit="return confirm('Usunąć grupę {{ group.name }} wraz z wszystkimi członkami?')">
    <button class="btn btn-outline-danger btn-sm" type="submit">
      <i class="bi bi-trash me-1"></i>Usuń grupę
    </button>
  </form>
</div>

<div class="row g-3">
  <div class="col-md-7">
    <div class="card">
      <div class="card-header fw-semibold bg-white d-flex align-items-center justify-content-between">
        <span>Członkowie <span class="badge bg-secondary ms-1">{{ group.members|length }}</span></span>
      </div>
      <div class="card-body p-0">
        {% if group.members %}
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th class="ps-3">Imię i nazwisko</th>
              <th>Email</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for m in group.members %}
            <tr>
              <td class="ps-3">{{ m.name or '—' }}</td>
              <td>{{ m.email }}</td>
              <td class="text-end pe-3">
                <form method="post" action="{{ url_for('remove_member', gid=group.id, mid=m.id) }}"
                      onsubmit="return confirm('Usunąć {{ m.email }} z grupy?')">
                  <button class="btn btn-sm btn-outline-danger" type="submit">
                    <i class="bi bi-person-dash"></i>
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-center text-muted py-4">Brak członków w grupie</p>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-md-5">
    <div class="card">
      <div class="card-header fw-semibold bg-white">Dodaj osobę do grupy</div>
      <div class="card-body">
        <form method="post" action="{{ url_for('add_member', gid=group.id) }}">
          <div class="mb-3">
            <label class="form-label">Imię i nazwisko</label>
            <input type="text" name="name" class="form-control" placeholder="Jan Kowalski">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Email <span class="text-danger">*</span></label>
            <input type="email" name="email" class="form-control" placeholder="jan@firma.pl" required>
          </div>
          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-person-plus me-1"></i>Dodaj do grupy
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}