{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}{% if form.errors %}{% trans "Error:" %} {% endif %}{{ block.super }}{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    .password-change-container {
      max-width: 600px;
      margin: 2rem auto;
      padding: 0 1.5rem;
    }

    .password-form-card {
      background-color: white;
      border: 1px solid #dee2e6;
      border-radius: 0.5rem;
      padding: 2rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .password-form-card h2 {
      font-size: 1.75rem;
      font-weight: 700;
      color: #212529;
      margin-bottom: 0.5rem;
    }

    .password-form-card .form-subtitle {
      color: #6c757d;
      font-size: 0.95rem;
      margin-bottom: 1.5rem;
    }

    .password-form-card .alert {
      border-radius: 0.375rem;
      border: none;
      margin-bottom: 1.5rem;
    }

    .password-form-card .form-group {
      margin-bottom: 1.5rem;
    }

    .password-form-card label {
      font-weight: 600;
      color: #212529;
      margin-bottom: 0.5rem;
      display: block;
    }

    .password-form-card input[type="password"],
    .password-form-card input[type="text"],
    .password-form-card input[type="checkbox"] {
      border: 1px solid #dee2e6;
      border-radius: 0.375rem;
      font-size: 0.95rem;
      transition: border-color 0.2s ease;
    }

    .password-form-card input[type="password"],
    .password-form-card input[type="text"] {
      width: 100%;
      padding: 0.75rem 1rem;
    }

    .password-form-card input[type="password"]:focus,
    .password-form-card input[type="text"]:focus {
      outline: none;
      border-color: #0d6efd;
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    .password-form-card input[type="checkbox"] {
      width: 1.25rem;
      height: 1.25rem;
      margin-right: 0.5rem;
      cursor: pointer;
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 500;
      cursor: pointer;
      margin: 0;
    }

    .password-form-card .helptext {
      display: block;
      font-size: 0.85rem;
      color: #6c757d;
      margin-top: 0.5rem;
      line-height: 1.5;
    }

    .password-form-card .helptext ul {
      margin: 0.5rem 0 0 1.5rem;
      padding: 0;
    }

    .password-form-card .helptext li {
      margin-bottom: 0.25rem;
    }

    .password-form-card ul.errorlist {
      list-style: none;
      padding: 0;
      margin: 0.5rem 0;
    }

    .password-form-card ul.errorlist li {
      color: #721c24;
      font-size: 0.85rem;
      background-color: #f8d7da;
      padding: 0.5rem 0.75rem;
      border-radius: 0.375rem;
      margin-bottom: 0.5rem;
      border-left: 4px solid #dc3545;
    }

    .form-actions {
      display: flex;
      gap: 1rem;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid #dee2e6;
    }

    .form-actions button {
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      font-size: 0.95rem;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .form-actions .btn-primary {
      background-color: #0d6efd;
      color: white;
    }

    .form-actions .btn-primary:hover {
      background-color: #0b5ed7;
      transform: translateY(-1px);
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    .form-actions .btn-secondary {
      background-color: #6c757d;
      color: white;
    }

    .form-actions .btn-secondary:hover {
      background-color: #5a6268;
      transform: translateY(-1px);
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    .form-actions .btn-danger {
      background-color: #dc3545;
      color: white;
    }

    .form-actions .btn-danger:hover {
      background-color: #c82333;
      transform: translateY(-1px);
      box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    }

    .info-box {
      background-color: #e7f1ff;
      border-left: 4px solid #0d6efd;
      padding: 1rem;
      border-radius: 0.375rem;
      margin-bottom: 1.5rem;
      color: #0c63e4;
    }

    .info-box strong {
      color: #004085;
    }

    .form-hidden {
      display: none;
    }
  </style>
{% endblock %}

{% block page_title %}
  {% if form.user.has_usable_password %}
    {% trans "Change Password" %}
  {% else %}
    {% trans "Set Password" %}
  {% endif %}
{% endblock %}

{% block content %}
<div class="password-change-container">
  <div class="password-form-card">
    <h2>
      {% if form.user.has_usable_password %}
        {% trans "Change Password" %}
      {% else %}
        {% trans "Set Password" %}
      {% endif %}
    </h2>
    <p class="form-subtitle">{% blocktranslate with username=original %}Update the password for <strong>{{ username }}</strong>{% endblocktranslate %}</p>

    {% if form.errors %}
      <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>{% trans "Please correct the following errors:" %}</strong>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endif %}

    {% if not form.user.has_usable_password %}
      <div class="info-box">
        {% trans "This action will <strong>enable</strong> password-based authentication for this user." %}
      </div>
    {% endif %}

    <form method="post" id="password-form">
      {% csrf_token %}
      <input type="text" name="username" value="{{ original.get_username }}" class="form-hidden">

      <!-- Usable Password Checkbox -->
      <div class="form-group">
        <div class="checkbox-label">
          {{ form.usable_password }}
          <label for="{{ form.usable_password.id_for_label }}">{% trans "Use password authentication" %}</label>
        </div>
        {% if form.usable_password.help_text %}
          <div class="helptext">{{ form.usable_password.help_text|safe }}</div>
        {% endif %}
        {% if form.usable_password.errors %}
          <ul class="errorlist">
            {% for error in form.usable_password.errors %}<li>{{ error }}</li>{% endfor %}
          </ul>
        {% endif %}
      </div>

      <!-- Password Field 1 -->
      <div class="form-group">
        {{ form.password1.errors }}
        <label for="{{ form.password1.id_for_label }}">{{ form.password1.label }}</label>
        {{ form.password1 }}
        {% if form.password1.help_text %}
          <div class="helptext">{{ form.password1.help_text|safe }}</div>
        {% endif %}
      </div>

      <!-- Password Field 2 -->
      <div class="form-group">
        {{ form.password2.errors }}
        <label for="{{ form.password2.id_for_label }}">{{ form.password2.label }}</label>
        {{ form.password2 }}
        {% if form.password2.help_text %}
          <div class="helptext">{{ form.password2.help_text|safe }}</div>
        {% endif %}
      </div>

      <!-- Form Actions -->
      <div class="form-actions">
        {% if form.user.has_usable_password %}
          <button type="submit" name="set-password" class="btn-primary">
            <i class="bi bi-check-circle"></i> {% trans "Change Password" %}
          </button>
          <button type="submit" name="unset-password" class="btn-danger">
            <i class="bi bi-lock-fill"></i> {% trans "Disable Password" %}
          </button>
        {% else %}
          <button type="submit" name="set-password" class="btn-primary">
            <i class="bi bi-check-circle"></i> {% trans "Enable Password" %}
          </button>
        {% endif %}
      </div>
    </form>
  </div>
</div>

<script src="{% static 'admin/js/unusable_password_field.js' %}" defer></script>
{% endblock %}