{% extends "dashboard/base.html" %}
{% block title %}ব্যবহারকারী{% endblock %}
{% block content %}
<h1 class="mb-6 text-xl font-bold text-forest">ড্যাশবোর্ড ব্যবহারকারী</h1>
<div class="grid gap-6 lg:grid-cols-[1.4fr_1fr]">
  <div class="overflow-x-auto rounded-2xl bg-white shadow-soft">
    <table class="w-full min-w-[560px] text-left text-sm">
      <thead class="bg-forest/5 text-xs uppercase tracking-wider text-muted"><tr><th class="px-4 py-3">নাম</th><th class="px-4 py-3">ইউজারনেম</th><th class="px-4 py-3">ভূমিকা</th><th class="px-4 py-3">ওয়ার্ড</th><th class="px-4 py-3">সক্রিয়</th><th class="px-4 py-3"></th></tr></thead>
      <tbody class="divide-y divide-forest/10">
        {% for u in users %}
        <tr><td class="px-4 py-3">{{ u.get_full_name|default:u.username }}</td><td class="px-4 py-3 font-mono text-xs">{{ u.username }}</td><td class="px-4 py-3">{{ u.profile.get_role_display }}</td><td class="px-4 py-3">{{ u.profile.ward_id|default:"—" }}</td><td class="px-4 py-3">{% if u.is_active %}হ্যাঁ{% else %}না{% endif %}</td>
          <td class="px-4 py-3"><button type="button" class="text-xs font-semibold text-rose-700 underline" data-delete-user="/api/admin/users/{{ u.pk }}/">মুছুন</button></td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <form class="space-y-4 rounded-2xl bg-white p-6 shadow-soft" data-create-user="/api/admin/users/" novalidate>
    <h2 class="font-bold text-forest">নতুন ব্যবহারকারী</h2>
    <input name="name" placeholder="নাম" class="w-full rounded-xl border border-forest/15 px-4 py-2.5">
    <input name="username" required minlength="3" placeholder="ইউজারনেম" class="w-full rounded-xl border border-forest/15 px-4 py-2.5">
    <input name="password" type="password" required minlength="8" placeholder="পাসওয়ার্ড (৮+ অক্ষর)" class="w-full rounded-xl border border-forest/15 px-4 py-2.5">
    <select name="role" class="w-full rounded-xl border border-forest/15 px-4 py-2.5">{% for v, label in roles %}<option value="{{ v }}">{{ label }}</option>{% endfor %}</select>
    <input name="wardId" placeholder="ওয়ার্ড (ঐচ্ছিক)" class="w-full rounded-xl border border-forest/15 px-4 py-2.5">
    <button class="rounded-full bg-forest px-6 py-2.5 font-semibold text-cream">তৈরি করুন</button>
    <p class="text-sm" role="status" data-user-msg></p>
  </form>
</div>
<p class="mt-6 text-sm"><a class="font-semibold text-forest underline" href="/api/admin/backup/">সম্পূর্ণ JSON ব্যাকআপ ডাউনলোড</a></p>
{% endblock %}