{% extends 'base.html' %}
{% block title %}Grupy emaili{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h4 class="mb-0 fw-bold">Grupy emaili</h4>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createGroupModal">
    <i class="bi bi-plus-lg me-1"></i> Nowa grupa
  </button>
</div>

<div class="row g-3">
  {% for group in groups %}
  <div class="col-md-6 col-lg-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div>
            <h6 class="fw-bold mb-0">{{ group.name }}</h6>
            <small class="text-muted">{{ group.members|length }} {{ 'osoba' if group.members|length == 1 else 'osoby' if group.members|length < 5 else 'osób' }}</small>
          </div>
          <div class="d-flex gap-1">
            <a href="{{ url_for('group_detail', gid=group.id) }}" class="btn btn-sm btn-outline-primary">
              <i class="bi bi-pencil"></i>
            </a>
            <form method="post" action="{{ url_for('delete_group', gid=group.id) }}"
                  onsubmit="return confirm('Usunąć grupę {{ group.name }}?')">
              <button class="btn btn-sm btn-outline-danger" type="submit"><i class="bi bi-trash"></i></button>
            </form>
          </div>
        </div>
        <hr class="my-2">
        {% for m in group.members[:5] %}
        <div class="small text-muted"><i class="bi bi-person me-1"></i>{{ m.name or m.email }}</div>
        {% endfor %}
        {% if group.members|length > 5 %}
        <div class="small text-muted">...i {{ group.members|length - 5 }} więcej</div>
        {% endif %}
        {% if not group.members %}
        <div class="small text-muted fst-italic">Brak członków</div>
        {% endif %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center text-muted py-5">
        <i class="bi bi-people fs-1 d-block mb-2 opacity-25"></i>
        Brak grup. Utwórz pierwszą grupę emailową.
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<!-- Modal: utwórz grupę -->
<div class="modal fade" id="createGroupModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Nowa grupa emaili</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" action="{{ url_for('create_group') }}">
        <div class="modal-body">
          <label class="form-label fw-semibold">Nazwa grupy</label>
          <input type="text" name="name" class="form-control" placeholder="np. Produkcja, Magazyn, Sprzedaż" required autofocus>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
          <button type="submit" class="btn btn-primary">Utwórz grupę</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}