{% 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 %}
              {{ render_services_card(card, loop.index) }}
            {% endfor %}
          </div>
        </div>

      </div>

      <div class="content__box">
          <div class="content__inner_box">
              <h1 class="big_heading">Kompetenzen</h1>
          </div>
      </div>
      <section class="content">
      <div class="content__box">
          <div class="bubble_grid">

            <div class="bubble_grid__bubble">
              <img src="/images/logos/Python_logo_and_wordmark.svg" alt="Logo of the Python programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/ISO_C++_Logo.svg'|asseturl }}" alt="Logo of the C++ programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Tux.svg'|asseturl }}" alt="Tux the penguin mascott of Linux">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Unofficial_JavaScript_logo_2.svg'|asseturl }}" alt="Logo of the JavaScript programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/PHP-logo.svg'|asseturl }}" alt="Logo of the PHP programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/C_Programming_Language.svg'|asseturl }}" alt="Logo of the C programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Ansible_logo.svg'|asseturl }}" alt="Logo of the Ansible project">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Postgresql_elephant.svg'|asseturl }}" alt="Logo of the Postgres database">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Java-Logo.svg'|asseturl }}" alt="Logo of the Java programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Rust_programming_language_black_logo.svg'|asseturl }}" alt="Logo of the Rust programming language">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/CSS3_logo_and_wordmark.svg'|asseturl }}" alt="Logo of CSS3">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Debian-OpenLogo.svg'|asseturl }}" alt="Logo of the Debian operating system">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/MySQL_textlogo.svg'|asseturl }}" alt="Logo of the MySQL database">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/Vue.js_Logo_2.svg'|asseturl }}" alt="Logo of the Vue.js framework">
            </div>

            <div class="bubble_grid__bubble">
              <img src="{{ '/images/logos/LaTeX_logo.svg'|asseturl }}" alt="Logo of the LaTeX typesetting language">
            </div>

            <div class="bubble_grid__card">
              <ul>
                <li>Agiles Projektmanagement</li>
                <li>Barrierefreiheit</li>
                <li>Operations</li>
                <li>Software-Audits</li>
                <li>Softwareentwicklung</li>
                <li>Projektmanagement</li>
                <li>User Experience</li>
                <li>Übersetzung & Internationalisierung (i18n/l10n)</li>
              </ul>
            </div>

        </div>
      </div>
    </section>
{% endblock %}