{% extends 'base.html' %}

{% block body %}
<a href='login.php' class='p-2 rounded hl-hover-gray'>
  <i class='fas fa-chevron-left'></i> {{ 'go back to login page'|trans }}
</a>

{# Modal for privacy policy #}
<div class='modal fade' id='policyModal' tabindex='-1' role='dialog' aria-labelledby='policyModalLabel'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='policyModalLabel'>{{ 'Privacy policy'|trans }}</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        {{ privacyPolicy|raw }}
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-dismiss='modal'>{{ 'Close'|trans }}</button>
      </div>
    </div>
  </div>
</div>

<section class='text-center'>
    <img src='/assets/images/logo.png' alt='elabftw' title='elabftw' class='col-md-3' />
    <h2 class='mb-2 mt-2'>{{ 'Create your account'|trans }}</h2>
    {# Register form #}

    <form method='post' autocomplete='off' action='app/controllers/RegisterController.php'>
      <input hidden type='text' name='bot' value=''>
      {{ App.Session.get('csrf')|csrf }}

      <div class='form-group mx-auto col-md-4'>
        {# TEAM #}
        <div class='row'>
          {% if App.Config.configArr.debug -%}
            <!-- [html-validate-disable-block input-missing-label, prefer-native-element: suppress errors from tom-select] -->
          {%- endif %}
          <label for='team'>{{ 'Team'|trans }}</label>
          <select name='team' class='form-control' id='team' required autocomplete='off' placeholder='{{ 'Select a team'|trans }}' aria-label='{{ 'Team'|trans }}'>
            <option value='' selected disabled>{{ 'Select a team'|trans }}</option>
            {# on this page, only show the visible teams #}
            {% for team in teamsArr|filter(v => v.visible == 1) %}
              <option value='{{ team.id }}' {{ App.Request.query.get('team') == team.id ? 'selected' }}>{{ team.name }}</option>
            {% endfor %}
          </select>
        </div>

        {# EMAIL #}
        <div class='row mt-2'>
          <label for='email'>{{ 'Email'|trans }}</label>
          <input name='email' class='form-control' type='email' id='email' autocomplete='email' required />
          {% if App.Config.configArr.email_domain %}
            <button type='button' data-action='toggle-next' class='mt-1 btn btn-secondary btn-sm'>{{ 'Display allowed email domains'|trans }}</button>
            <p class='smallgray' hidden>
              {{ 'Only emails @%s are authorized to register'|trans|format(App.Config.configArr.email_domain) }}
            </p>
          {% endif %}
        </div>

        {# PASSWORD #}
        <div class='row mt-2'>
          <label for='password'>{{ 'Password'|trans }}</label>
          <div class='input-group'>
            <input name='password' type='password' class='form-control' minlength='{{ App.Config.configArr.min_password_length }}' title='{{ 'Minimum password length: %d.'|trans|format(App.Config.configArr.min_password_length) }} {{ passwordInputHelp|e('html_attr') }}' pattern='{{ passwordInputPattern|e('html_attr') }}' id='password' autocomplete='new-password' required />
            <div class='input-group-append'>
              <span class='btn btn-light input-border' tabindex='-1' data-action='toggle-password' data-target='password'><i class='fas fa-eye' aria-hidden='true'></i></span>
            </div>
          </div>
        </div>

        {# FIRSTNAME #}
        <div class='row mt-2'>
          <label for='firstname'>{{ 'Firstname'|trans }}</label>
          <input name='firstname' class='form-control' type='text' id='firstname' autocomplete='given-name' required />
        </div>

        {# LASTNAME #}
        <div class='row mt-2'>
          <label for='lastname'>{{ 'Lastname'|trans }}</label>
          <input name='lastname' class='form-control' type='text' id='lastname' autocomplete='family-name' required />
        </div>

        {# PRIVACY POLICY #}
        {% if App.Config.configArr.privacy_policy %}
        <div class='row mt-2'>
          <div class='form-group form-check'>
            <input name='privacy-policy' class='form-check-input' type='checkbox' id='privacy-policy' required />
            <label class='form-check-label' for='privacy-policy'>
                {{ 'I agree with the %sPrivacy Policy%s'|trans|format("<span class='link-like' data-action='toggle-modal' data-target='policyModal'>", "</span>")|raw }}
            </label>
          </div>
        </div>
        {% endif %}

        {# SUBMIT #}
        <div class='mt-4 text-center'>
          <button type='submit' name='Submit' class='btn btn-primary'>{{ 'Create'|trans }}</button>
        </div>
      </div>
    </form>

{# end register form #}
</section>
<div id='info' data-page='register'></div>
{% endblock body %}