{{ partial:header }}
{{ partial:imgheader }}
{{ partial:content }}
<section>
    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
        <div class="feature boxed bg-secondary text-center">

            {{ nocache }}
            {{ form:set is="benevole" }}
            {{ if {form:errors} }}
            <p>Ups, einige Daten fehlen. Überprüfe das Formular sorgfältig oder kontaktiere uns per E-Mail.</p>

            {{ /if }}
            {{ if {form:success} }}
            <div class="text-confirmation">
                <i class="fa-light fa-envelope-circle-check" style="font-size: 60px; padding-bottom: 20px;"></i>
                {{ confirmation }}
            </div>
            {{ /if }}
            {{ form:create }}
            <h4 class="uppercase mt48 mt-xs-0">Freiwilliger werden</h4>
            <p class="lead mb64 mb-xs-24" >
                Möchten Sie sich engagieren und zum Erfolg unserer Pride beitragen? Werden Sie Freiwilliger und nehmen Sie an dieser bereichernden Erfahrung teil! Füllen Sie einfach das untenstehende Formular aus, um unserem Team beizutreten.            </p>




            {{ if success }}
            <div class="bg-green-300 text-white p-2">
                {{ success }}
            </div>
            {{ else }}
            <div>
                <hr>
                <h6 class="uppercase">
                    1. Wie heißt du?
                </h6>
                {{ fields }}
                {{ if type == "text" }}
                {{ if handle == "email"}}
            </div><div>
            <hr>
            <h6 class="uppercase">
                3. Wie man dich kontaktieren kann
            </h6>
            <input type="email" class="col-md-6 validate-required validate-email{{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}"  />
            {{ elseif handle == "street" }}
        </div><div>
            <hr>
            <h6 class="uppercase">
                4. Wie lautet deine Adresse
            </h6>
            <input type="text" class="col-md-12 validate-required{{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" />
            {{ elseif handle == "city" }}
            <input type="text" class="col-md-12 validate-required {{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" />
            {{ elseif handle == "birthdate" }}
        </div><div>
            <hr>
            <h6 class="uppercase">
                5. Wie lautet dein Geburtsdatum
            </h6>
            <input type="date" class="col-md-6 col-md-offset-3 {{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" />
            {{ else }}
            <input type="text" class="col-md-6 validate-required{{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}"  />
            {{ /if }}
            {{ elseif type == "radio" }}
        </div><div>
            <hr>
            <h6 class="uppercase">
                5. Wie lautet dein Geburtsdatum
            </h6>
            <div class="col-sm-4 col-xs-4">
                <p>Er</p>
                <div class="radio-option{{ if error }} radio-error{{ /if }}">
                    <div class="inner"></div>
                    <input type="radio" name="gender" value="il"  />
                </div>
            </div>
            <div class="col-sm-4 col-xs-4">
                <p>Sie</p>
                <div class="radio-option{{ if error }} radio-error{{ /if }}">
                    <div class="inner"></div>
                    <input type="radio" name="gender" value="elle" />
                </div>
            </div>
            <div class="col-sm-4 col-xs-4">
                <p>neutral</p>
                <div class="radio-option{{ if error }} radio-error{{ /if }}">
                    <div class="inner"></div>
                    <input type="radio" name="gender" value="iel" />
                </div>
            </div>
            {{ elseif type == "textarea" }}
        </div><div>
            <hr>
            <h6 class="uppercase">
                6. Haben Sie Bemerkungen? Wünsche?
            </h6>
            <textarea class="{{ if error }} field-error{{ /if }}" name="{{ handle }}" rows="4" placeholder="{{ display }}">{{ old }}</textarea>
            {{ /if }}

            {{ /fields }}
        </div>
            <input type="text" class="hidden" name="{{ honeypot ?? 'honeypot' }}">

            <button type="submit">Anmelden</button>
            {{ /if }}
            {{ /form:create }}
            {{ /form:set }}

            {{ /nocache }}
        </div>
    </div>
</section>