{% extends "admin_frontend/base.html" %}
{% load crispy_forms_tags %}
{% 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 %}
  <input type="hidden" name="next" value="{{ request.get_full_path }}">
  {% if creating %}
    {% if form.username %}{{ form.username|as_crispy_field }}{% endif %}
    {% if form.email %}{{ form.email|as_crispy_field }}{% endif %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.first_name %}{{ form.first_name|as_crispy_field }}{% endif %}</div>
      <div>{% if form.last_name %}{{ form.last_name|as_crispy_field }}{% endif %}</div>
    </div>
    {% if form.role %}{{ form.role|as_crispy_field }}{% endif %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.password1 %}{{ form.password1|as_crispy_field }}{% endif %}</div>
      <div>{% if form.password2 %}{{ form.password2|as_crispy_field }}{% 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>
    {% if form.email %}{{ form.email|as_crispy_field }}{% endif %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.first_name %}{{ form.first_name|as_crispy_field }}{% endif %}</div>
      <div>{% if form.last_name %}{{ form.last_name|as_crispy_field }}{% endif %}</div>
    </div>
    {% if form.role %}{{ form.role|as_crispy_field }}{% endif %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>{% if form.password1 %}{{ form.password1|as_crispy_field }}{% endif %}</div>
      <div>{% if form.password2 %}{{ form.password2|as_crispy_field }}{% endif %}</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 %}
