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

{% block contenido %}
<div class="container-xxl py-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container text-center">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <i class="bi bi-exclamation-triangle display-1 text-primary"></i>
                <h1 class="display-1"></h1>
                <h1 class="mb-4">Crea una nueva contraseña</h1>
                <p class="mb-3">Escribe la nueva contraseña con la que ingresarás al sistema.</p>
                <div class="col-lg-12 col-md-12 wow fadeInUp" data-wow-delay="0.5s">
                  <form method="post">
                       {% csrf_token %}
                      <div class="row g-3">
                          <div class="col-12">
                              <div class="form-floating">
                                  <input type="password" name="new_password1" class="form-control" autocomplete="new-password" required  id="id_new_password1" placeholder="Nueva contraseña">
                                  <label for="email">Nueva contraseña</label>
                              </div>
                          </div>
                          <div class="col-12">
                              <div class="form-floating">
                                  <input type="password" name="new_password2" autocomplete="new-password" required id="id_new_password2" class="form-control" placeholder="Confirmar contraseña">
                                  <label for="email">Confirmar contraseña</label>
                              </div>
                          </div>
                          <div class="form-group text-center">
                            {% for field in form %}
                              {% if field.errors %}
                                  <small class="errors" id="errors">{{ field.errors|striptags  }}</small> 
                              {% endif %}
                            {% endfor %}
                          </div>

                          <div class="col-12">
                              <a class="btn btn-primary rounded-pill py-3 px-5" href="{% url  'iniciar_sesion' %}">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                      <path d="M19 18v-6a3 3 0 0 0 -3 -3h-7" />
                                      <path d="M13 13l-4 -4l4 -4m-5 8l-4 -4l4 -4" />
                                  </svg>
                              Regresar al inicio
                              </a>
                              <button type="submit" class="btn btn-primary rounded-pill py-3 px-5">
                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                      <path d="M14 6l7 7l-2 2" />
                                      <path d="M10 10l-4.172 4.172a2.828 2.828 0 1 0 4 4l4.172 -4.172" />
                                      <path d="M16 12l4.414 -4.414a2 2 0 0 0 0 -2.829l-1.171 -1.171a2 2 0 0 0 -2.829 0l-4.414 4.414" />
                                      <path d="M4 20l1.768 -1.768" />
                                      <path d="M3 3l18 18" />
                                  </svg>
                              Restablecer
                              </button>
                          </div>
                      </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock contenido %}