candidate-detail.mustache

{{> organisms-header }}

<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
  <div class="container container--default text-center lg:text-left">
    <h1 class="head-alt-md md:head-alt-xl max-w-2xl">{{ person.first }} {{ person.last }}</h1>
    <h2 class="head-xs mt-2 max-w-xl">{{ person.occupation }}</h2>
  </div>
</article>

<div class="container container--default py-8 lg:pb-24">
  <main>
    <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
      <section class="lg:w-3/5 xl:w-2/3">
        <div class="mb-16">
          {{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
        </div>
        <div>
          <h2 class="head-alt-md mb-3"><i class="ico--calendar mr-4"></i>Kalendář</h2>
          {{> atoms-month-calendar() }}
        </div>
      </section>
      <section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
        <div class="container-padding--zero lg:card lg:elevation-10 lg:container-padding--auto">
          <div class="card__body p-4 lg:p-8">
            <div class="text-center mb-8">
              {{> atoms-basic-avatar(classes: "avatar--2xl lg:avatar--3xl avatar--bordered candidate-detail__avatar") }}
            </div>
            {{> molecules-basic-social-icon-group(classes: "text-lg") }}
            <hr />
            <div class="flex items-center">
              {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
              <span class="font-bold font-condensed">{{ person.party }}</span>
            </div>
            <hr />
            <div class="content-block">
              <div class="space-y-4">
                <div>
                  <h4>Telefon</h4>
                  {{> atoms-contact-line(icon: "ico--phone", cta: "+420 777 123 123") }}
                </div>
                <div>
                  <h4>Email</h4>
                  {{> atoms-contact-line(icon: "ico--envelope") }}
                </div>
              </div>
              <hr />
              <h2>Asistenti</h2>
              <div class="space-y-4 mt-4">
                {{> molecules-condensed-badge(occupation: "1. asistent", hideOccupation: true)}}
                {{> molecules-condensed-badge(occupation: "2. asistent", hideOccupation: true)}}
              </div>
              <hr />
              <h2>Kancelář</h2>
              <h4>Poslanecká sněmovna</h4>
              <p>
                Jiřího náměstí 39, 290 33 Poděbrady
              </p>
              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz" width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
              <h4>Otevírací doba</h4>
              <p>Pondělí 14:00 - 18:00 objednat se přes: kancelář-podebrady@pirati.cz nebo 778 111 462.</p>
              <!-- Mobile divider -->
              <hr class="block lg:hidden" />
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
</div>