export_program_point_fancy.html

{% load wagtailcore_tags elections2021_extras %}
<div>
  <div class="w-full">
    <div>
      <table style="width:100%" cellpadding="0" cellspacing="0">
        <tr>
          <td class="px-8 py-8 bg-lemon" rowspan="2" style="width:120mm;">
            <h1 id="chaptertitle" class="head-alt-md md:head-alt-lg" style="font-family: 'Bebas Neue';">{{ page.title }}</h1>
          </td>
          <td class="px-4 bg-acidgreen" style="font-family: 'Bebas Neue';padding-top: 6.5mm;padding-bottom: 5.5mm;font-size: 14pt;">2021</td>
        </tr>
        <tr>
          <td class="px-4 py-4 text-center" style="background: #000;"><img src="file://./img/logo-koalicni.svg" style="height: 17mm;margin:0 auto;" /></td>
        </tr>
      </table>
      <h2 class="head-alt-sm md:head-alt-md mb-20 mt-9" style="font-size:40pt; line-height: 1.3;">
        {{ page.annotation|richtext|format_sources }}
      </h2>
    </div>

    <div class="px-4 py-4 bg-acidgreen" style="display:inline-block;">
      <div style="font-family: 'Bebas Neue';">Obsah</div>
    </div>
    <div style="padding-left: 2rem;border-left:1px solid #ccc;">
      <br><br>

      <div class="contentsrow">
        <a href="#takhle-to-dal-nejde">Takhle to dál nejde</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#takhle-to-dal-nejde"></a>
      </div>
      <div class="contentsrow">
        <a href="#v-cem-je-problem">V čem je problém</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#v-cem-je-problem"></a>
      </div>
      <div class="contentsrow">
        <a href="#nase-vize">Naše vize</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#nase-vize"></a>
      </div>
      <div class="contentsrow">
        <a href="#jak-to-chceme-udelat">Jak to chceme udělat?</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#jak-to-chceme-udelat"></a>
      </div>
      <div class="contentsrow">
        <a href="#kolik-potrebujeme-casu">Kolik na to chceme času?</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#kolik-potrebujeme-casu"></a>
      </div>
      <div class="contentsrow">
        <a href="#co-to-prinese">Pro koho to chceme hlavně</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#co-to-prinese"></a>
      </div>
      <div class="contentsrow">
        <a href="#co-jsme-uz-odpracovali">Co pro to už děláme</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#co-jsme-uz-odpracovali"></a>
      </div>
      <div class="contentsrow">
        <a href="#casto-kladene-otazky">Na co se nás často ptáte</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#casto-kladene-otazky"></a>
      </div>
      <div class="contentsrow">
        <a href="#zdroje">Klidně si to ověřte</a>
        <div class="contentsline"></div>
        <a class="contentsnum" href="#zdroje"></a>
      </div>

    </div>
  </div>
</div>

