{% extends "base.html" %}
{% block content %}
<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-6-tablet is-4-desktop">
        <div class="box register-anim-box">
          <h1 class="title has-text-centered animated-heading">
            <i class="fas fa-user-plus"></i> Regístrate
          </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" spellcheck="false">
            {% csrf_token %}
            <div class="field field-anim">
              <label class="label" for="id_username">
                <i class="fas fa-user"></i> Usuario
              </label>
              <div class="control has-icons-left">
                <input class="input animated-input" id="id_username" name="username" type="text" placeholder="Elige un usuario" required>
                <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_email">
                <i class="fas fa-envelope"></i> Correo electrónico
              </label>
              <div class="control has-icons-left">
                <input class="input animated-input" id="id_email" name="email" type="email" placeholder="ejemplo@correo.com" required>
                <span class="icon is-small is-left"><i class="fas fa-envelope"></i></span>
              </div>
            </div>
            <div class="field field-anim">
              <label class="label" for="id_password1">
                <i class="fas fa-lock"></i> Contraseña
              </label>
              <div class="control has-icons-left">
                <input class="input animated-input" id="id_password1" name="password1" type="password" placeholder="Crea una contraseña" required>
                <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
              </div>
            </div>
            <div class="field field-anim">
              <label class="label" for="id_password2">
                <i class="fas fa-lock"></i> Confirmar contraseña
              </label>
              <div class="control has-icons-left">
                <input class="input animated-input" id="id_password2" name="password2" type="password" placeholder="Repite la 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:1.2rem;">
              <button type="submit" class="button is-primary is-fullwidth btn-anim">
                <i class="fas fa-user-plus"></i> Crear cuenta
              </button>
            </div>
          </form>
          <div class="has-text-centered" style="margin-top:1.5rem;">
            <p>¿Ya tienes cuenta? 
              <a href="{% url 'accounts:login' %}" style="color:#801616;text-decoration:underline;">
                Inicia sesión aquí
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
.register-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.3s 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 15px 2px #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 %}