{% extends 'base.html' %}
{% load static %}

{% block title %}Новый пароль{% endblock %}

{# Раннее применение темы — синхронно с переключателем из base.html #}
{% block extra_css %}
<script>
(function(){
  const root  = document.documentElement;
  const media = window.matchMedia('(prefers-color-scheme: dark)');
  const getSaved = () => localStorage.getItem('theme') || 'auto';
  const effective = (m) => m === 'auto' ? (media.matches ? 'dark' : 'light') : m;
  const apply = () => root.setAttribute('data-bs-theme', effective(getSaved()));
  apply();
  media.addEventListener('change', () => { if (getSaved()==='auto') apply(); });
})();
</script>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="card shadow">
      <div class="card-header bg-primary text-white">
        <h3 class="mb-0">Установка нового пароля</h3>
      </div>

      <div class="card-body">
        {# Общие ошибки формы #}
        {% if form.non_field_errors %}
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
          {% for error in form.non_field_errors %}
            <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
            {% if not forloop.last %}<br>{% endif %}
          {% endfor %}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endif %}

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

          <div class="mb-4 form-floating position-relative">
            <input
              type="password"
              name="{{ form.new_password1.html_name }}"
              id="{{ form.new_password1.auto_id|default:'id_new_password1' }}"
              class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}"
              placeholder="Новый пароль"
              autocomplete="new-password"
              required
              autofocus
            >
            <label for="{{ form.new_password1.auto_id|default:'id_new_password1' }}">Новый пароль</label>
            <i class="bi bi-eye-slash password-toggle position-absolute top-50 end-0 translate-middle-y me-3"
               data-target="#{{ form.new_password1.auto_id|default:'id_new_password1' }}"
               style="cursor:pointer; z-index:5"></i>
            {% if form.new_password1.errors %}
              <div class="invalid-feedback">
                {{ form.new_password1.errors|striptags }}
              </div>
            {% elif form.new_password1.help_text %}
              <div class="form-text mt-2">{{ form.new_password1.help_text|safe }}</div>
            {% endif %}
          </div>

          <div class="mb-4 form-floating position-relative">
            <input
              type="password"
              name="{{ form.new_password2.html_name }}"
              id="{{ form.new_password2.auto_id|default:'id_new_password2' }}"
              class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}"
              placeholder="Подтвердите пароль"
              autocomplete="new-password"
              required
            >
            <label for="{{ form.new_password2.auto_id|default:'id_new_password2' }}">Подтвердите пароль</label>
            <i class="bi bi-eye-slash password-toggle position-absolute top-50 end-0 translate-middle-y me-3"
               data-target="#{{ form.new_password2.auto_id|default:'id_new_password2' }}"
               style="cursor:pointer; z-index:5"></i>
            {% if form.new_password2.errors %}
              <div class="invalid-feedback">
                {{ form.new_password2.errors|striptags }}
              </div>
            {% endif %}
          </div>

          <button type="submit" class="btn btn-primary btn-lg w-100">
            <i class="bi bi-key me-2"></i>Установить пароль
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function(){
  // Переключение видимости пароля
  document.querySelectorAll('.password-toggle').forEach(icon => {
    icon.addEventListener('click', function(){
      const input = document.querySelector(this.getAttribute('data-target'));
      if (!input) return;
      input.type = input.type === 'password' ? 'text' : 'password';
      this.classList.toggle('bi-eye');
      this.classList.toggle('bi-eye-slash');
    });
  });
});
</script>
{% endblock %}