{% extends 'base.html' %}

{% block body %}
<a href='login.php'>
  <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' aria-hidden='true'>
  <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'>
          <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='app/img/logo.png' alt='elabftw' title='elabftw' class='col-md-3' />
    <h2 class='mb-2 mt-2'>{{ 'Create your account'|trans }}</h2>
    <!-- Register form -->
    {# min pass length minimum, no maximum #}
    {% set pattern = '.{' ~ minPasswordLength() ~ ',}' %}

    <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'>
          <label for='team'>{{ 'Team'|trans }}</label>
          <select name='team' class='form-control selectpicker' id='team' required data-show-subtext='true' data-live-search='true'>
            <option value='' selected disabled>{{ 'Select a team'|trans }}</option>
            {% for team in teamsArr|filter(v => v.visible == 1) %}
              <option value='{{ team.id }}'>{{ team.name }}</option>
            {% endfor %}
          </select>
        </div>

        <!-- EMAIL -->
        <div class='row'>
          <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 %}
            <p class='smallgray'>
              {{ 'Only emails @%s are authorized to register'|trans|format(App.Config.configArr.email_domain) }}
            </p>
          {% endif %}
        </div>

        <!-- PASSWORD -->
        <div class='row'>
          <label for='password'>{{ 'Password'|trans }}</label>
          <div class='input-group'>
            <input name='password' type='password' class='form-control' title='8 characters minimum' id='password' pattern='{{ pattern }}' 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'>
          <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'>
          <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'>
          <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='button btn btn-primary'>{{ 'create'|trans }}</button>
        </div>
      </div>
    </form>

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