{{> organisms-simplified-navbar }}

<div class="container container--wide pt-8 lg:py-24">
  <article class="space-y-8">

    <div class="grid grid-cols-3 gap-8" style="height: 30rem;">
      <div class="col-span-2 space-y-8">
        <iframe width="100%" height="610" src="https://www.youtube.com/embed/73jJLspL8o8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

        <section>
          <div class="flex justify-between items-center mb-4">
            <h2 class="head-alt-base">Příspěvky v rozpravě</h2>
            <div class="flex items-center space-x-8">
              <span class="chip chip--grey-125 chip--select text-xs">
                <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>

              {{> molecules-inline-pagination(classes: "text-xs") }}
            </div>
          </div>

          <div class="space-y-6">
            <div class="flex items-start bg-yellow-100 p-2 -ml-2">
              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
              <div class="flex-1 overflow-hidden">
                <div class="mb-1">
                  <div class="flex justify-between">
                    <div class="flex items-center">
                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                      <span class="text-grey-200 ml-1 text-sm">@ 11:46</span>
                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
                    </div>
                    <div class="space-x-2 text-sm flex items-center">
                      <button class="text-blue-300 flex items-center space-x-1">
                        <span class="font-bold">6</span>
                        <i class="ico--thumbs-up"></i>
                      </button>
                      <button class="text-red-600 flex items-center space-x-1">
                        <i class="ico--thumbs-down transform -scale-x-1"></i>
                        <span class="font-bold">2</span>
                      </button>
                    </div>
                  </div>
                </div>
                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
              </div>
            </div>
            <div class="flex items-start p-2 -ml-2">
              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
              <div class="flex-1 overflow-hidden">
                <div class="mb-1">
                  <div class="flex justify-between">
                    <div class="flex items-center">
                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                      <span class="text-grey-200 ml-1 text-sm">@ 11:42</span>
                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
                    </div>
                    <div class="space-x-2 text-sm flex items-center">
                      <button class="text-blue-300 flex items-center space-x-1">
                        <span class="font-bold">6</span>
                        <i class="ico--thumbs-up"></i>
                      </button>
                      <button class="text-red-600 flex items-center space-x-1">
                        <i class="ico--thumbs-down transform -scale-x-1"></i>
                        <span class="font-bold">2</span>
                      </button>
                    </div>
                  </div>
                </div>
                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
              </div>
            </div>
            <div class="flex items-start p-2 -ml-2">
              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
              <div class="flex-1 overflow-hidden">
                <div class="mb-1">
                  <div class="flex justify-between">
                    <div class="flex items-center">
                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                      <span class="text-grey-200 ml-1 text-sm">@ 11:40</span>
                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}}
                    </div>
                    <div class="space-x-2 text-sm flex items-center">
                      <button class="text-blue-300 flex items-center space-x-1">
                        <span class="font-bold">6</span>
                        <i class="ico--thumbs-up"></i>
                      </button>
                      <button class="text-red-600 flex items-center space-x-1">
                        <i class="ico--thumbs-down transform -scale-x-1"></i>
                        <span class="font-bold">2</span>
                      </button>
                    </div>
                  </div>
                </div>
                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
              </div>
            </div>
            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
              <div class="flex-1 overflow-hidden">
                <div class="mb-1">
                  <div class="flex justify-between">
                    <div class="flex items-center">
                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                      <span class="text-grey-200 ml-1 text-sm">@ 11:38</span>
                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Příspěvek")}}
                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                    </div>
                    <div class="space-x-2 text-sm flex items-center">
                      <button class="text-blue-300 flex items-center space-x-1">
                        <span class="font-bold">6</span>
                        <i class="ico--thumbs-up"></i>
                      </button>
                      <button class="text-red-600 flex items-center space-x-1">
                        <i class="ico--thumbs-down transform -scale-x-1"></i>
                        <span class="font-bold">2</span>
                      </button>
                    </div>
                  </div>
                </div>
                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
              </div>
            </div>
            <div class="flex items-start p-2 -ml-2 opacity-25 hover:opacity-100 transition-opacity duration-200">
              <img src="{{ img.avatar.src }}" class="w-12 h-12 rounded mr-3">
              <div class="flex-1 overflow-hidden">
                <div class="mb-1">
                  <div class="flex justify-between">
                    <div class="flex items-center">
                      <span class="font-bold">{{ person.first }} {{ person.last }}</span>
                      <span class="text-grey-200 text-sm ml-2">KS Pardubický kraj</span>
                      <span class="text-grey-200 ml-1 text-sm">@ 11:30</span>
                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Návrh postupu")}}
                      {{> molecules-chip(classes: "chip--grey-125 chip--condensed text-grey-300 ml-2", cta: "Archivovaný")}}
                    </div>
                    <div class="space-x-2 text-sm flex items-center">
                      <button class="text-blue-300 flex items-center space-x-1">
                        <span class="font-bold">6</span>
                        <i class="ico--thumbs-up"></i>
                      </button>
                      <button class="text-red-600 flex items-center space-x-1">
                        <i class="ico--thumbs-down transform -scale-x-1"></i>
                        <span class="font-bold">2</span>
                      </button>
                    </div>
                  </div>
                </div>
                <p class="text-black leading-normal">{{ excerpt.medium }}</p>
              </div>
            </div>
          </div>

          <div class="my-8 space-y-4">
            {{> molecules-textarea-field(nolabel: true) }}
            <div class="space-x-4">
              {{> atoms-basic-button(classes: "text-base btn--black btn--hoveractive", cta: "Přidat příspěvek") }}
              <span class="text-sm text-grey-200">Pro pokročilejší formátování můžete používat <a href="#" class="underline">Markdown</a>.</span>
            </div>
          </div>
        </section>
      </div>
      <div class="flex flex-col flex-1 overflow-hidden">
        <h2 class="head-alt-base mb-4 pt-1">Oznámení</h2>
        <div class="overflow-hidden flex flex-1">
          <div class="overflow-scroll h-full space-y-px">
            <div class="bg-yellow-100 p-3 border-orange-300 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:55</div>
                {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
              </div>
              <span class="leading-tight">{{ excerpt.short }}</span>
            </div>
            <div class="p-3 bg-yellow-100 border-green-300 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:52</div>
                {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
              </div>
              <span class="leading-tight">{{ excerpt.short }}</span>
            </div>
            <div class="bg-grey-50 p-3 border-blue-300 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:51</div>
                {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
              </div>
              <span class="leading-tight">{{ excerpt.short }}</span>
            </div>
            <div class="p-3 border-red-600 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:43</div>
                {{> molecules-chip(classes: "chip--red-600 chip--condensed font-bold text-xs", cta: "Rozhodující hlasování")}}
                <a href="#" class="ml-auto p-1 text-xs text-red-600 font-bold">Hlasovat v Heliosu &raquo;</a>
              </div>
              <span class="leading-tight mb-2">{{ excerpt.short }}</span>
            </div>
            <div class="bg-grey-50 p-3 border-cyan-500 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:35</div>
                {{> molecules-chip(classes: "chip--cyan-500 chip--condensed", cta: "Oznámení předsedajícího")}}
              </div>
              <span class="leading-tight">{{ excerpt.short }}</span>
            </div>
            <div class="p-3 border-orange-300 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:28</div>
                {{> molecules-chip(classes: "chip--orange-300 chip--condensed", cta: "Zamítnutý návrh postupu")}}
              </div>
              <span class="leading-tight">{{ excerpt.short }}</span>
            </div>
            <div class="bg-grey-50 p-3 border-green-300 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:20</div>
                {{> molecules-chip(classes: "chip--green-300 chip--condensed", cta: "Schválený návrh postupu")}}
              </div>
              <span class="leading-tight">{{ excerpt.short }}</span>
            </div>
            <div class="p-3 border-blue-300 border-l-4">
              <div class="flex items-center space-x-2 mb-2">
                <div class="font-bold text-sm">11:00</div>
                {{> molecules-chip(classes: "chip--blue-300 chip--condensed", cta: "Přijatelný návrh postupu")}}
              </div>
              <span class="leading-tight">{{ excerpt.short }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </article>
</div>