{% extends "layout.html" %}
{% from "_macros.html" import render_manage_form_scripts, render_jquery_steps_header, render_field_with_errors, render_field %}

{% block header %}
{{ render_manage_form_scripts() }}
{{ render_jquery_steps_header() }}

<script>
  $( function() {

  var form = $("#main-form");
  form.validate({
        rules: {
          email: {
            required: true,
            email: true,
            remote: {
              url: "{{ url_for('js_check_register_email') }}",
              type: "post"
            }
          },
          password: {
            required: true,
            minlength: 8,
          },
          password_confirm: {
            required: true,
            minlength: 8,
            equalTo: "#password"
          },
          accept_tos: "required",
        }
    });
});
</script>
{% endblock %}

{% block content %}

<h1>
  {{ _fsdomain('Register') }}
  {% if config["DOCS_URL"] %}
    <a class="btn btn-outline-info btn-sm m-1 my-auto float-right" href="{{ config["DOCS_URL"] }}/goto/user-registration" target="_blank" rel="noopener noreferrer" role="button"><i class="fa fa-fw fa-info-circle"></i> {{ _('Docs') }}</a>
  {% endif %}
</h1>

<form id="main-form" action="{{ url_for_security('register') }}" method="POST" name="register_user_form">
  {{ register_user_form.hidden_tag() }}
  {{ render_field_with_errors(register_user_form.email) }}
  {{ render_field_with_errors(register_user_form.password) }}
  {% if register_user_form.password_confirm %}
    {{ render_field_with_errors(register_user_form.password_confirm) }}
  {% endif %}

  <div class="form-group form-check">
    <div class="input-group">
      {{ register_user_form.accept_tos(class="form-check-input")|safe }}
      {{ register_user_form.accept_tos.label(class="form-check-label") }}
    </div>
  </div>

  {{ render_field(register_user_form.submit) }}
</form>

{% endblock %}
