{% include 'patterns/organisms/layout/district/navbar.html' with selected_item='Kdo jsme' %}

<div class="__js-root">
  <ui-view-provider
    :initial="{candidates: true, program: false, other1: false, other2: false}" :sync-location="true"
    v-slot="{ isCurrentView, toggleView }"
  >
    {% include 'patterns/organisms/header/district/people_header.html' %}

    <main role="main" class="mb-20">
      <div class="container--wide">
        <div
          class="
            flex flex-wrap justify-center gap-4
            xl:justify-start
          "
        >
          <template v-if="!isCurrentView('teams')">
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2 w-full">
              <template v-if="isCurrentView('candidates')">
                {% for content in people_candidates %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
              <template v-if="isCurrentView('program')">
                {% for content in people_program %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
              <template v-if="isCurrentView('other1')">
                {% for content in people_other_1 %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
              <template v-if="isCurrentView('other2')">
                {% for content in people_other_2 %}
                  {% include 'patterns/molecules/contact/contact_person_large_box.html' with name=content.name function=content.function %}
                {% endfor %}
              </template>
            </div>
          </template>
          <template v-if="isCurrentView('teams')">
            {% for section in teams_sections %}
              {% if section.header %}
                <h2 class="head-6xl mt-5 mb-5">{{ section.header }}</h2>
              {% endif %}
              {% include 'patterns/organisms/cards/card_list.html' with cards=section.cards description_classes="!bg-grey-180" %}
            {% endfor %}
          </template>
        </div>
      </div>
    </main>
  </ui-view-provider>
</div>

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