{% extends 'base.html' %}
{% block title %}Pracownicy{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <h4 class="mb-0 fw-bold">Pracownicy</h4>
    <small class="text-muted">{{ persons|length }} {{ 'osoba' if persons|length == 1 else 'osoby' if persons|length < 5 else 'osób' }} w systemie</small>
  </div>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPersonModal">
    <i class="bi bi-person-plus me-1"></i> Dodaj pracownika
  </button>
</div>

<div class="card">
  <div class="card-body p-0">
    {% for person in persons %}
    <div class="d-flex align-items-center px-4 py-3 {% if not loop.last %}border-bottom{% endif %}">
      <!-- Avatar -->
      <div class="rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0"
           style="width:42px;height:42px;background:#e2e8f0;font-weight:700;font-size:1rem;color:#475569;">
        {{ person.name[0].upper() }}
      </div>
      <!-- Dane -->
      <div class="flex-grow-1 me-3">
        <div class="fw-semibold">{{ person.name }}</div>
        <div class="text-muted small">{{ person.email }}</div>
      </div>
      <!-- Grupy -->
      <div class="flex-grow-1 d-flex flex-wrap gap-1">
        {% for group in person.groups %}
        <span class="badge rounded-pill"
              style="background:#f1f5f9;color:#334155;font-weight:500;font-size:.8rem;padding:4px 10px;">
          {{ group.name }}
        </span>
        {% endfor %}
        {% if not person.groups %}
        <span class="text-muted small fst-italic">Brak grup</span>
        {% endif %}
      </div>
      <!-- Akcje -->
      <div class="d-flex gap-2 flex-shrink-0">
        <button class="btn btn-sm btn-outline-secondary"
                data-bs-toggle="modal"
                data-bs-target="#editPersonModal{{ person.id }}">
          Edytuj
        </button>
        <form method="post" action="{{ url_for('delete_person', pid=person.id) }}"
              onsubmit="return confirm('Usunąć {{ person.name }}?')">
          <button type="submit" class="btn btn-sm btn-outline-danger">Usuń</button>
        </form>
      </div>
    </div>

    <!-- Modal edycji -->
    <div class="modal fade" id="editPersonModal{{ person.id }}" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Edytuj: {{ person.name }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <form method="post" action="{{ url_for('edit_person', pid=person.id) }}">
            <div class="modal-body">
              <div class="mb-3">
                <label class="form-label fw-semibold">Imię i nazwisko</label>
                <input type="text" name="name" class="form-control" value="{{ person.name }}" required>
              </div>
              <div class="mb-3">
                <label class="form-label fw-semibold">Email</label>
                <input type="email" name="email" class="form-control" value="{{ person.email }}" required>
              </div>
              <div class="mb-1">
                <label class="form-label fw-semibold">Grupy</label>
              </div>
              <div class="d-flex flex-wrap gap-2">
                {% for group in groups %}
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="group_ids"
                         value="{{ group.id }}" id="eg{{ person.id }}_{{ group.id }}"
                         {% if group in person.groups %}checked{% endif %}>
                  <label class="form-check-label small" for="eg{{ person.id }}_{{ group.id }}">
                    {{ group.name }}
                  </label>
                </div>
                {% endfor %}
              </div>
            </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">Zapisz zmiany</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    {% else %}
    <div class="text-center text-muted py-5">
      <i class="bi bi-people fs-1 d-block mb-2 opacity-25"></i>
      Brak pracowników. Dodaj pierwszą osobę.
    </div>
    {% endfor %}
  </div>
</div>

<!-- Modal dodawania -->
<div class="modal fade" id="addPersonModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Dodaj pracownika</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" action="{{ url_for('create_person') }}">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">Imię i nazwisko</label>
            <input type="text" name="name" class="form-control" placeholder="np. Anna Kowalska" required autofocus>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Email</label>
            <input type="email" name="email" class="form-control" placeholder="anna@geeknson.com" required>
          </div>
          <div class="mb-1">
            <label class="form-label fw-semibold">Grupy</label>
          </div>
          <div class="d-flex flex-wrap gap-2">
            {% for group in groups %}
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="group_ids"
                     value="{{ group.id }}" id="ng_{{ group.id }}">
              <label class="form-check-label small" for="ng_{{ group.id }}">{{ group.name }}</label>
            </div>
            {% endfor %}
          </div>
        </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">Dodaj pracownika</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}