{% extends 'base.html' %}
{% block title %}Manajemen User{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-people me-2" style="color:var(--hijau-utama)"></i>Manajemen User</h1>
    <p>{{ users.total }} user terdaftar</p>
  </div>
</div>

<div class="card-flat">
  <div class="table-responsive">
    <table class="tbl">
      <thead>
        <tr><th>#</th><th>Nama</th><th>Email</th><th>Status</th><th>Total Prediksi</th><th>Bergabung</th><th>Aksi</th></tr>
      </thead>
      <tbody>
        {% for u in users.items %}
        <tr>
          <td class="mono text-muted" style="font-size:.75rem;">{{ u.id }}</td>
          <td>
            <div style="display:flex;align-items:center;gap:.6rem;">
              <div style="width:30px;height:30px;background:var(--hijau-muda);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:var(--hijau-utama);">
                {{ u.nama[0].upper() }}
              </div>
              <span style="font-weight:500;">{{ u.nama }}</span>
            </div>
          </td>
          <td style="font-size:.83rem;color:var(--teks-sekunder);">{{ u.email }}</td>
          <td>
            {% if u.status == 'aktif' %}
            <span class="badge-sentimen badge-positif"><i class="bi bi-circle-fill" style="font-size:.5rem;"></i>Aktif</span>
            {% else %}
            <span class="badge-sentimen badge-negatif"><i class="bi bi-circle-fill" style="font-size:.5rem;"></i>Nonaktif</span>
            {% endif %}
          </td>
          <td class="mono">{{ u.predictions|length }}</td>
          <td style="font-size:.78rem;color:var(--teks-muted);">{{ u.created_at | wib }}</td>

          <td style="text-align:center;">
            <div style="display:flex;justify-content:center;align-items:center;gap:8px;">
              <form method="POST"
                    action="{{ url_for('admin.toggle_user', id=u.id) }}"
                    style="margin:0;">
                <button type="submit"
                        class="btn-outline-hijau"
                        style="font-size:.75rem;padding:.3rem .7rem;white-space:nowrap;">
                  {% if u.status == 'aktif' %}
                  <i class="bi bi-slash-circle"></i> Nonaktifkan
                  {% else %}
                  <i class="bi bi-check-circle"></i> Aktifkan
                  {% endif %}
                </button>
              </form>

              <form method="POST"
                    action="{{ url_for('admin.hapus_user', id=u.id) }}"
                    onsubmit="return confirm('Hapus user {{ u.nama }} ?')"
                    style="margin:0;">
                <button type="submit"
                        title="Hapus user"
                        style="background:#dc3545;color:white;border:none;padding:.45rem .7rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7"><div class="empty-state"><i class="bi bi-people"></i><p>Belum ada user terdaftar.</p></div></td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if users.pages > 1 %}
  <div class="d-flex justify-content-end mt-3 pt-3" style="border-top:1px solid var(--garis);">
    <nav>
      <ul class="pagination pagination-sm mb-0">
        {% if users.has_prev %}<li class="page-item"><a class="page-link" href="?page={{ users.prev_num }}">‹</a></li>{% endif %}
        {% for p in users.iter_pages() %}
          {% if p %}<li class="page-item {% if p == users.page %}active{% endif %}"><a class="page-link" href="?page={{ p }}">{{ p }}</a></li>
          {% else %}<li class="page-item disabled"><span class="page-link">…</span></li>{% endif %}
        {% endfor %}
        {% if users.has_next %}<li class="page-item"><a class="page-link" href="?page={{ users.next_num }}">›</a></li>{% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}