<!--page problem -->
<div style="page-break-before: always;">
  <div class="problem-pack">
    <section id="takhle-to-dal-nejde" class="program-detail-problem-solution mb-20">
      <img src="file://./img/cross.svg" style="margin-bottom: 16mm;" />
      <div class="content-block">
        <h2 class="head-alt-sm md:head-alt-md mb-9" style="font-size:30pt;">Takhle to dál nejde</h2>
        <p class="text-base mb-8 para" style="font-size: 17pt;line-height: 1.2;">
          {{ page.problem|richtext|format_sources }}
        </p>
        <div id="v-cem-je-problem">
          <div class="accordeon-row accordeon-row--open h-full">
            <div class="accordeon-row-head">
              <h3 class="accordeon-row-heading head-alt-xs mb-0 font-alt" style="font-size:19pt;">V čem je problém</h3>
            </div>
            <div class="accordeon-row-body accordeon-row-body--fadeout">
              <div>
                {{ page.context|richtext|format_sources }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

<!--page ideál -->
<div id="nase-vize" style="page-break-before: always;">
  <div class="problem-pack">
    <section class="program-detail-problem-solution mb-20">
      <div class="ideal-inner content-block text-center">
        <h2 class="head-alt-sm md:head-alt-md mb-9" style="margin-top:50mm; font-size: 36pt;">Ideál</h2>
        <div class="font-alt" style="font-size: 20pt; max-width: 160mm; margin-left:auto; margin-right: auto;">
          {{ page.ideal|richtext|format_sources }}
        </div>
      </div>
    </section>
    <img src="file://./img/tick.svg" style="display:block;margin: 0 auto;">
  </div>
</div>

<!--page opatreni-->
<div style="page-break-before: always;">
  <h3 id="jak-to-chceme-udelat" class="head-alt-md mb-8 leading-tight">Jak to chceme udělat?</h3>
  <div class="content-block">
    {{ page.proposal|richtext|format_sources|style_h4 }}
  </div>

  <div id="kolik-potrebujeme-casu" class="grid grid-cols-1 gap-8 mt-20">
    {% if page.time_horizon_number %}
      <table class="bg-grey-125 text-black px-8 py-4 lg:px-10 countdown-small" style="width:100%;">
        <tr>
          <td style="text-align:left;">
            <h1 class="head-alt-sm flex-grow lg:text-left mb-0 mt-1 text-left" style="font-size:30pt">Kolik na to chceme času?</h1>
          </td>
          <td style="text-align:right;">
            <div class="static-clock">
              <span class="font-alt" style="font-size:46pt;">{{ page.time_horizon_number }}</span>
              <div class="font-alt" style="font-size:16pt;">{{ page.time_horizon_unit }}</div>
            </div>
          </td>
        </tr>
      </table>
    {% endif %}
    {% if page.time_horizon_text %}
      <div class="card shadow-none bg-grey-125" style="margin-top: 4mm;">
        <div class="card__body">
          <h1 class="card-headline mb-8 head-alt-sm">Kolik na to chceme času?</h1>
          <div class="card-body-text para">
            {{ page.time_horizon_text|richtext|format_sources }}
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</div>

<!--page benefity-->
<div style="page-break-before: always;">
  <div class="program-detail-benefity">
    <h3 id="co-to-prinese" class="head-alt-base mb-8 font-alt" style="font-size:30pt;">Pro koho to chceme hlavně</h3><br>
    {% for block in page.benefits_main %}
      <div class="benefit">
        <img src="file://./img/benefits/{{ block.value.variant }}.jpg" />
        <div class="benefit-detail bg-acidgreen">
          <p class="head-heavy-base w-full mb-4">{{ benefits_titles|dictitem:block.value.variant }}</p>
          <div class="content-block">
            {{ block.value.text|richtext|format_sources }}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="program-detail-benefity">
    {% for block in page.benefits %}
      <div class="card shadow-none bg-acidgreen text-black card--hoveractive">
        <div class="card__body">
          <h1 class="card-headline mb-4">{{ block.value.title }}</h1>
          <div class="card-body-text content-block">
            {{ block.value.text|richtext|format_sources }}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<!--page starting with quote-->
<div style="page-break-before: always;">
  {% if page.benefit_for_all %}
    <h3 class="head-alt-lg mb-20 text-3xl md:text-5xl leading-tight font-alt" style="font-size:30pt;">{{ page.benefit_for_all|richtext|format_sources }}</h3>
  {% endif %}
  <h3 id="co-jsme-uz-odpracovali" class="head-alt-base mb-10 font-alt" style="font-size:30pt;">Co pro to už děláme</h3>
  <div class="content-block">
    {{ page.already_done|richtext|format_sources|style_h4 }}
  </div>
</div>

<div style="page-break-before: always;">
  <h3 id="casto-kladene-otazky" class="head-alt-base mb-8 mt-8 font-alt" style="font-size:30pt;">Na co se nás často ptáte</h3>
  {% for block in page.faq %}
    <div class="accordeon-row accordeon-row--open">
      <div class="accordeon-row-head">
        <h3 class="accordeon-row-heading head-alt-xs font-alt" style="font-size:19pt;">{{ block.value.question }}</h3>
      </div>
      <div class="accordeon-row-body accordeon-row-body--classic content-block">
        <div>{{ block.value.answer|richtext|format_sources }}</div>
      </div>
    </div>
  {% endfor %}
</div>

<!--page zdroje -->
<div style="page-break-before: always; page-break-after: always;">
  <h3 id="zdroje" class="head-alt-base mb-8 mt-8 font-alt" style="font-size:30pt;">Klidně si to ověřte</h3>
  <div class="content-block text-sm">
    {{ page.sources|richtext|format_sources_block }}
  </div>
</div>