{% extends 'admin_panel/base.html' %}
{% block title %}{{ action }} User{% endblock %}
{% block page_title %}{{ action }} User{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header p-3">
        <i class="bi bi-person-{% if action == 'Create' %}plus{% else %}pencil{% endif %} me-2" style="color:#a855f7;"></i>
        {{ action }} User
      </div>
      <div class="card-body">
        <form method="post">
          {% csrf_token %}

          {% if action == 'Create' %}
          <div class="mb-3">
            <label class="form-label fw-semibold">Username <span class="text-danger">*</span></label>
            <input type="text" name="username" class="form-control" required
                   placeholder="e.g. john_doe">
          </div>
          {% else %}
          <div class="mb-3">
            <label class="form-label fw-semibold">Username</label>
            <input type="text" class="form-control bg-light" value="{{ edit_user.username }}" disabled>
            <div class="form-text">Username cannot be changed.</div>
          </div>
          {% endif %}

          <div class="row g-3 mb-3">
            <div class="col-sm-6">
              <label class="form-label fw-semibold">First Name</label>
              <input type="text" name="first_name" class="form-control"
                     value="{{ edit_user.first_name|default:'' }}" placeholder="First name">
            </div>
            <div class="col-sm-6">
              <label class="form-label fw-semibold">Last Name</label>
              <input type="text" name="last_name" class="form-control"
                     value="{{ edit_user.last_name|default:'' }}" placeholder="Last name">
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Email</label>
            <input type="email" name="email" class="form-control"
                   value="{{ edit_user.email|default:'' }}" placeholder="user@example.com">
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">
              Password {% if action == 'Edit' %}<span class="text-muted fw-normal">(leave blank to keep current)</span>{% else %}<span class="text-danger">*</span>{% endif %}
            </label>
            <input type="password" name="password" class="form-control"
                   {% if action == 'Create' %}required{% endif %}
                   placeholder="{% if action == 'Edit' %}Enter new password to change{% else %}Set a strong password{% endif %}">
          </div>

          <hr class="my-3">

          <div class="mb-3">
            <p class="fw-semibold mb-2">Permissions</p>
            <div class="form-check mb-2">
              <input class="form-check-input" type="checkbox" name="is_active" id="is_active"
                     {% if action == 'Create' or edit_user.is_active %}checked{% endif %}>
              <label class="form-check-label" for="is_active">
                <strong>Active</strong> — user can log in
              </label>
            </div>
            <div class="form-check mb-2">
              <input class="form-check-input" type="checkbox" name="is_staff" id="is_staff"
                     {% if edit_user.is_staff %}checked{% endif %}>
              <label class="form-check-label" for="is_staff">
                <strong>Staff</strong> — can access admin panel and see all houses
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="is_superuser" id="is_superuser"
                     {% if edit_user.is_superuser %}checked{% endif %}>
              <label class="form-check-label" for="is_superuser">
                <strong>Superuser</strong> — full system access, sees all houses
              </label>
            </div>
          </div>

          <hr class="my-3">

          <div class="mb-3">
            <p class="fw-semibold mb-1">House Access</p>
            <p class="text-muted small mb-2">
              Select which houses this user can view. Staff and superusers automatically see all houses.
            </p>
            {% if all_houses %}
            <div class="border rounded p-3" style="max-height:220px;overflow-y:auto;">
              {% for house in all_houses %}
              <div class="form-check mb-1">
                <input class="form-check-input" type="checkbox" name="allowed_houses"
                       value="{{ house.id }}" id="house_{{ house.id }}"
                       {% if house.id in user_house_ids %}checked{% endif %}>
                <label class="form-check-label" for="house_{{ house.id }}">
                  <strong>{{ house.house_number }}</strong>
                  <span class="text-muted small">— {{ house.village.name }}, {{ house.district.name }}</span>
                </label>
              </div>
              {% endfor %}
            </div>
            {% else %}
            <p class="text-muted small">No houses available yet.</p>
            {% endif %}
          </div>

          <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i> {{ action }} User
            </button>
            <a href="{% url 'admin_user_list' %}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}