contact-persons

// src/components/patterns/contact-persons/contact-persons.html.twig

{% set first_h_level = headline ? 3 : 2 %}
{% set second_h_level = headline ? 4 : 3 %}
{% if profile_node %}
  {% set first_h_level = 1 %}
  {% set second_h_level = 2 %}
{% endif %}
{% if headline_level_from_ui %}
  {% set first_h_level = headline_level_from_ui %}
  {% set second_h_level = headline_level_from_ui %}
{% endif %}
<div class="ContactPersons">
  {%- if headline %}
    <h2 class="ContactPersons-headline u-container u-typo-headline3">{{ headline|german_quotes }}</h2>
  {% endif -%}
  <div class="ContactPersons-inner">
    <div class="u-container">
      {%- for contact_person in contact_persons %}
        {% set name = contact_person.first_name ~ " " ~ contact_person.last_name %}
        {% set position = contact_person.position %}
        {% set image = contact_person.image %}
        {% set image_copyright = contact_person.image_copyright %}
        {% set bio = contact_person.short_bio %}
        {% set mail = contact_person.email %}
        {% set phone = contact_person.phone_number %}
        {% set has_contact = mail or phone %}
        {% set social_networks = contact_person.social_networks %}
        <article class="ContactPersons-person u-grid">
          <div class="ContactPersons-about">
            <h{{ first_h_level }} class="u-typo-headline4-desktop-headline3-mobile">{{ name|german_quotes }}</h{{ first_h_level }}>
            {%- if position %}
              <p class="ContactPersons-position">{{ position|german_quotes }}</p>
            {% endif -%}
            {%- if bio %}
              <p class="ContactPersons-bioText">{{ bio|german_quotes }}</p>
            {% endif -%}
            {% if social_networks %}
              <div class="ContactPersons-socialNetworks ContactPersons-socialNetworks--desktop">
                <h{{ second_h_level }} class="ContactPersons-socialNetworksHeadline u-typo-headline5">Folgen</h{{ second_h_level }}>
                <ul class="ContactPersons-socialNetworksList">
                  {% for social_network in social_networks %}
                    {% if social_network %}
                      <li class="ContactPersons-socialNetworkItem">
                        <a class="ContactPersons-socialNetworklink" href="{{ social_network.url }}" target="_blank" rel="noopener">
                          {% include "@elements/icon/icon.html.twig" with {
                            name: social_network.title,
                            class: "ContactPersons-socialNetworkIcon"
                          } only %}
                          <span class="u-hiddenVisually">{{ social_network.title }}</span>
                        </a>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
          </div>
          {%- if has_contact %}
            <div class="ContactPersons-contact">
              <h{{ second_h_level }} class="ContactPersons-contactHeadline u-typo-headline5">Kontakt</h{{ second_h_level }}>
              <ul class="ContactPersons-contactList">
                {%- if mail %}
                  {% include "@patterns/contact-persons/contact-channel/contact-channel.html.twig" with {
                    title: "E-Mail",
                    icon: "mail",
                    link: {title: mail, url: mail}
                  } only %}
                {% endif -%}
                {%- if phone %}
                  {% include "@patterns/contact-persons/contact-channel/contact-channel.html.twig" with {
                    title: "Telefon",
                    icon: "phone",
                    link: {title: phone, url: phone}
                  } only %}
                {% endif -%}
              </ul>
            </div>
          {% endif -%}
          {%- if image %}
            <div class="ContactPersons-image">
              <span class="ContactPersons-decoration"></span>
              <span class="ContactPersons-decoration"></span>
              {{ image|raw }}
              {% if not exclude_copy_right %}
                {% if image_copyright %}<figcaption class="ContactPersons-copyright u-typo-copy-small">{{ image_copyright|german_quotes }}</figcaption> {% endif %}
              {% endif %}
            </div>
          {% endif -%}
          {% if social_networks %}
            <div class="ContactPersons-socialNetworks ContactPersons-socialNetworks--mobile">
              <h{{ second_h_level }} class="ContactPersons-socialNetworksHeadline u-typo-headline5">Folgen</h{{ second_h_level }}>
              <ul class="ContactPersons-socialNetworksList">
                {% for social_network in social_networks %}
                  {% if social_network %}
                    <li class="ContactPersons-socialNetworkItem">
                      <a class="ContactPersons-socialNetworklink" href="{{ social_network.url }}" target="_blank" rel="noopener">
                        {% include "@elements/icon/icon.html.twig" with {
                          name: social_network.title,
                          class: "ContactPersons-socialNetworkIcon"
                        } only %}
                        <span class="u-hiddenVisually">{{ social_network.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </article>
      {% endfor -%}
    </div>
  </div>
</div>