{% extends 'base.html' %}
{% block content %}
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-5-tablet is-4-desktop">
        <div class="box login-anim-box">
          <h1 class="title has-text-centered animated-heading"><i class="fas fa-sign-in-alt"></i> Iniciar Sesión</h1>

          {% if messages %}
            {% for message in messages %}
              <div class="notification is-danger is-light has-text-centered">{{ message }}</div>
            {% endfor %}
          {% endif %}

          <form method="post" autocomplete="off">
            {% csrf_token %}
            <div class="field field-anim">
              <label class="label" for="id_username">Usuario</label>
              <div class="control has-icons-left">
                <input class="input animated-input" type="text" name="username" id="id_username" placeholder="Ingresa tu usuario" required autofocus>
                <span class="icon is-small is-left">
                  <i class="fas fa-user"></i>
                </span>
              </div>
            </div>

            <div class="field field-anim">
              <label class="label" for="id_password">Contraseña</label>
              <div class="control has-icons-left">
                <input class="input animated-input" type="password" name="password" id="id_password" placeholder="Ingresa tu contraseña" required>
                <span class="icon is-small is-left">
                  <i class="fas fa-lock"></i>
                </span>
              </div>
            </div>

            <div class="field" style="margin-top:1rem;">
              <div class="control">
                <button class="button is-link is-fullwidth btn-anim">
                  <i class="fas fa-sign-in-alt"></i> Iniciar sesión
                </button>
              </div>
            </div>
          </form>
          <div class="has-text-centered" style="margin-top:1.5rem;">
            <p>
              ¿No tienes cuenta?
              <a href="{% url 'accounts:register' %}" style="color:#801616;text-decoration:underline;">
                Regístrate aquí
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
.login-anim-box {
  animation: popin 0.9s cubic-bezier(.62,.04,.36,1.59);
  box-shadow: 0 2px 10px rgba(128,22,22,0.12);
  border-radius: 12px;
  padding: 2rem;
}
@keyframes popin {
  0% { opacity:0; transform: scale(0.85) translateY(40px);}
  100% { opacity:1; transform: scale(1) translateY(0);}
}
.animated-heading {
  animation: fadeInUpLogin 1.2s cubic-bezier(.39,.575,.565,1);
}
@keyframes fadeInUpLogin {
  from { opacity:0; transform:translateY(22px);}
  to { opacity:1; transform:none;}
}
.animated-input {
  transition: box-shadow 0.3s, border-color 0.3s;
}
.animated-input:focus {
  box-shadow: 0 0 12px 1px #e9cb8b33;
  border-color: #801616;
}
.field-anim {
  animation: fadeField 1.4s cubic-bezier(.39,.575,.565,1);
}
@keyframes fadeField {
  from { opacity:0; transform:translateX(-30px);}
  to { opacity:1; transform:none;}
}
.btn-anim {
  transition: background 0.21s, box-shadow 0.21s, transform 0.19s;
}
.btn-anim:hover {
  background: #e9cb8b;
  color: #801616;
  box-shadow: 0 2px 14px #e9cb8b77;
  transform: translateY(-2px) scale(1.04);
}
</style>
{% endblock %}