<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link type="root" href="{{root}}">
    <title>Welcome to Kiwix Server</title>
    <link
      type="text/css"
      href="{{root}}/skin/index.css?KIWIXCACHEID"
      rel="Stylesheet"
    />
    <link
      rel="alternate"
      type="application/atom+xml"
      title="Library OPDS Feed"
      id="headFeedLink"
      href="{{root}}/catalog/v2/entries"
    />
    <link rel="apple-touch-icon" sizes="180x180" href="{{root}}/skin/favicon/apple-touch-icon.png?KIWIXCACHEID">
    <link rel="icon" type="image/png" sizes="32x32" href="{{root}}/skin/favicon/favicon-32x32.png?KIWIXCACHEID">
    <link rel="icon" type="image/png" sizes="16x16" href="{{root}}/skin/favicon/favicon-16x16.png?KIWIXCACHEID">
    <link rel="manifest" href="{{root}}/skin/favicon/site.webmanifest?KIWIXCACHEID">
    <link rel="mask-icon" href="{{root}}/skin/favicon/safari-pinned-tab.svg?KIWIXCACHEID" color="#5bbad5">
    <link rel="shortcut icon" href="{{root}}/skin/favicon/favicon.ico?KIWIXCACHEID">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="{{root}}/skin/favicon/browserconfig.xml?KIWIXCACHEID">
    <meta name="theme-color" content="#ffffff">
    <style>
      @font-face {
        font-family: "poppins";
        src: url("{{root}}/skin/fonts/Poppins.ttf?KIWIXCACHEID") format("truetype");
      }

      @font-face {
          font-family: "roboto";
          src: url("{{root}}/skin/fonts/Roboto.ttf?KIWIXCACHEID") format("truetype");
      }
    </style>
    <script type="module" src="{{root}}/skin/i18n.js?KIWIXCACHEID" defer></script>
    <script type="text/javascript" src="{{root}}/skin/languages.js?KIWIXCACHEID" defer></script>
    <script src="{{root}}/skin/isotope.pkgd.min.js?KIWIXCACHEID" defer></script>
    <script src="{{root}}/skin/iso6391To3.js?KIWIXCACHEID"></script>
    <script type="text/javascript" src="{{root}}/skin/index.js?KIWIXCACHEID" defer></script>
  </head>
  <body>
    <noscript>
      <style>
        .kiwixNav, .kiwixHomeBody, #feedLink, .kiwixfooter {
          display: none;
        }
        html, body {
          height: 100%;
        }
        .noScriptLinkContainer {
          position: absolute;
          top: 50%;
          left: 50%;
          -moz-transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
          font-size: 16px;
          font-family: roboto;
        }
      </style>
      <div class="noScriptLinkContainer">
        <span id="noScriptLinkText">This page cannot be accessed if JavaScript is not enabled. Please head over to <a href="{{root}}/nojs">nojs endpoint.</a></span>
      </div>
    </noscript>
    <div class='kiwixNav'>
      <a href="{{root}}/catalog/v2/entries" id="feedLink">
        <img src="{{root}}/skin/feed.svg?KIWIXCACHEID"
             class="feedLogo"
             id="feedLogo"
             alt="Library OPDS Feed"
             aria-label="Library OPDS Feed"
             title="Library OPDS Feed">
      </a>
      <a onclick="window.modalUILanguageSelector.show()"
         alt="Select UI language"
         aria-label="Select UI language"
         title="Select UI language">
        <img src="{{root}}/skin/langSelector.svg?KIWIXCACHEID"
             id="uiLanguageSelectorButton">
      </a>
      <div class="kiwixNav__filters">
        <div class="kiwixNav__select">
          <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>
            <option value="" selected>All languages</option>
          </select>
        </div>
        <div class="kiwixNav__select">
          <select name="category" id="categoryFilter" class='kiwixNav__kiwixFilter filter'>
            <option value="" selected>All categories</option>
          </select>
        </div>
      </div>
      <form id='kiwixSearchForm' class='kiwixNav__SearchForm'>
        <input type="text" name="q" placeholder="Search" id="searchFilter" class='kiwixSearch filter'>
        <span class="kiwixButton tagFilterLabel"></span>
        <input type="submit" class="kiwixButton kiwixButtonHover" id="searchButton" value="Search"/>
      </form>
    </div>
    <div class="kiwixHomeBody">
      <div class="book__list">
        <h3 class="kiwixHomeBody__results"></h3>
      </div>
      <div id="fadeOut" class="fadeOut"></div>
    </div>
    <div class="loader" style="position: absolute; top: 50%"><div class="loader-spinner"></div></div>
    <div id="kiwixfooter" class="kiwixfooter">Powered by&nbsp;<a href="https://kiwix.org">Kiwix</a></div>
  </body>
  <script>
    function closeModal() {
      for(modal of document.getElementsByClassName('modal-wrapper')) {
        if ( modal.id == "uiLanguageSelector" ) {
          window.modalUILanguageSelector.close();
        } else {
          modal.remove();
        }
      }
    }
  </script>
</html>
