{% extends "base.html" %}

{% block media %}
  {% include "timezone/media-css.html" %}
  {{ form.media.css }}
  <style>
    #content-body {
      text-align: center;
    }
  </style>
{% endblock %}

{% block js_media %}
  {% include "timezone/media-js.html" %}
  {{ form.media.js }}
  <script type="text/javascript">
    $(function () {
      $('.pass-req-link').click(function () {
        $('.pass-req').toggle('fast');
        return false;
      });
    });
  </script>
  {% if form.captcha %}
    {{ recaptcha_init(LANGUAGE_CODE) }}
  {% endif %}
{% endblock %}

{% block body %}
  <div id="center-float" class="registration-form">
    <form id="edit-form" action="" method="post" class="form-area">
      {% csrf_token %}

      <div class="block-header">{{ _('Username') }}</div>
      <span class="fullwidth{% if form.username.errors %}-error{% endif %}">{{ form.username }}</span>
      {% if form.username.errors %}
        <div class="form-field-error">{{ form.username.errors }}</div>
      {% endif %}

      <div class="block-header">{{ _('Email') }}</div>
      <span class="fullwidth{% if form.email.errors %}-error{% endif %}">{{ form.email }}</span>
      {% if form.email.errors %}
        <div class="form-field-error">{{ form.email.errors }}</div>
      {% endif %}

      <div class="block-header">{{ _('Password') -}}
        <small>(<a href="#" class="pass-req-link">?</a>)</small>
      </div>
      <div style="display: none" class="pass-req alert alert-info">
        <ul>
          {% for validator in password_validators %}
            <li>{{ validator.get_help_text() }}</li>
          {% endfor %}
        </ul>
      </div>
      <span class="fullwidth{% if form.password1.errors %}-error{% endif %}">{{ form.password1 }}</span>
      {% if form.password1.errors %}
        <div class="form-field-error">{{ form.password1.errors }}</div>
      {% endif %}
      <div class="block-header">{{ _('Password') }}<sup style="font-size: 0.7em;padding-left: 0.2em;">2</sup>{# -#}
        <small>{{ _('(again, for confirmation)') }}</small>
      </div>
      <span class="fullwidth{% if form.password2.errors %}-error{% endif %}">{{ form.password2 }}</span>
      {% if form.password2.errors %}
        <div class="form-field-error">{{ form.password2.errors }}</div>
      {% endif %}

      <div class="block-header">{{ _('Timezone') }}<small>{{ _('(select your closest major city)') }}</small></div>
      <div class="fullwidth">
        <div>{{ form.timezone }}
          <div style="float: right">
            {{ _('or') }}
            <a id="open-map" href="#" data-featherlight=".map-wrap">{{ _('pick from map') }}</a>
          </div>
        </div>
      </div>

      <div class="block-header">{{ _('Default language') }}</div>
      <span class="fullwidth">{{ form.language }}</span>

      {% if form.captcha %}
        <div style="margin-top: 0.5em">{{ form.captcha }}</div>
        {% if form.captcha.errors %}
          <div class="form-field-error">{{ form.captcha.errors }}</div>
        {% endif %}
      {% endif %}

      <hr>
      <button style="float:right;" type="submit">{{ _('Register!') }}</button>
    </form>
  </div>

  <div class="map-wrap registration-form">
    <div class="map-inset">
      <div class="map-axis-x"></div>
      <div class="map-axis-y"></div>
    </div>
  </div>
{% endblock %}