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

{% block content %}
<div class="profiles profile-container">
    <div class="title profile">
        <h3>{% trans "Sign up" %}</h3>
    </div>
    <div class="block">
      <div class="signin-form">
        <p class="call-to-action__nav-item--challenge-heading">
          {% trans "Not a member yet? Join us by signing up below." %}
        </p>
        <form method="post" action={{REGISTRATION_URL}} novalidate>
        {% csrf_token %}

        {% if form.errors %}
          <p class="alert-error">
            {% trans "Please correct the indicated errors." %}
          </p>
        {% endif %}

        <fieldset>
          <label>{% trans "Choose a username" %}</label>
          <p class="helptext">
            {% trans "Please do not use your real name, phone number or email address as it's unsafe." %}
          </p>
          {{ form.username.errors }}
          {{ form.username }}
        </fieldset>

        {% if settings.profiles.UserProfilesSettings.activate_display_name and settings.profiles.UserProfilesSettings.capture_display_name_on_reg %}
          <fieldset>
            <label>{% trans "Display name" %}</label>
              <p class="helptext">{% trans "Girl Effect 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>
              {{ form.alias.errors }}
              {{ form.alias }}
          </fieldset>
        {% endif %}

        <fieldset>
          <label>{% trans "Choose a 4-digit pin" %}</label>
          {{ form.password.errors }}
          <input id="id_password" maxlength="4" name="password" placeholder="eg. 2086" type="password" required="" pattern="[0-9]*" inputmode="numeric">
        </fieldset>

        {% if settings.profiles.UserProfilesSettings.activate_gender and settings.profiles.UserProfilesSettings.capture_gender_on_reg %}
          <fieldset>
            <label>{% trans "I identify my gender as" %}</label>
            {{ form.gender }}
            {{ form.gender.errors }}
            <p class="sigin-form__input-hint">({% trans "Only you will see this" %})</p>
          </fieldset>
        {% endif %}

        {% if settings.profiles.UserProfilesSettings.activate_dob and settings.profiles.UserProfilesSettings.capture_dob_on_reg %}
          <fieldset>
            <label for="date_of_birth">{% trans "Select Date of Birth" %}</label>
            {{ form.date_of_birth }}
            {{ form.date_of_birth.errors}}
            <p class="helptext">{% trans "Let us know your birthday to get access to exclusive content." %}</p>
          </fieldset>
        {% endif %}

        {% if settings.profiles.UserProfilesSettings.show_mobile_number_field and settings.profiles.UserProfilesSettings.country_code %}
          <fieldset>
            <label for="mobile_number">{% trans "Enter your mobile number" %}</label>
            {{ form.mobile_number.errors}}
            {{ form.mobile_number }}
            <p class="helptext">{% trans "(e.g. 0900000013)" %}</p>
          </fieldset>
        {% endif %}

        {% if settings.profiles.UserProfilesSettings.show_email_field %}
          <fieldset>
            <label for="id_email">{% trans "Enter your email address" %}</label>
            {{ form.email.errors}}
            {{ form.email }}
            <p class="helptext">{% trans "(e.g. example@foo.com)" %}</p>
          </fieldset>
        {% endif %}

        {% if settings.profiles.UserProfilesSettings.activate_education_level and settings.profiles.UserProfilesSettings.capture_education_level_on_reg %}
          <fieldset>
            <label for="education_level">{% trans "What is your highest level of education?" %}</label>
            {{ form.education_level }}
            {{ form.education_level.errors}}
            <p class="helptext">{% trans "Only you will see this." %}</p>
          </fieldset>
        {% endif %}

        {% if settings.profiles.UserProfilesSettings.activate_location and settings.profiles.UserProfilesSettings.capture_location_on_reg %}
          <fieldset>
            <label for="location">{% trans "Where do you live?" %}</label>
            {{ form.location.errors}}
            {{ form.location }}
            <p class="helptext">{% trans "Only you will see this" %}</p>
          </fieldset>
        {% endif %}

        {% if settings.profiles.UserProfilesSettings.show_security_question_fields  %}
          <label>{% trans "Security questions" %}</label>
          <p class="helptext">{% trans "Please answer the following security questions. You'll have to provide these answers if you ever need to reset your password." %}</p>
          {% for field in form %}
            {% if field in form.security_questions %}
              <fieldset>
                <label for="id_email">{% trans field.label_tag %}</label><br>
                {{ field.errors}}
                {{ field }}
              </fieldset>
            {% endif %}
          {% endfor %}
        {% endif %}

        <fieldset>
          {% if form.terms_and_conditions.errors %}
            <p class="alert-error">
              {% trans "Please accept the terms and conditions in order to complete registration" %}
            </p>
          {% endif %}

          <div class="terms-and-conditions">
            <div class="terms-and-conditions__field">
              {{ 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 %}">
                  {% 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>
          </div>
        </fieldset>
        <input type="submit" class="registerSubmit" value='{% trans "Sign up" %}' />
        <input type="hidden" name="next" value="{% url 'molo.profiles:registration_done' %}" />
        <a href="{{ LOGIN_URL }}" class="button inverted">{% trans "already joined?" %}</a>
        </form>
      </div>
    </div>
</div>
{% endblock %}