{{> organisms-header }}
{{> organisms-elections-hero }}

<div class="__js-root">
  <ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true" v-slot="{ isCurrentView, toggleView }">
    <main>
      <div class="container container--default pt-8 lg:py-24">
        <div class="text-center">
          <div class="switch">
            <a @click="toggleView('candidates')" class="switch__item" :class="{'switch__item--active': isCurrentView('candidates')}">Kandidáti</a>
            <a @click="toggleView('program')" class="switch__item" :class="{'switch__item--active': isCurrentView('program')}">Program</a>
          </div>
        </div>

        <template v-if="isCurrentView('candidates')">
          <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Kandidátka do krajských voleb</h1>

          <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border") }}
            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border lg:candidate-card-list__item-wrapper--noborder") }}
            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border") }}
            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
            {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
            {{> molecules-banner(color: "bg-black", fullwidthButton: true, classes: "container-padding--zero sm:container-padding--auto")}}
          </div>

          <ui-view-provider :initial="{fullCandidateTable: false}" v-slot="{ isCurrentView, setView }">
            <div class="candidate-table pt-8 container-padding--zero lg:container-padding--auto" :class="{'candidate-table--fadeout': !isCurrentView('fullCandidateTable')}">
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              {{> molecules-candidate-table-row }}
              <template v-if="isCurrentView('fullCandidateTable')">
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
                {{> molecules-candidate-table-row }}
              </template>
            </div>

            <div class="text-center pt-8" v-if="!isCurrentView('fullCandidateTable')">
              <button class="btn btn--icon text-xl btn--black btn--hoveractive" @click="setView('fullCandidateTable', true)">
                <div class="btn__body-wrap">
                  <div class="btn__body ">Zobrazit vše</div>
                  <div class="btn__icon "><i class="ico--chevron-right"></i></div>
                </div>
              </button>
            </div>
          </ui-view-provider>
        </template>

        <template v-if="isCurrentView('program')">
          <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Volební program</h1>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Otevřenost a zapojení občanů" )}}
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Smart city" )}}
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Řízení a organizační struktura města" )}}
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Rozvoj města a bydlení" )}}
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Doprava" )}}
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Veřejný prostor a zeleň" )}}
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Vzdělávání" )}}
            {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", imgClasses: "h-48 object-fit", title: "Kultura a volný čas" )}}
          </div>
        </template>

        <div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
          {{> atoms-super-button(cta: "Povolební strategie", icon: "ico--strategy", classes: "bg-grey-125 hover:bg-black hover:text-white lg:w-full container-padding--zero lg:container-padding--auto") }}
          {{> atoms-super-button(cta: "Financování kampaně", icon: "ico--calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black lg:w-full container-padding--zero lg:container-padding--auto") }}
        </div>
      </div>
    </main>
  </ui-view-provider>
</div>

{{> organisms-footer }}