{%extends 'sneat/authbase.html' %}

{%block content%}

<h4 class="mb-2">Adventure starts here 🚀</h4>
<p class="mb-4">Make your app management easy and fun!</p>

<form id="formAuthentication" class="mb-3" action="{{url_for('auth.register')}}" method="post">
  <div class="mb-3">

    <label class="form-label">{{ form.email.label }}</label>
    {{ form.email(class_="form-control", placeholder="Email", autocomplete="off", autofocus=true) }}
    <ul class="form-errors">
        {% for error in form.email.errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
</div>
<div class="mb-3 form-password-toggle">
    <label class="form-label" for="password">{{form.password.label}}</label>
    <div class="input-group input-group-merge">
        {{ form.password(class_="form-control", placeholder="Password") }}

        <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>

    </div>
    <ul class="form-errors">
        {% for error in form.password.errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
</div>
<div class="mb-3 form-password-toggle">
    <label class="form-label" for="password">{{ form.confirm.label }}</label>
    <div class="input-group input-group-merge">
        {{ form.confirm(class_="form-control", placeholder="Confirm Password") }}

        <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>

    </div>
    <ul class="form-errors">
        {% for error in form.password.errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
</div>

  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
      <label class="form-check-label" for="terms-conditions">
        I agree to
        <a href="javascript:void(0);">privacy policy & terms</a>
      </label>
    </div>
  </div>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
  <button class="btn btn-primary d-grid w-100">Sign up</button>
</form>

<p class="text-center">
  <span>Already have an account?</span>
  <a href="{{ url_for('auth.login') }}">
    <span>Sign in instead</span>
  </a>
</p>
{%endblock%}
