{% extends "base.html" %}
{% load wagtailsettings_tags wagtailcore_tags %}

{% get_settings %}
{% block content %}
<div class="profiles">

    {# include template "patterns/basics/headings/sp_variations/heading.html" #}
      {% trans "Join Tujibebe" as headingtext %}
      {% with type="square" htmltag="h1" title=headingtext %}
        <div class="heading heading__{{type}} {{extraclass}}">
          <{{htmltag}}>{{title}}</{{htmltag}}>
        </div>
      {% endwith %}
    {# end include template #}

    {# include template "patterns/basics/headings/sp_variations/heading.html" #}
      {% trans "Already joined?" as headingtext %}
      {% trans "Log in here" as linktext %}
      {% url LOGIN_URL as link %}
      {% with type="micro" htmltag="p" title=headingtext hyperlink=link linktitle=linktext %}
      <div class="heading heading__{{type}} heading__{{type}}-hyperlink {{extraclass}}">
        <{{htmltag}}>{{title}}</{{htmltag}}>
        <a href="{{hyperlink}}" class="call-to-action__hyperlink">
            {{linktitle}}
        </a>
      </div>
      {% endwith %}
    {# end include template #}

    {# include template "patterns/basics/headings/sp_variations/heading.html" #}
      {% trans "Please complete this form to join" as headingtext %}
      {% with type="subheading" htmltag="h2" title=headingtext %}
        <div class="heading heading__{{type}} {{extraclass}}">
          <{{htmltag}}>{{title}}</{{htmltag}}>
        </div>
      {% endwith %}
    {# end include template #}

    <form method="post" action={{REGISTRATION_URL}} class="profiles__form" novalidate>
    {% csrf_token %}
        {% if form.errors %}
            <p class="errors">
                {% trans "Please correct the indicated errors." %}
            </p>
        {% endif %}
        <fieldset>
            <div class="input-group{% if form.username.errors %} input-error{% endif %}">
                <label for="id_username">{% trans "Username" %}</label>
                {{ form.username }}
                {{ form.username.errors }}
            </div>
            <p class="helptext">
            {% trans "Please do not use your real name, phone number or email address as it's unsafe." %}
            </p>
        </fieldset>
        {% if settings.profiles.UserProfilesSettings.activate_display_name and settings.profiles.UserProfilesSettings.capture_display_name_on_reg %}
        <fieldset>
            <div class="input-group{% if form.alias.errors %} input-error{% endif %}">
                <label for="alias">{% trans "Display name" %}</label>
                {{ form.alias }}
                {{ form.alias.errors }}
            </div>
            <p class="helptext">{% trans "Tujibebe values your online security, therefore we hide your username and allow you to comment and interact with the site anonymously. If you would like to interact with other people, like your friends to be able to see you as a username and not anonymous, update your username here" %}</p>
        </fieldset>
        {% endif %}
        <fieldset>
            <div class="input-group{% if form.password.errors %} input-error{% endif %}">
                <label for="id_password">{% trans "Choose a 4-digit pin" %}</label>
                <input id="id_password" maxlength="4" name="password" placeholder="eg. 2086" type="password" required="" pattern="[0-9]*" inputmode="numeric">
                {{ form.password.errors }}
            </div>
            <p class="helptext">{% trans "For example: 2048" %}</p>
        </fieldset>
        {% if settings.profiles.UserProfilesSettings.activate_dob and settings.profiles.UserProfilesSettings.capture_dob_on_reg %}
        <fieldset>
            <div class="input-group{% if form.date_of_birth.errors %} input-error{% endif %}">
                <label for="date_of_birth">{% trans "Select Date of Birth" %}</label>
                {{ form.date_of_birth }}
                {{ form.date_of_birth.errors}}
            </div>
            <p class="helptext">{% trans "Let us know your birthday to get access to exclusive content." %}</p>
        </fieldset>
        {% endif %}
        {% if settings.profiles.UserProfilesSettings.activate_gender and settings.profiles.UserProfilesSettings.capture_gender_on_reg %}
        <fieldset>
            <div class="input-group{% if form.gender.errors %} input-error{% endif %}">
                <label for="gender">{% trans "I identify as" %}</label>
                {{ form.gender }}
                {{ form.gender.errors }}
            </div>
            <p class="helptext">
                ({% trans "Only you will see this, but it's not mandatory to tell us" %})
            </p>
        </fieldset>
        {% endif %}
        {% if settings.profiles.UserProfilesSettings.activate_education_level and settings.profiles.UserProfilesSettings.capture_education_level_on_reg %}
            <fieldset>
            <div class="input-group{% if form.education_level.errors %} input-error{% endif %}">
                <label for="education_level">{% trans "What is your highest level of education?" %}</label>
                {{ form.education_level }}
                {{ form.education_level.errors}}
            </div>
            <p class="helptext">{% trans "Only you will see this." %}</p>
        </fieldset>
        {% endif %}
        {% if settings.profiles.UserProfilesSettings.show_security_question_fields  %}
          <fieldset>
              {% trans "Security questions" as headingtext %}
              {% include "patterns/basics/headings/sp_variations/heading.html" with type="micro" htmltag="h3" title=headingtext %}
              {% for field in form %}
                {% if field in form.security_questions %}
                  <div class="input-group{% if field.errors %} input-error{% endif %}">
                      <label>{% trans field.label_tag %}</label>
                      {{ field }}
                      {{ field.errors }}
                  </div>
                {% endif %}
              {% endfor %}
              <p class="helptext">
                  {% trans "Please answer the above security questions. You'll have to provide these answers if you ever need to reset your password." %}
              </p>
          </fieldset>
        {% endif %}
        <fieldset>
            <div class="terms-and-conditions">
                {{ form.terms_and_conditions }}
                {% if settings.profiles.UserProfilesSettings.terms_and_conditions %}
                    <label for="id_terms_and_conditions">
                        <a href="{% pageurl settings.profiles.UserProfilesSettings.terms_and_conditions.specific %}" class="call-to-action__hyperlink"  rel="noreferrer">
                        {% trans "I accept the Terms and Conditions" %}</a>
                    </label>
                {% else %}
                    <label for="id_terms_and_conditions">
                        {% trans "I accept the Terms and Conditions" %}
                    </label>
                {% endif %}
            </div>
            {% if form.terms_and_conditions.errors %}
                <p class="errors">
                    {% trans "Please accept the terms and conditions in order to complete registration" %}
                </p>
            {% endif %}
        </fieldset>
        <button type="submit" class="call-to-action__button call-to-action__button--primary">{% trans "Sign up" %}</button>
        <input type="hidden" name="next" value="{% url 'molo.profiles:registration_done' %}" />
    </form>

    {# include template "patterns/basics/headings/sp_variations/heading.html" #}
      {% trans "Already joined?" as headingtext %}
      {% trans "Log in here" as linktext %}
      {% url LOGIN_URL as link %}
      {% with type="micro" htmltag="p" title=headingtext hyperlink=link linktitle=linktext %}
        <div class="heading heading__{{type}} heading__{{type}}-hyperlink {{extraclass}}">
          <{{htmltag}}>{{title}}</{{htmltag}}>
          <a href="{{hyperlink}}" class="call-to-action__hyperlink">
              {{linktitle}}
          </a>
        </div>
      {% endwith %}
    {# end include template #}

</div>
{% endblock %}