{% extends "registration/base.html" %}
{% load i18n %}

{% block title %}{% trans "Sign up" %}{{ block.super }}{% endblock %}

{% block headcss %}
    <style>
        /* hackish way to show org details, if there are any errors or content */
        #org_details {
            display:none;
        } /* default: off */
    {% for prop in org_form %}
        {% comment "org.name is on the outside of the expanded form, so no need to expand" %}{% endcomment %}
        {% if not prop.name == "name" %}
            {% if prop.errors or prop.value %}
        #org_details {
            display:block;
        } /* dynamically override if we find an error */
            {% endif %}
        {% endif %}
    {% endfor %}
    </style>
{% endblock headcss %}

{% block content %}
  {% if form.non_field_errors %}
  <div class="errorlist">
      Please correct the errors below:
      <br/>
      {{ form.non_field_errors }}
      <br/>
   </div>
  {% endif %}

  <h1>Create an account</h1>
  
  <form method="post" action="" class="wide basic-form">
  {% csrf_token %}
    <input type="hidden" name="username"/>
    <div class="form-section">
        <div class="form-label"><label for="id_first_name">First Name:</label></div>
        <div class="form-element">{{ form.first_name }}</div>
        {% if form.first_name.errors %}
        <div class="errorlist">{{ form.first_name.errors.as_text }}</div>
        {% endif %}
    </div>
    <div class="form-section">
        <div class="form-label"><label for="id_last_name">Last Name:</label></div>
        <div class="form-element">{{ form.last_name }}</div>
        {% if form.last_name.errors %}
        <div class="errorlist">{{ form.last_name.errors.as_text }}</div>
        {% endif %}
    </div>
    <div class="form-section">
      <div class="form-label"><label for="id_email">Email address:</label></div>
      <div class="form-element">{{ form.email }}</div>
      {% if form.email.errors %}
        <div class="errorlist">{{ form.email.errors.as_text }}</div>
      {% endif %}
    </div>
    <div class="form-section">
      <div class="form-label"><label for="id_org_name">Organization Name:</label></div>
      <div class="form-element">{{ org_form.name }}</div>
      {% if org_form.name.errors %}
        <div class="errorlist">{{ org_form.name.errors.as_text }}</div>
      {% endif %}
    </div>
    <div class="form-section">
        <div class="form-label">
            <span style="margin-left:25px"><a href="#" onclick="$('#org_details').toggle()">Add details of your organization</a></span>
        </div>
    </div>
    <br/>
    <div class="form-section" id="org_details">
        <div class="form-section">
          <div class="form-label"><label for="id_org_url">Organization URL:</label></div>
          <div class="form-element">{{ org_form.url }}</div>
          {% if org_form.url.errors %}
            <div class="errorlist">{{ org_form.url.errors.as_text }}</div>
          {% endif %}
        </div>
        <div class="form-section">
          <div class="form-label"><label for="id_org_description">Organization Description:</label></div>
          <div class="form-element">{{ org_form.description }}</div>
          {% if org_form.description.errors %}
            <div class="errorlist">{{ org_form.description.errors.as_text }}</div>
          {% endif %}
        </div>
        <div class="form-section">
          <div class="form-label"><label for="id_org_address">Organization Address:</label></div>
          <div class="form-element">{{ org_form.address }}</div>
          {% if org_form.address.errors %}
            <div class="errorlist">{{ org_form.address.errors.as_text }}</div>
          {% endif %}
        </div>
        <div class="form-section">
          <div class="form-label"><label for="id_org_country">Organization Country:</label></div>
          <div class="form-element">{{ org_form.country }}</div>
          {% if org_form.country.errors %}
            <div class="errorlist">{{ org_form.country.errors.as_text }}</div>
          {% endif %}
        </div>
        <div class="form-section">
          <div class="form-label"><label for="id_org_number">Organization Phone #:</label></div>
          <div class="form-element">{{ org_form.number }}</div>
          {% if org_form.number.errors %}
            <div class="errorlist">{{ org_form.number.errors.as_text }}</div>
          {% endif %}
        </div>
    </div>
    <div class="form-section">
      <div class="form-label"><label for="id_password1">Password:</label></div>
      <div class="form-element">{{ form.password1 }}</div>
      {% if form.password1.errors %}
        <div class="errorlist">{{ form.password1.errors.as_text }}</div>
      {% endif %}
    </div>
    <div class="form-section">
      <div class="form-label"><label for="id_password2">Password (again):</label></div>
      <div class="form-element">{{ form.password2 }}</div>
      {% if form.password2.errors %}
        <div class="errorlist">{{ form.password2.errors.as_text }}</div>
      {% endif %}
    </div>
    <div class="form-section">
      <div class="form-label"><label for="id_tos1"></label></div>
      <div class="form-element checkbox">
        {{ form.tos1 }}
        I acknowledge that the Khan Academy videos and exercises used within KA Lite are for
        <a href="http://www.khanacademy.org/about/tos#7" target="_blank">non-commercial purposes only</a>.
      </div>
      {% if form.tos1.errors %}
        <div class="errorlist">{{ form.tos1.errors.as_text }}</div>
      {% endif %}
    </div>
    <div class="form-section">
      <div class="form-label"><label for="id_tos2"></label></div>
      <div class="form-element checkbox">
        {{ form.tos2 }}
        I acknowledge having read the <a href="http://www.khanacademy.org/about/api-tos" target="_blank">
        Khan Academy API terms of service</a>, and that KA Lite uses this API.
      </div>
      {% if form.tos2.errors %}
        <div class="errorlist">{{ form.tos2.errors.as_text }}</div>
      {% endif %}
    </div>
    <div class="form-section">
      <div class="form-label"><label for="id_email_subscribe"></label></div>
      <div class="form-element checkbox">
        <input type="checkbox" name="email_subscribe" checked="checked" />
        Subscribe to our quarterly newsletter, to stay up to date on KA Lite's progress.
      </div>
    </div>
    <br>
    <div class="form-section">
        <div class="submit"><input class="button" type="submit" value="Register &rarr;"></div>
    </div>
  </form>
{% endblock %}

{% block content-related %}
    <div class="form-section">Fill out the form to the left (all fields are required), and your
    account will be created; you'll be sent an email with instructions on how
    to finish your registration.</div>

    <div class="form-section">We'll only use your email to send you signup instructions. We hate spam
    as much as you do.</div>

    <div class="form-section">This account will let you log into the ticket tracker, claim tickets,
    and be exempt from spam filtering.</div>
{% endblock %}