{% extends 'core/base.html' %}
{% load static %}
{% load widget_tweaks %}
{% block title %}
  Medwings | Sign Up
{% endblock title %}

{% block content %}
  <div class="flex flex-col justify-center items-center gap-2 py-4 mx-4 max-w-4xl">
    <h2>Register</h2>
    <form method="post">
      {% csrf_token %}
      <fieldset class="flex flex-col gap-4 items-center max-w-sm sm:max-w-lg">
        <legend>Please enter your profile information</legend>

        {% if form.non_field_errors %}
          <div class="flex flex-col gap-2 status-message error">
            {% for error in form.non_field_errors %}
              <p class="error">{{ error }}</p>
            {% endfor %}
          </div>
        {% endif %}

        <div class="flex flex-col sm:flex-none sm:grid sm:grid-cols-2 gap-6">

          <div class="flex flex-col">
            {% render_field user_form.first_name|add_error_class:"error" %}
            <label for="{{ user_form.first_name.id_for_label }}">
                {% render_field user_form.first_name.label %}
            </label>
            {% if user_form.first_name.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in user_form.first_name.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="flex flex-col">
            {% render_field user_form.last_name|add_error_class:"error" %}
            <label for="{{ user_form.last_name.id_for_label }}">
                {% render_field user_form.last_name.label %}
            </label>
            {% if user_form.last_name.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in user_form.last_name.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="flex flex-col">
            {% render_field profile_form.date_of_birth|add_error_class:"error" %}
            <label for="{{ profile_form.date_of_birth.id_for_label }}">
                {% render_field profile_form.date_of_birth.label %}
            </label>
            {% if profile_form.date_of_birth.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in profile_form.date_of_birth.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="flex flex-col">
            {% render_field profile_form.sex|add_error_class:"error" %}
            <label for="{{ profile_form.sex.id_for_label }}">
                {% render_field profile_form.sex.label %}
            </label>
            {% if profile_form.sex.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in profile_form.sex.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="flex flex-col">
            {% render_field user_form.email|add_error_class:"error" %}
            <label for="{{ user_form.email.id_for_label }}">
                {% render_field user_form.email.label %}
            </label>
            {% if user_form.email.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in user_form.email.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="flex flex-col">
            {% render_field user_form.username|add_error_class:"error" %}
            <label for="{{ user_form.username.id_for_label }}">
                {% render_field user_form.username.label %}
            </label>
            {% if user_form.username.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in user_form.username.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="flex flex-col">
            {% render_field user_form.password1|add_error_class:"error" %}
            <label for="{{ user_form.password1.id_for_label }}">
                {% render_field user_form.password1.label %}
            </label>
            {% if user_form.password1.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in user_form.password1.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

          <div class="flex flex-col">
            {% render_field user_form.password2|add_error_class:"error" %}
            <label for="{{ user_form.password2.id_for_label }}">
                {% render_field user_form.password2.label %}
            </label>
            {% if user_form.password2.errors %}
              <div class="flex flex-col gap-2 status-message error">
                {% for error in user_form.password2.errors %}
                  <p class="error">{{ error }}</p>
                {% endfor %}
              </div>
            {% endif %}
          </div>

        </div>

        <input class="max-w-64" type="submit" value="Register">

      </fieldset>
    </form>
  </div>
{% endblock content %}
