{% extends "layout/layout.html" %}
{% from "forms/validation-block.html" import form_field_validation %} 
{% block title %} register {% endblock %}
{% block head %} 
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/register.css') }}">
{% endblock %} 
{% block content %}
<div class="container">
  <div class="register mx-auto">
    <div class="row my-3 my-md-5">
      <div class="col-2 register__header-logo">
      </div>
      <div class="col-10 gx-md-4 gx-0">
        <h1 class="register__header-title">Register</h1>
      </div>
    </div>
    <form class="row g-3 needs-validation" novalidate>
      <div class="col-12">
        <label class="form-label" for="name">Name</label>
        <input 
          class="form-control" 
          id="name" 
          maxlength="255" 
          pattern="([A-Za-z]{2,}[A-Za-z ]*)" 
          placeholder="Enter your name" 
          required
          type="text"
        > 
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }}
      </div>
      <div class="col-12">
        <label class="form-label" for="lastname">Lastname</label>
        <input
          class="form-control"
          id="lastname"
          maxlength="255"
          pattern="([A-Za-z]{2,}[A-Za-z ]*)"
          placeholder="Enter your lastname" 
          required
          type="text" 
        >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['NAME_FORMAT']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="birthdate">Birthdate</label>
        <input class="form-control" id="birthdate" required type="date">
        {{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="phonenumber">Phone number</label>
        <input class="form-control" id="phonenumber" pattern="(\+\d{1,3}){0,1}[0-9]{7,}" placeholder="Enter your phone number" required type="tel">
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PHONE_NUMBER_FORMAT']) }}
      </div>
      <div class="col-12">
        <label class="form-label" for="email">Email</label>
        <input class="form-control" id="email" maxlength="255" placeholder="Enter your email address" required type="email">
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['VALID_EMAIL']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="password">Password</label>
        <input 
          class="form-control" 
          id="password" 
          maxlength="255"
          minlength="6"
          placeholder="Enter password"
          required
          type="password" 
        >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }}
      </div>
      <div class="col-md-6">
        <label class="form-label" for="password-confirmation">Repeat password</label>
        <input 
          class="form-control" 
          id="password-confirmation" 
          maxlength="255"
          minlength="6"
          placeholder="Repeat password"
          required
          type="password" 
        >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH']) }}
      </div>
      <div class="col-12">
        <label class="form-label" for="inputAddress">Address</label>
        <input class="form-control" id="inputAddress" maxlength="255" placeholder="1234 Main St" required type="text">
        {{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
      </div>
      <div class="col-12 text-center">
        <button class="btn btn-outline-primary register__form-button" type="submit">Register</button>
      </div>
    </form>
  </div>
</div>
<script>
  (() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()
</script>
{% endblock %}