{% extends "layout/layout.html" %}
{% from "forms/validation-block.html" import form_field_validation %}
{% from "forms/submit-btn.html" import form_submit_button %}
{% from "layout/inner_header.html" import inner_header%} 
{% 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="my-3 my-md-5">
      {{ inner_header("Register") }}
    </div>
    <form class="row g-3 needs-validation" method="post" novalidate>
      <div class="col-12">
        <label class="form-label" for="name">Name</label>
        <input 
          class="form-control" 
          id="name" 
          maxlength="255"
          name="name" 
          pattern="[A-Za-z ]{2,255}" 
          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"
          name="lastname"
          pattern="[A-Za-z ]{2,255}"
          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" name="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" name="phonenumber" pattern="(\+\d{1,3}){0,1}[0-9]{7,255}" 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" name="email" placeholder="Enter your email address" pattern="[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$" required >
        {{ 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"
          name="password"
          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"
          name="password_confirmation"
          placeholder="Repeat password"
          required
          type="password" 
        >
        {{ form_field_validation(FORM_ERRORS['REQUIRED'] + " " + FORM_ERRORS['PASSWORD_LENGTH'] + " " + FORM_ERRORS['MUST_MATCH_PASSWORD']) }}
      </div>
      <div class="col-12">
        <label class="form-label" for="address">Address</label>
        <input class="form-control" id="address" maxlength="255" name="address" placeholder="1234 Main St" required type="text">
        {{ form_field_validation(FORM_ERRORS['REQUIRED']) }}
      </div>
      <div class="col-12 text-center">
        {{ form_submit_button("Register") }}
      </div>
    </form>
  </div>
</div>
<script src="{{ url_for('static', filename='js/validate-form.js') }}"></script>
<script src="{{ url_for('static', filename='js/passwords-match.js') }}"></script>
{% endblock %}