{% extends "base" %}
{% block title %}{% endblock %}
{% block body %}
<div class="hero h-fit">
    <div class="hero-content flex-col text-center mt-12 lg:mt-48">
      <h1 class="text-3xl font-bold">¿Cuál es tu estación favorita?</h1>
      <form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200" id="test-form"
        action="/finish" method="post">
        <div class="card-body">
        <input type="hidden" name="username" id="username" value="{{ username }}" />
          <div class="form-control mt-2">
            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-0">Verano</button>
          </div>
          <div class="form-control mt-2">
            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-1">Primavera</button>
          </div>
          <div class="form-control mt-2">
            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-2">Otoño</button>
          </div>
          <div class="form-control mt-2">
            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-3">Invierno</button>
          </div>
        </div>
      </form>
    </div>
  </div>
<script>
    function debounce(callback, wait) {
        let timeout;
        return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(function () { callback.apply(this, args); }, wait);
        };
    }

    document.querySelector("#username").onkeyup = debounce(() => {
        if(document.querySelector("#username").value.length != 0)
        {
            document.querySelector("#continue-btn").classList.remove("btn-disabled");
            document.querySelector("#continue-btn").removeAttribute("disabled");
        } else {
            document.querySelector("#continue-btn").classList.add("btn-disabled");
            document.querySelector("#continue-btn").disabled = true;
        }
    }, 100);
</script>
{% endblock %}