{% 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>C3L <a href="https://www.dokuwiki.org/dokuwiki#">Wiki</a> Account</li>
                <li>C3L Mail account</li>
                <li>C3L <a href="https://xmpp.org">XMPP</a> Account</li>
                <li>C3L <a href="https://nextcloud.com">Nextcloud</a> Account</li>
                <li>C3L <a href="https://kallithea-scm.org/">Kallithea</a> Account</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>
            </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 %}