{% extends "pure/layout.html" %}
{% block title %}C3L Membership Application{% endblock %}

{% block style %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
{% endblock %}

{% block nav %}
<div class="pure-menu pure-menu-horizontal">
</div>
{% endblock %}

{% block content %}
<div class="pure-g">
  <div class="pure-u-md-1-3">
  </div>
  <div class="pure-u-1-1 pure-u-md-1-3">
    <img src="{{ url_for('static', filename='images/logo.png') }}" class="pure-img"></img>
    <h1>Membership Application</h1>
    <h2>How to use this form</h2>
    <p>Fill out this form and click on "Become a member". Afterwards you will be presented with a PDF,
      which you have to send to info@c3l.lu or bring it to one of our next events. Print it or save it
      to your local hardware, because we don't save a copy on our servers for data protection reasons!</p>
    {% if form.errors %}
    {% for fieldname, errors in form.errors.items() %}
    {% for error in errors %}
    <p>{{ fieldname }} - {{ error }}</p>
    {% endfor %}
    {% endfor %}
    {% endif %}
    <form class="pure-form pure-form-stacked" method="POST" action="/">
      <fieldset>
        {{ form.hidden_tag() }}
        <legend>Required information</legend>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.username.label }}</b>
            {{ form.username(required=True, class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.email.label }}</b>
            {{ form.email(required=True, class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.fullname.label }}</b>
            {{ form.fullname(required=True, class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.membership.label }}</b>
            {% for option in form.membership %}
            <label for="{{ option.id }}" class="pure-radio pure-u-1-1">
              {{ option() }}
              {{ option.label.text }}
            </label>
            {% endfor %}
            <h3>What's difference between the different membership options?</h3>
            <p>All the options include to following benefits:</p>
            <ul>
              <li>Access to the <a href="https://wiki.c3l.lu/doku.php?id=organization:membership#benefits">services</a> run by us</li>
              <li>Access to our <a href="https://wiki.c3l.lu/doku.php?id=chaosstuff:bootstrap">hackerspace: ChaosStuff</a></li>
            </ul>
            <p>Becoming a regular/student member gives you these additional benefits:</p>
            <ul>
              <li>Voting rights on general assemblys</li>
              <li>Access to our internal mailinglist</li>
            </ul>
            <p>You can read more on the membership <a href="https://wiki.c3l.lu/doku.php?id=organization:membership">here</a>.</p>
            <h3>I cannot afford the membership?</h3>
            <p>If you cannot afford the membership, please contact us via info@c3l.lu first, before filling out the membership form. We will try to find a solution together.</p>
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.payment.label }}</b>
            {% for option in form.payment %}
            <label for="{{ option.id }}" class="pure-radio pure-u-1-1">
              {{ option() }}
              {{ option.label.text }}
            </label>
            {% endfor %}
          </div>
        </div>
        <legend>Additional information</legend>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.street.label }}</b>
            {{ form.street(class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.zip.label }}</b>
            {{ form.zip(class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.city.label }}</b>
            {{ form.city(class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.state.label }}</b>
            {{ form.state(class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.country.label }}</b>
            {{ form.country(class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.gpg.label }}</b>
            <b>{{ form.gpg(class="pure-u-1-1") }}</b>
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.jabber.label }}</b>
            {{ form.jabber(class="pure-u-1-1") }}
          </div>
        </div>
        <div class="pure-g">
          <div class="pure-u-1-1">
            <b>{{ form.twitter.label }}</b>
            {{ form.twitter(class="pure-u-1-1") }}
          </div>
        </div>
        <legend></legend>
        <label for="{{ form.minor_member.id }}" class="pure-checkbox">
          {{ form.minor_member }} {{ form.minor_member.label.text|safe}}
        </label>
        <label for="{{ form.terms.id }}" class="pure-checkbox">
          {{ form.terms }} {{ form.terms.label.text|safe }}
        </label>
        <div class="pure-controls">
          {{ form.submit }}
        </div>
      </fieldset>
    </form>
  </div>
  <div class="pure-u-md-1-3">
  </div>
</div>
{% endblock %}