program_block.html

{% load wagtailcore_tags wagtailimages_tags %}

{% if block_type == "program_group" %}
  <div
    class="
      container--wide flex flex-col mb-4 xl:mb-20

      {% if not is_descendant %}
        mt-20
      {% endif %}
    "
  >
    {% if self.perex %}
      <div class="mb-12">
        <div class="prose">
          {{ self.perex|richtext }}
        </div>
      </div>
    {% endif %}

    {% for point in self.point_list %}
      {% if point.icon %}
        {% image point.icon max-150x150 as point_icon %}
      {% endif %}

      {% include 'styleguide2/includes/molecules/blocks/icon_title_text_block.html' with icon=point_icon url=point.url title=point.title text=point.text %}
    {% endfor %}
  </div>
{% elif block_type == 'program_group_popout' %}
  <div
    class="
      container--wide flex flex-col mb-12 xl:mb-20

      {% if not is_descendant %}
        mt-20
      {% endif %}
    "
  >
    {% include 'styleguide2/includes/organisms/popouts/popout_list.html' with categories=self.categories %}
  </div>
{% elif block_type == "carousel_program" %}
  <div
    class="
      mb-12 xl:mb-20

      {% if not is_descendant %}
        mt-20
      {% endif %}
    "
  >
   {% include 'styleguide2/includes/molecules/program/card_program.html' %}
  </div>
{% elif block_type == 'program_group_crossroad' %}
  <div
    class="
      container--wide flex flex-col mb-12 xl:mb-20

      {% if not is_descendant %}
        mt-20
      {% endif %}
    "
  >
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-8">
      {% for point in self.point_list %}
        {% image point.image fill-512x512 as point_image %}

        {% include 'styleguide2/includes/molecules/boxes/card_box.html' with url=point.page.url image=point_image header=point.title content=point.text date=point.page.date description_classes="!bg-grey-180" classes="drop-shadow" %}
      {% endfor %}
    </div>
  </div>
{% elif block_type == "elections_program" %}
  <div class="mb-12">
    {{ self.program_page.get_main_page_program_render|safe }}
  </div>
{% elif block_type == "program_group_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 inline-block"
        :class="{'switch__item--active': isCurrentSecondaryView('candidates')}"
      >Kandidáti</a>

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

      {% for other_view in self.other_views %}
        <a
          @click="toggleSecondaryView('extra-view-{{ forloop.counter0 }}')"
          class="switch__item--program inline-block"
          :class="{'switch__item--active': isCurrentSecondaryView('extra-view-{{ forloop.counter0 }}')}"
        >{{ other_view.title }}</a>
      {% endfor %}
    </div>

    <template v-if="isCurrentSecondaryView('candidates')">
      <div>
        {% include_block self.primary_candidates with show_job=self.show_job %}
        {% include_block self.secondary_candidates with show_job=self.show_job %}
      </div>
    </template>

    <template v-if="isCurrentSecondaryView('program')">
      {% with is_descendant=True %}
        {% for program in self.program %}
          {% with program.block_type as block_type %}
            {% include_block program %}
          {% endwith %}
        {% endfor %}
      {% endwith %}
    </template>

    {% for other_view in self.other_views %}
      <template v-if="isCurrentSecondaryView('extra-view-{{ forloop.counter0 }}')">
        <div class="flex flex-col gap-4 mb-4 xl:mb-20 container--wide">
          {% for child_block in other_view.child_blocks %}
            {% include_block child_block %}
          {% endfor %}
        </div>
      </template>
    {% endfor %}
  </ui-secondary-view-provider>
{% endif %}