<footer class="footer bg-grey-700 text-white __js-root">
  <ui-app inline-template>
    <div>
      <div class="footer__main py-4 lg:py-16 container container--default">
        <section class="footer__brand">
          <img
            src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
            alt=""
            class="w-32 md:w-40 pb-6"
          />
          <p class="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
            Piráti, 2020. Všechna práva vyhlazena. Sdílejte a nechte
            ostatní sdílet za stejných podmínek.
          </p>
        </section>
        <section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
          <div class="pt-8 pb-4 lg:py-0">
            <ui-footer-collapsible label="Nová sekce">
              <ul class="mt-6 space-y-2 text-grey-200">
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
              </ul>
            </ui-footer-collapsible>
          </div>
          <div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
            <ui-footer-collapsible label="Nová sekce">
              <ul class="mt-6 space-y-2 text-grey-200">
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
              </ul>
            </ui-footer-collapsible>
          </div>
          <div class="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
            <ui-footer-collapsible label="Nová sekce">
              <ul class="mt-6 space-y-2 text-grey-200">
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
                <li>
                  <a href="#">Lorem ipsum</a>
                </li>
              </ul>
            </ui-footer-collapsible>
          </div>
        </section>
        <section class="footer__social lg:text-right">
          <div class="mb-4">
            {{> molecules-basic-social-icon-group(classes: "text-white pb-4") }}
            {{> atoms-basic-contact-line(icon: "ico--envelope", caption: "Dejte nám vědět") }}
          </div>
          <div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
            {{> atoms-icon-button(cta: "Přispěj", icon: "ico--pig", classes: "btn--cyan-200 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
            {{> atoms-icon-button(cta: "Naloď se", icon: "ico--anchor", classes: "btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
          </div>
        </section>
      </div>
      <section class="footer__sub-links lg:border-t border-grey-400">
        <div class="container container--default">
          <ui-footer-collapsible label="Otevřenost" labelClass="lg:w-1/4" wrapperClass="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0" slotWrapperclass="lg:w-2/4">
            <ul class="lg:w-full lg:pr-8 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200">
              <li class="w-full">
                <a href="#">Transparentní účet</a>
              </li>
              <li class="w-full">
                <a href="#">Registr smluv</a>
              </li>
              <li class="w-full">
                <a href="#">Otevřené účetnictví</a>
              </li>
            </ul>
          </ui-footer-collapsible>
        </div>
      </section>
      <section class="bg-black py-4 lg:py-12">
        <div class="container container--default">
          <div class="footer-contacts flex flex-col lg:flex-row lg:items-center space-y-4 lg:space-y-0 lg:space-x-4">
            {{> molecules-condensed-badge(hideOccupation: true, classes: "w-full") }}
            {{> molecules-condensed-badge(hideOccupation: true, classes: "w-full") }}
            {{> molecules-condensed-badge(hideOccupation: true, classes: "w-full") }}
            <div class="lg:mt-4 xl:mt-0 lg:text-center xl:text-right">
              {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--to-grey-125") }}
            </div>
          </div>
        </div>
      </section>
    </div>
  </ui-app>
</footer>
