<div class="modal modal-blur fade" id="login" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
               <div class="modal-header">
                    <h5 class="modal-title">Iniciar sesión</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="card-body">
                    <div id="error-container" class="mb-3 text-danger"></div>
                    <form autocomplete="off" method="POST" action="{% url 'iniciar_sesion' %}" id="login-form">
                         {% csrf_token %}
                         <div class="mb-3">
                              <label class="form-label">Usuario</label>
                              <input type="text" class="form-control" placeholder="Ingresa tu nombre de usuario"
                                     id="username" name="username" autocomplete="off" required>
                         </div>
                         <div class="mb-3">
                              <label class="form-label">Contraseña</label>
                              <div class="input-group input-group-flat">
                                   <input type="password" class="form-control" name="password"
                                          placeholder="Ingresa tu contraseña" autocomplete="off" id="password"
                                          required>
                              </div>
                         </div>
                         <div class="form-footer">
                              <button type="submit" class="btn btn-primary w-100">Iniciar sesión</button>
                         </div>

                         <div class="mt-3 d-flex justify-content-center align-items-center">
                              <a class="text-dark" href="{% url 'password_reset' %}">¿Has olvidado tu contraseña?</a>
                         </div>
                    </form>
               </div>
          </div>
     </div>
</div>
