{% extends 'base.html' %}

{% block body %}
<menu>
    <a href='login.php'>
        <i style='color:#29AEB9' class='fas fa-chevron-circle-left mr-1'></i>{{ 'go back to login page'|trans }}
    </a>
</menu>

<section class='text-center'>
    <h2>{{ 'Create your account'|trans }}</h2>
    <br><br>
    <!-- Register form -->
    <form id='regform' method="post" class='loginform' autocomplete="off" action="app/controllers/RegisterController.php">

        <input style='display:none' type='text' name='bot' value=''>

        <div class='row'>
            <div class='col-md-4'>
                <label class='block' for='team'>{{ 'Team'|trans }}</label>
                <select name='team' id='team' required>
                    <option selected disabled>{{ '------ Select a team ------'|trans }}</option>
                    {% for team in teamsArr %}
                        <option value = '{{ team['team_id'] }}'>{{ team['team_name'] }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class='col-md-4'>
                <label class='block' for="email">{{ 'Email'|trans }}</label>
                <input name="email" type="email" id="email" required />
            </div>
            <div class='col-md-4'>
                <label class='block' for="password">{{ 'Password'|trans }}</label>
                <input name="password" type="password" title='8 characters minimum' id="password" pattern=".{8,}" required />
            </div>
        </div>

        <div class='row'>
            <div class='col-md-4'>
                <label class='block' for="firstname">{{ 'Firstname'|trans }}</label>
                <input name='firstname' type='text' id='firstname' required />
            </div>

            <div class='col-md-4'>
                <label class='block' for="lastname">{{ 'Lastname'|trans }}</label>
                <input name='lastname' type='text' id='lastname' required />
            </div>

            <div class='col-md-4'>
                <label class='block' for='complexity'>{{ 'Password complexity'|trans }}</label>
                <input id="complexity" disabled />
            </div>
        </div>

        <div class='submitButtonDiv'>
            <button type="submit" name="Submit" class='button'>{{ 'create'|trans }}</button>
        </div>
    </form>
<!-- end register form -->
</section>

<div id='complexityDiv'
    data-weak='{{ 'Weak password'|trans }}'
    data-average='{{ 'Average password'|trans }}'
    data-good='{{ 'Good password'|trans }}'
    data-strong='{{ 'Strong password'|trans }}'
    data-wtf='{{ 'No way that is your real password!'|trans }}'></div>

<script src='app/js/register.min.js?v={{ v }}'></script>
{% endblock body %}