{% extends "admin_frontend/base.html" %}
{% block title %}{% if creating %}Create User{% else %}Edit User{% endif %}{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-xl font-semibold">{% if creating %}Create User{% else %}Edit User{% endif %}</h1>
  <a href="{{ cancel_url }}" class="btn-outline">Back</a>
  <style>.btn-outline{border:1px solid #cbd5e1;padding:0.375rem 0.5rem;border-radius:0.375rem}</style>
</div>

<form method="post" class="bg-white rounded shadow p-4 space-y-4">
  {% csrf_token %}
  {% if creating %}
    <div>
      <label class="block text-sm font-medium mb-1">Username</label>
      <input type="text" name="username" value="{{ form.username.value|default:'' }}" class="w-full border rounded px-3 py-2" required>
      {% if form.username.errors %}<p class="text-red-600 text-sm">{{ form.username.errors.0 }}</p>{% endif %}
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Email</label>
      <input type="email" name="email" value="{{ form.email.value|default:'' }}" class="w-full border rounded px-3 py-2">
      {% if form.email.errors %}<p class="text-red-600 text-sm">{{ form.email.errors.0 }}</p>{% endif %}
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Role</label>
      {{ form.role }}
      {% if form.role.errors %}<p class="text-red-600 text-sm">{{ form.role.errors.0 }}</p>{% endif %}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium mb-1">Password</label>
        <input type="password" name="password1" class="w-full border rounded px-3 py-2" required>
        {% if form.password1.errors %}<p class="text-red-600 text-sm">{{ form.password1.errors.0 }}</p>{% endif %}
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">Confirm Password</label>
        <input type="password" name="password2" class="w-full border rounded px-3 py-2" required>
        {% if form.password2.errors %}<p class="text-red-600 text-sm">{{ form.password2.errors.0 }}</p>{% endif %}
      </div>
    </div>
  {% else %}
    <div>
      <label class="block text-sm font-medium mb-1">Username</label>
      <input type="text" value="{{ item.username }}" class="w-full border rounded px-3 py-2 bg-gray-50" disabled>
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Email</label>
      <input type="email" name="email" value="{{ form.email.value|default:'' }}" class="w-full border rounded px-3 py-2">
      {% if form.email.errors %}<p class="text-red-600 text-sm">{{ form.email.errors.0 }}</p>{% endif %}
    </div>
    <div>
      <label class="block text-sm font-medium mb-1">Role</label>
      {{ form.role }}
      {% if form.role.errors %}<p class="text-red-600 text-sm">{{ form.role.errors.0 }}</p>{% endif %}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium mb-1">New Password (optional)</label>
        <input type="password" name="password1" class="w-full border rounded px-3 py-2">
      </div>
      <div>
        <label class="block text-sm font-medium mb-1">Confirm New Password</label>
        <input type="password" name="password2" class="w-full border rounded px-3 py-2">
      </div>
    </div>
  {% endif %}

  <div class="pt-2">
    <button class="btn" type="submit">Save</button>
    <style>.btn{background:#1d4ed8;color:#fff;padding:0.5rem 0.75rem;border-radius:0.375rem}</style>
  </div>
</form>
{% endblock %}

