{% extends 'base.html' %}

{% block title %}Create User{% endblock %}

{% block content %}
<section class="content-section">
  <section class="surface-card p-4 p-lg-5 skeleton-on-load">
    <div class="mb-4">
      <h1 class="h4 fw-bold mb-0">{% if managed_user %}Edit User{% else %}Create User{% endif %}</h1>
    </div>

    <form id="userManagementForm" method="post" novalidate>
      {% csrf_token %}

      {% if form.non_field_errors %}
        <div class="alert alert-danger" role="alert">{{ form.non_field_errors }}</div>
      {% endif %}

      <div class="row g-3">
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="id_first_name">First Name</label>
          {{ form.first_name }}
          {% if form.first_name.errors %}<div class="invalid-feedback d-block">{{ form.first_name.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="id_last_name">Last Name</label>
          {{ form.last_name }}
          {% if form.last_name.errors %}<div class="invalid-feedback d-block">{{ form.last_name.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="id_email">Email</label>
          {{ form.email }}
          <div class="form-text">Used as the login username for this account.</div>
          {% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="id_role">Role</label>
          {{ form.role }}
          {% if form.role.errors %}<div class="invalid-feedback d-block">{{ form.role.errors|join:', ' }}</div>{% endif %}
        </div>
        {% if managed_user %}
          <div class="col-md-6 col-xl-3">
            <div class="surface-card h-100 user-status-card">
              <div class="form-check">
                {{ form.is_active }}
                <label class="form-check-label fw-semibold" for="{{ form.is_active.id_for_label }}">Active account</label>
              </div>
              <p class="small text-muted mb-0 mt-2">Inactive users stay in the system but cannot sign in.</p>
              {% if form.is_active.errors %}<div class="invalid-feedback d-block">{{ form.is_active.errors|join:', ' }}</div>{% endif %}
            </div>
          </div>
        {% endif %}
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="id_password1">Password</label>
          {% if form.password1 %}
            <div class="input-group password-field-group">
              {{ form.password1 }}
              <button
                class="btn btn-outline-secondary password-toggle-btn"
                type="button"
                data-password-toggle
                data-target="id_password1"
                aria-controls="id_password1"
                aria-label="Show password"
              >
                <i class="bi bi-eye-fill" aria-hidden="true"></i>
              </button>
            </div>
            {% if managed_user %}<div class="form-text">{{ form.password1.help_text }}</div>{% endif %}
            <div class="caps-lock-hint" data-caps-lock-for="id_password1" role="status" aria-live="polite">Caps Lock is on.</div>
            {% if form.password1.errors %}<div class="invalid-feedback d-block">{{ form.password1.errors|join:', ' }}</div>{% endif %}
          {% else %}
            <div class="user-password-note">
              Password updates stay in the account security flow and are not edited from this screen.
            </div>
          {% endif %}
        </div>
        <div class="col-md-6 col-xl-3">
          <label class="form-label" for="id_password2">Confirm Password</label>
          {% if form.password2 %}
            <div class="input-group password-field-group">
              {{ form.password2 }}
              <button
                class="btn btn-outline-secondary password-toggle-btn"
                type="button"
                data-password-toggle
                data-target="id_password2"
                aria-controls="id_password2"
                aria-label="Show password"
              >
                <i class="bi bi-eye-fill" aria-hidden="true"></i>
              </button>
            </div>
            <div class="caps-lock-hint" data-caps-lock-for="id_password2" role="status" aria-live="polite">Caps Lock is on.</div>
            {% if form.password2.errors %}<div class="invalid-feedback d-block">{{ form.password2.errors|join:', ' }}</div>{% endif %}
          {% else %}
            <div class="user-password-note">
              Use the user's password-reset flow or Django admin if you need to rotate credentials.
            </div>
          {% endif %}
        </div>
      </div>

      <div class="d-flex justify-content-end gap-2 mt-4">
        <a href="{% if managed_user %}{% url 'accounts:user_edit' managed_user.pk %}{% else %}{% url 'accounts:register' %}{% endif %}" class="btn btn-outline-secondary">Reset</a>
        <button type="submit" class="btn btn-brand">{{ submit_label }}</button>
      </div>
    </form>
  </section>

  <section class="surface-card dashboard-panel skeleton-on-load">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
      <h3 class="h6 fw-semibold mb-0">Users</h3>
      <span class="badge text-bg-light border px-3 py-2">{{ users|length }} user{{ users|length|pluralize }}</span>
    </div>

    <div class="table-responsive">
      <table class="table table-hover align-middle claim-table mb-0">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
            <th>Status</th>
            <th>Created</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for account in users %}
            <tr{% if managed_user and managed_user.pk == account.pk %} class="table-active"{% endif %}>
              <td>
                <div class="claim-table__primary">
                  {{ account.get_full_name|default:account.email }}
                  {% if request.user.pk == account.pk %}<span class="badge text-bg-light border ms-2">You</span>{% endif %}
                </div>
                <div class="claim-table__secondary">
                  {% if account.is_superuser %}
                    Superuser access
                  {% elif account.is_staff %}
                    Staff access
                  {% else %}
                    Standard access
                  {% endif %}
                </div>
              </td>
              <td>{{ account.email }}</td>
              <td>{{ account.role }}</td>
              <td>
                {% if account.is_active %}
                  <span class="badge text-bg-success-subtle border text-success-emphasis">Active</span>
                {% else %}
                  <span class="badge text-bg-secondary border">Inactive</span>
                {% endif %}
              </td>
              <td>{{ account.created_at|date:'d M Y' }}</td>
              <td class="text-end">
                <a href="{% url 'accounts:user_edit' account.pk %}" class="btn btn-outline-secondary btn-sm">Edit</a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
</section>
{% endblock %}