Pattern Library

{% include 'patterns/organisms/layout/main/navbar.html' with selected_item='Program' %}

<div class="__js-root">
  <ui-view-provider
    :initial="{program1: true, {% for program in programs %}view{{ forloop.counter }}: {% if forloop.first %}true{% else %}false{% endif %}{% if not forloop.last %},{% endif %}{% endfor %}}"
    :sync-location="true"
    v-slot="{ isCurrentView, toggleView }"
  >
    {% include 'patterns/organisms/header/simple_header_with_ui_switch.html' with title='Program' description='Description' ui_switch_iterable=programs %}

    <main role="main">
      {% for program in programs %}
        <template v-if="isCurrentView('view{{ forloop.counter }}')">
          {% if program.type == "concise" %}
            <div class="container--wide flex flex-col mt-20 mb-4 xl:mb-20">
              {% if program.perex %}
                <div class="mb-12">
                  <div class="prose max-w-none">
                    {# BEGIN Cast generovana Majakem #}<div class="content-block">
                      <p>
                          {{ program.perex }}
                      </p>
                    </div>{# END Cast generovana Majakem #}
                  </div>
                </div>
              {% endif %}

              {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon='ico--book' %}
              {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon=None %}
            </div>
          {% elif program.type == 'popout' %}
            <div class="container--wide flex flex-col mt-20 mb-12 xl:mb-20">
              {% include 'patterns/organisms/popouts/popout_list.html' %}
            </div>
          {% elif program.type == 'crossroad' %}
            <div class="container--wide flex flex-col mt-20 mb-12 xl:mb-20">
              {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" classes='drop-shadow' %}
            </div>
          {% elif program.type == 'with_candidates' %}
            <ui-secondary-view-provider
              :initial="{candidates: true, program: false}"
              :sync-location="true"
              v-slot="{ isCurrentSecondaryView, toggleSecondaryView }"
            >
              <div class="bg-white py-12 container--wide text-center">
                <a
                  @click="toggleSecondaryView('candidates')"
                  class="switch__item--program"
                  :class="{'switch__item--active': isCurrentSecondaryView('candidates')}"
                >Kandidáti</a>

                <a
                  @click="toggleSecondaryView('program')"
                  class="switch__item--program"
                  :class="{'switch__item--active': isCurrentSecondaryView('program')}"
                >Program</a>
              </div>

              <template v-if="isCurrentSecondaryView('candidates')">
                <div>
                  {% include "patterns/organisms/candidates/candidate_primary_list.html" %}
                  {% include "patterns/organisms/candidates/candidate_secondary_list.html" %}
                </div>
              </template>

              <template v-if="isCurrentSecondaryView('program')">
                <div class="bg-grey-50 pb-4 xl:pb-20">
                  <div class="container--wide flex flex-col mb-12 gap-8">
                    {% include 'patterns/atoms/text/richtext.html' %}

                    {% include 'patterns/organisms/popouts/popout_list.html' %}
                  </div>
                </div>
              </template>
            </ui-secondary-view-provider>
          {% endif %}
        </template>
      {% endfor %}
    </main>
  </ui-view-provider>
</div>

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