{% extends "header_slim.html" %}
{% from "macros/services_cards.html" import render_services_card %}
{%- block title -%}{{ this.title }}{%- endblock -%}
{%- block meta_description -%}
  {%- if this.meta_description is defined and this.meta_description != "" -%}
    {{ this.meta_description }}
  {%- else -%}
    Werkkooperative der Technikfreundinnen eG
  {%- endif -%}
{%- endblock -%}
{% block body %}
    <section class="content">
      <div class="content__box">
        {% if this.intro %}
          <div class="content__box">
              <div class="content__inner_box">
                  {{ this.intro }}
              </div>
          </div>
        {% endif %}

        <div class="services_box">
          <h1>{{ this.title }}</h1>
          <div class="services_card_box">
            {% for card in this.section.blocks %}
              {% if card._flowblock == "flow_services_cards" %}
                {{ render_services_card(card, loop.index) }}
              {% endif %}
            {% endfor %}
          </div>
        </div>

        <div class="portfolio_box">
          <h1>Portfolio</h1>
          <div class="services_card_box">
            {% for card in this.section.blocks %}
              {% if card._flowblock == "flow_portfolio_cards" %}
                {{ render_services_card(card, loop.index) }}
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </section>

      <div class="content__box">
          <div class="content__inner_box">
              <h1 class="big_heading">{{ this.kompetenzen_heading }}</h1>
          </div>
      </div>
      <section class="content">
      <div class="content__box">
          <div class="bubble_grid">
            {% for icon_bubble in this.section.blocks %}
              {% if icon_bubble._flowblock == "flow_icon_bubbles" %}
                {{ icon_bubble }}
              {% endif %}

            {% endfor %}

            <div class="bubble_grid__card">
              {{ this.kompetenzen_body }}
            </div>

        </div>
      </div>
    </section>

  <div class="contact__box" style="display: none">
    <h1>{{ this.contact_form_heading }}</h1>

      <div class="contact_info__box">
      <p>
        <strong>WTF Kooperative eG</strong><br>
        Forsmannstr. 14 b<br>
        Hinterhaus, 3. OG<br>
        22303 Hamburg
      </p>
      <p>
        <strong>E-Mail:</strong><br>
        office@wtf-eg.de
      </p>
      <p>
        <strong>GnuPG Key:</strong><br>
        <a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc" title="1129A9F509FE1B36287202A2FE8772F9FB5D572F">wtf_eg.asc</a>
      </p>
    </div>
    <section class="contact_form_box">
      <div class="content__box">
          <div class="content__inner_box -width_constraint content__contact_form_wrapper">
            <h2>{{ this.contact_form_subheading }}</h2>
            <form id="contact_form" class="content__contact_form">
              <p class="contact_form__note">
                {{ this.contact_form_info }}
              </p>
              <p class="contact_form__text_input">
                <label for="name">{{ this.contact_form_subject }} <span class="contact_form--required" aria-hidden="true">*</span></label>
                <input id="name" class="contact_form__subject" name="subject" type="text" value="" size="30" maxlength="245" required />
              </p>
              <p class="contact_form__textarea">
                <label for="message">{{ this.contact_form_message }} <span class="contact_form--required" aria-hidden="true">*</span></label>
                <textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
              </p>
              <p class="contact_form__text_input">
                <label for="name">{{ this.contact_form_name }} <span class="contact_form--required" aria-hidden="true">*</span></label>
                <input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
              </p>
              <p class="contact_form__text_input">
                <label for="email">{{ this.contact_form_email }} <span class="contact_form--required" aria-hidden="true">*</span></label>
                <input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
              </p>
              <p class="contact_form__captcha">
                <label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
                <input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
              </p>
              <p class="contact_form__submit">
                <input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="{{ this.contact_form_button }}" />
                <p class="contact_form__feedback"></p>
              </p>
            </form>
          </div>
      </div>
    </section>
  </div>
{% endblock %}