{{ define "main" }}
<section class="section container-fluid mt-n3 pb-3">
  <div class="row justify-content-center">
    <div class="col-lg-12 text-center">
      <h1><img src="invidious-colored-vector.svg" width="192" height="192" alt="Invidious logo"></h1>
      <h1 class="mt-0">{{ .Title }}</h1>
    </div>
    <div class="col-lg-9 col-xl-8 text-center">
      <p class="lead">{{ .Params.lead | safeHTML }}</p>
      <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ "https://instances.invidious.io/" | relURL }}" role="button">Use Invidious</a>
      <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ "https://docs.invidious.io/Installation.md" | relURL }}" role="button">Host Invidious</a>
      <p class="meta">Invidious is <a href="https://github.com/iv-org/invidious">Free (Libre) and Open Source software</a> licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL-3.0</a>.</p>
      <h5 class="mt-0">Chat with us:</h5>
        <a href="https://matrix.to/#/#invidious:matrix.org"><img alt="Matrix" src="https://img.shields.io/matrix/invidious:matrix.org?label=Matrix&color=darkgreen"></a>
        <a href="https://web.libera.chat/?channel=#invidious"><img alt="Libera.chat (IRC)" src="https://img.shields.io/badge/IRC%20%28Libera.chat%29-%23invidious-darkgreen"></a>
      <br/> <br/>
    </div>
  </div>
</section>
{{ end }}

{{ define "sidebar-prefooter" }}
<hr>
<section class="section section-sm">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-lg-5">
        <img src="undraw_privacy_protection_nlwy.svg" alt="Visual illustration from undraw" height=250 width=350/>
        <h2 class="h4">Privacy focused</h2>
        <p>Invidious protects you from the prying eyes of Google. It won't track you either!</p>
      </div>
      <div class="col-lg-5">
        <img src="undraw_design_inspiration_fmjm.svg" alt="Visual illustration from undraw" height=250 width=350/>
        <h2 class="h4">Ethically designed</h2>
        <p>Invidious helps you regain focus through a humane-design — no more shall your day be wasted away!</p>
      </div>
      <div class="col-lg-5">
        <img src="undraw_subscriptions_re_k7jj.svg" alt="Visual illustration from undraw" height=250 width=350/>
        <h2 class="h4">Accounts</h2>
        <p>Invidious allows you to subscribe to channels and create playlists, without needing a YouTube account.</p>
      </div>
    </div>
  </div>

  <br/> <br/>

  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-lg-5">
        <img src="undraw_Around_the_world_re_n353.svg" alt="Visual illustration from undraw" height=250 width=350/>
        <h2 class="h4">Multilingual</h2>
        <p>Thanks to our <a href="https://hosted.weblate.org/engage/invidious/">translators</a>, Invidious is available in many different languages.</p>
      </div>
      <div class="col-lg-5">
        <img src="undraw_Placeholders_re_pvr4.svg" alt="Visual illustration from undraw"  height=250 width=350/>
        <h2 class="h4">No Ads</h2>
        <p>Invidious allows you to watch videos without being disturbed by annoying ads. Also 100% supported by <a href="https://sponsor.ajay.app/">Sponsorblock</a></p>
      </div>
      <div class="col-lg-5">
        <img src="undraw_Coding_re_iv62.svg" alt="Visual illustration from undraw" height=250 width=350/>
        <h2 class="h4">Developer API</h2>
        <p>Invidious has a <a href="https://docs.invidious.io/API.md">fully featured and documented REST API</a> for developers.</p>
      </div>
    </div>
  </div>
</section>
{{ end }}

{{ define "sidebar-footer" }}
<section class="section section-sm container-fluid">
  <div class="row justify-content-center text-center">
    <div class="col-lg-9">
      {{- .Content -}}
    </div>
  </div>
</section>
{{ end }}