{% extends "base.html" %}

{% block content %}

<main class="w-full flex-grow flex justify-center items-end md:items-center">
  <form action="{{ url_for("new") }}" method="POST" class="border-2 border-base-300 w-full md:w-md p-6 m-4 rounded-lg shadow-lg bg-base-100">
      {{ form.hidden_tag() }}

      <h1 class="text-3xl font-semibold text-center text-info-content mb-4">New wishlist</h1>

      <legend class="fieldset-legend">{{ form.title.label.text }}</legend>
      {{ form.title(class="w-full input validator mt-1 mb-4", placeholder="Wishlist Title") }}

      <legend class="fieldset-legend">{{ form.description.label.text }}</legend>
      {{ form.description(class="w-full textarea validator mt-1 mb-2", placeholder="Wishlist Description") }}
      <div class="validator-hint">Please make sure that both inputs are filled.</div>

      {{ form.submit(class="btn btn-soft btn-success w-full") }}
  </form>
</main>

{% endblock content %}