{{> organisms-simplified-navbar-with-avatar }}

<article class="container container--wide pt-8 lg:py-24 cf2021">
  <section class="cf2021__video space-y-8">
    <div class="flex items-center justify-between mb-4 lg:mb-8">
      <h1 class="head-alt-md lg:head-alt-lg mb-0">Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021</h1>
    </div>

    <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </section>

  <section class="cf2021__notifications">
    <div class="lg:card lg:elevation-10">
      <div class="lg:card__body pb-2 lg:py-6">
        <h2 class="head-heavy-sm">Oznámení</h2>
      </div>

      <div class="container-padding--zero lg:container-padding--auto">
        {{> organisms-event-feed(itemPadding: "px-4 py-2 lg:px-8 lg:py-3") }}
      </div>
    </div>
  </section>

  <section class="cf2021__posts">
    <div class="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4">
      <h2 class="head-heavy-sm whitespace-no-wrap">Příspěvky v rozpravě</h2>
      <div class="flex flex-col space-y-2 xl:space-y-0 xl:space-x-8 xl:flex-row xl:items-center">
        <div class="-mx-1">
          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
            <select>
              <option value="">Vše</option>
              <option value="">Jen aktivní</option>
              <option value="">Jen archivované</option>
            </select>
            <span class="chip__icon ico--chevron-down"></span>
          </span>
          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
            <select>
              <option value="">Podle času</option>
              <option value="">Podle podpory</option>
            </select>
            <span class="chip__icon ico--chevron-down"></span>
          </span>
          <span class="chip chip--grey-125 chip--select chip--hoveractive text-xs ml-1 mt-2 xl:mt-0">
            <select>
              <option value="">Návrhy i příspěvky</option>
              <option value="">Jen návrhy</option>
              <option value="">Jen příspěvky</option>
            </select>
            <span class="chip__icon ico--chevron-down"></span>
          </span>
        </div>

        <div>
          {{> molecules-chip-pagination }}
        </div>
      </div>
    </div>

    <div class="space-y-6 container-padding--zero lg:container-padding--auto">
      <div class="flex items-start bg-yellow-100 bg-opacity-50 p-4 lg:p-2 lg:-m-2">
        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
        <div class="flex-1">
          <div class="mb-1">
            <div class="flex justify-between items-start xl:items-center">
              <div class="flex flex-col xl:flex-row xl:items-center">
                <div class="flex flex-col xl:flex-row xl:items-center">
                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                  <div class="mt-1 lg:mt-0">
                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                    <span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
                  </div>
                </div>
                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
                </div>
              </div>
              {{> molecules-thumbs }}
            </div>
          </div>
          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
        </div>
      </div>
      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
        <div class="flex-1">
          <div class="mb-1">
            <div class="flex justify-between items-start xl:items-center">
              <div class="flex flex-col xl:flex-row xl:items-center">
                <div class="flex flex-col xl:flex-row xl:items-center">
                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                  <div class="mt-1 lg:mt-0">
                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                    <span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
                  </div>
                </div>
                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
                </div>
              </div>
              {{> molecules-thumbs }}
            </div>
          </div>
          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
        </div>
      </div>
      <div class="flex items-start p-4 lg:p-2 lg:-m-2">
        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
        <div class="flex-1">
          <div class="mb-1">
            <div class="flex justify-between items-start xl:items-center">
              <div class="flex flex-col xl:flex-row xl:items-center">
                <div class="flex flex-col xl:flex-row xl:items-center">
                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                  <div class="mt-1 lg:mt-0">
                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                    <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
                    <a href="#" class="text-grey-200 text-xs ml-2 underline">(Upraveno přesdedajícím)</a>
                  </div>
                </div>
                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
                </div>
              </div>
              {{> molecules-thumbs }}
            </div>
          </div>
          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
        </div>
      </div>
      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
        <div class="flex-1">
          <div class="mb-1">
            <div class="flex justify-between items-start xl:items-center">
              <div class="flex flex-col xl:flex-row xl:items-center">
                <div class="flex flex-col xl:flex-row xl:items-center">
                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                  <div class="mt-1 lg:mt-0">
                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                    <span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
                  </div>
                </div>
                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300", cta: "Příspěvek")}}
                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                </div>
              </div>
              {{> molecules-thumbs }}
            </div>
          </div>
          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
        </div>
      </div>
      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
        <div class="flex-1">
          <div class="mb-1">
            <div class="flex justify-between items-start xl:items-center">
              <div class="flex flex-col xl:flex-row xl:items-center">
                <div class="flex flex-col xl:flex-row xl:items-center">
                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                  <div class="mt-1 lg:mt-0">
                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                    <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
                  </div>
                </div>
                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
                  {{> molecules-chip(classes: "chip--green-400 chip--condensed ml-2", cta: "Schválený")}}
                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                </div>
              </div>
              {{> molecules-thumbs }}
            </div>
          </div>
          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
        </div>
      </div>
      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
        <div class="flex-1">
          <div class="mb-1">
            <div class="flex justify-between items-start xl:items-center">
              <div class="flex flex-col xl:flex-row xl:items-center">
                <div class="flex flex-col xl:flex-row xl:items-center">
                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                  <div class="mt-1 lg:mt-0">
                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                    <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
                  </div>
                </div>
                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
                  {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Zamítnutý")}}
                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                </div>
              </div>
              {{> molecules-thumbs }}
            </div>
          </div>
          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
        </div>
      </div>
      <div class="flex items-start p-4 lg:p-2 lg:-m-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
        <img src="{{ img.avatar.src }}" class="w-8 h-8 lg:w-14 lg:h-14 rounded mr-3">
        <div class="flex-1">
          <div class="mb-1">
            <div class="flex justify-between items-start xl:items-center">
              <div class="flex flex-col xl:flex-row xl:items-center">
                <div class="flex flex-col xl:flex-row xl:items-center">
                  <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                  <div class="mt-1 xl:mt-0">
                    <span class="text-grey-200 text-sm">KS Pardubický kraj</span>
                    <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
                  </div>
                </div>
                <div class="flex flex-row flex-wrap lg:flex-no-wrap lg:items-center mt-1 xl:mt-0 xl:ml-2">
                  {{> molecules-chip(classes: "chip--cyan-200 chip--condensed", cta: "Návrh postupu")}}
                  {{> molecules-chip(classes: "chip--red-600 chip--condensed ml-2", cta: "Odmítnutý předsedajícím")}}
                  {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                </div>
              </div>
              {{> molecules-thumbs }}
            </div>
          </div>
          <p class="text-sm lg:text-base text-black leading-normal">{{ excerpt.medium }}</p>
        </div>
      </div>
    </div>

    <div class="my-8 space-y-4">
      {{> molecules-textarea-field(nolabel: true, placeholder: "Vyplňte text vašeho příspěvku", rows: 5) }}
      <div class="space-x-4">
        {{> molecules-dropdown-button(cta: "Přidat příspěvek") }}
        <span class="text-sm text-grey-200 hidden lg:inline">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
      </div>
    </div>
  </section>

</article>