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