{% extends 'baseTemplate.html' %}

{% block title %}Changement du mot de passe{% endblock %}

{% block content %}
{% load i18n %}

<div class="container">
    <div class="row">
        <div class="text-center">
            <h1><a class="counter-link" href="{% url 'home' %}">SeumBook™</a></h1>
        </div>
    </div>
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2 class="panel-title">{% trans "Create your seum counter!" %}</h2>
            </div>
            <div class=" panel-body">
                <form method="POST">
                    {% csrf_token %}
                    <p>{% trans "The email address will be used for password reinitialisation. Your login on this website will be the first part of this address (before the @)." %}</p>
                    <div class="form-group">
                        <label for="id_email">{% trans "Email address" %}</label>
                        <input id="id_email" type="email" class="form-control" name="email" required />
                    </div>
                    <p>{% trans "If you check the box below, you will receive an email from <tt>seum@merigoux.ovh</tt> each time someone get the seum on the site. Spamming but so enjoyable, can be deactivated and reactivated later." %}
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="email_notifications">
                        <label class="form-check-label">
                            {% trans "Email notifications" %}
                        </label>
                    </div>
                    <p>
                        {% trans "Other users will see your nickname and your trigram only, it will be your seum identity!" %}
                        {% trans "This trigram must be 3 characters long exactly." %}
                    </p>
                    <div class="form-group">
                        <label for="id_trigramme">{% trans "Trigram" %}</label>
                        <input id="id_trigramme" minlength="3" maxlength="3" type="text" class="form-control text-uppercase" name="trigramme" onkeyup="this.value=this.value.toUpperCase();" required />
                    </div>
                    <div class="form-group">
                        <label for="id_nick">{% trans "Nick" %}</label>
                        <input id="id_nick" type="text" class="form-control" name="nick" required />
                    </div>
                    <p>{% trans "I could have required 10 characters with one digit, an emoji, three uppercase letters and two lowercase ones to throw you the seum, but actually you can choose whatever you want." %}</p>
                    <div class="form-group">
                        <label for="id_password1">{% trans "Password" %}</label>
                        <input id="id_password1" type="password" class="form-control" name="password1" required />
                    </div>
                    <div class="form-group">
                        <label for="id_password2">{% trans "Confirm password" %}</label>
                        <input id="id_password2" type="password" class="form-control" name="password2" required />
                    </div>
                    <p>{% trans "If this form has given you the seum, do not forget to reset your counter once you are logged in!" %}</p>
                    <div class="text-center">
                        <button type="submit" class="btn btn-default btn-success">{% trans "Create the counter" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% if error %}
    <div class="row">
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h2 class="panel-title">{% trans "Error" %}</h2>
            </div>
            <div class=" panel-body">
                <p>{{error}}</p>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}