{% include 'patterns/organisms/layout/navbar.html' with selected_item='Kontakty' %}
{% include 'patterns/organisms/header/simple_header.html' with title='Kontakty' %}

<main role="main">
  <section class="container--wide mb-4 xl:mb-20">
    <div class="flex flex-col flex-wrap mb-10 xl:mb-20">
      <div
        class="
          flex gap-10 flex-wrap
          lg:flex-nowrap
        "
      >
        <div class="w-full max-w-xl">
          <h2 class="head-6xl mb-5">
            {{ contact_title }}
          </h2>
          <div class="flex flex-wrap justify-between">
            <div class="leading-5 w-5/6 sm:w-6/12 leading-">
              <p>
                <span class="font-bold">{{ contact_label_1 }}</span>

                <br>

                {% for content in contact_content_1 %}
                  {{ content.text }}<br>
                {% endfor %}

                <br>

                <span class="font-bold">{{ contact_label_2 }}</span>

                <br>

                {% for content in contact_content_2 %}
                  <div class="mb-1">{{ content.text }}</div>
                {% endfor %}

                <br>

                <span class="font-bold">{{ contact_label_3 }}</span>

                <br>

                {% for content in contact_content_3 %}
                  <div class="mb-1">{{ content.text }}</div>
                {% endfor %}

                <br>

                <span class="font-bold">{{ contact_label_4 }}</span>

                <br>

                {% for content in contact_content_4 %}
                  <a href="{{ content.url }}" class="text-turquoise-500 underline">
                    {{ content.text }}
                  </a>
                {% endfor %}
              </p>
            </div>

            <div class="leading-5 w-5/6 sm:w-5/12">
               <p>
                <span class="font-bold">{{ contact_label_1 }}</span>

                <br>

                {% for content in contact_content_1 %}
                  {{ content.text }}<br>
                {% endfor %}

                <br>

                <span class="font-bold">{{ contact_label_2 }}</span>

                <br>

                {% for content in contact_content_2 %}
                  <div class="mb-1">{{ content.text }}</div>
                {% endfor %}

                <br>

                <span class="font-bold">{{ contact_label_3 }}</span>

                <br>

                {% for content in contact_content_3 %}
                  <div class="mb-1">{{ content.text }}</div>
                {% endfor %}

                <br>

                <span class="font-bold">{{ contact_label_4 }}</span>

                <br>

                {% for content in contact_content_4 %}
                  <a href="{{ content.url }}" class="text-turquoise-500 underline">
                    {{ content.text }}
                  </a>
                {% endfor %}
              </p>
            </div>
          </div>
        </div>

        <div class="w-full max-w-2xl">
          <h2 class="head-6xl mb-5">
            {{ contact_label_9 }}
          </h2>

          <div class="__js-root w-full flex max-w-2xl items-center">
            <ui-region-map class="w-full"></ui-region-map>
          </div>
        </div>
      </div>
    </div>

    <h2 class="head-6xl mb-5 xl:mb-8">
      {{ contact_label_10 }}
    </h2>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
      {% include 'patterns/molecules/contact/contact_person_large_box.html' %}
      {% include 'patterns/molecules/contact/contact_person_large_box.html' %}
      {% include 'patterns/molecules/contact/contact_person_large_box.html' %}
    </div>
  </section>
</main>

{% include 'patterns/organisms/main_section/newsletter_section.html' %}
{% include 'patterns/organisms/layout/footer.html' %}
