{% 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 %}

            <div class="pure-g">

              <div class="pure-u-1-1">

                <label for="{{ form.student.id }}" class="pure-checkbox">

                {{ form.student }} {{ form.student.label.text|safe}}

                </label>

              </div>

            </div>

            <div class="pure-g">

              <div class="pure-u-1-1">

                <label for="{{ form.starving.id }}" class="pure-checkbox">

                  {{ form.starving }} {{ form.starving.label.text|safe}}

                </label>

              </div>

            </div>

            <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>

            <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.birthday.label }}</b>

            {{ form.birthday(class="pure-u-1-1") }}

          </div>

        </div>

        <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>

        <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 %}