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


{% 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="p-3 card">
    <h2 class="mb-3 h4 border-bottom py-2">
      <i class="bi bi-shield-lock "></i>
      {% if form.user.has_usable_password %}
        {% trans "Change Password" %}
      {% else %}
        {% trans "Set Password" %}
      {% endif %}
    </h2>
    <p class="alert mx-0 small alert-info gap-1">
      <span class="mr-1"> {% trans "Update the password for: " %}</span>  <strong> {{ form.user.username|capfirst }}</strong>
    </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 %}

        {% for field in form.visible_fields %}
            <div class="form-group mb-2">
                <label class="form-label" for="{{ field.id_for_label }}" > {{ field.label }} </label>
                <input class="form-control" id="{{ field.id_for_label }}" name="{{ field.html_name }}" type="{{ field.widget_type }}" />
                {% if field.errors %}
                    <p class="text-danger mb-0 small"> *{{ field.errors|first }} </p>
                {% endif %}
            </div>
        {% endfor %}

        <!-- Form Actions -->
        <div class="form-actions flex-wrap ">
        {% 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>
        {% 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 %}