{% include 'patterns/organisms/layout/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' ui_switch_iterable=programs %}

    <main role="main" class="mb-4 xl:mb-20">
      <div class="container--wide flex flex-col">
        {% for program in programs %}
          <template v-if="isCurrentView('view{{ forloop.counter }}')">
            {% if program.type == "concise" %}
              <div>
                {% if program.perex %}
                  <div class="mb-12">
                    <div class="prose">
                      {# 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="mb-12">
                {% include 'patterns/organisms/popouts/popout_list.html' %}
              </div>
            {% elif program.type == 'crossroad' %}
              <div class="mb-12">
                {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" classes='drop-shadow' %}
              </div>
            {% endif %}
          </template>
        {% endfor %}
      </div>
    </main>
  </ui-view-provider>
</div>

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

