<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <title>Welcome to Kiwix Server</title>
  <script type="text/javascript" src="{{root}}/skin/jquery-ui/external/jquery/jquery.js"></script>
  <script type="text/javascript" src="{{root}}/skin/jquery-ui/jquery-ui.min.js"></script>
  <link type="text/css" href="{{root}}/skin/jquery-ui/jquery-ui.min.css" rel="Stylesheet" />
  <link type="text/css" href="{{root}}/skin/jquery-ui/jquery-ui.theme.min.css" rel="Stylesheet" />
  <style>
        body {
                background:
                radial-gradient(#EEEEEE 15%, transparent 16%) 0 0,
                radial-gradient(#EEEEEE 15%, transparent 16%) 8px 8px,
                radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
                radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
                background-color:#E8E8E8;
                background-size:16px 16px;
                margin-left: auto;
                margin-right: auto;
                max-width: 1100px;
        }
        .book__list { text-align: center; }
        .book {
                display: inline-block; vertical-align: bottom; margin: 8px; padding: 12px 15px; width: 300px;
                border: 1px solid #ccc; border-radius: 8px;
                text-align: left; color: #000; font-family: sans-serif; font-size: 13px;
                background-color:#F1F1F1;
                box-shadow: 2px 2px 5px 0px #ccc;
        }
        .book:hover { background-color: #F9F9F9; box-shadow: none;}
        .book__background { background-repeat: no-repeat; background-size: 48px 48px; background-position: top right; }
        .book__title {
                padding: 0 55px 0 0;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                font-size: 18px; color: #0645ad; line-height: 1em;
        }
        .book__description {
                padding: 5px 55px 5px 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                font-size: 15px; line-height: 1em;
        }
        .book__info { color: #777; font-weight: bold; font-size: 13px; line-height: 1em; }
  </style>
  <script type="text/javascript" src="{{root}}/skin/taskbar.js" async></script>
</head>
<body class="kiwix">

<div class="kiwix">
  <div class='book__list'>
    {{#books}}
    <a href="{{root}}/{{name}}"><div class='book'>
        <div class='book__background' style="background-image: url('{{root}}/meta?content={{#urlencoded}}{{{name}}}{{/urlencoded}}&name=favicon');">
          <div class='book__title' title='{{title}}'>{{title}}</div>
          <div class='book__description' title='{{description}}'>{{description}}</div>
          <div class='book__info'>{{articleCount}} articles, {{mediaCount}} medias</div>
        </div>
    </div></a>
    {{/books}}
  </div>
</div>

<div id="kiwixfooter">
  Powered by <a href="https://kiwix.org">Kiwix</a>
</div>

</body>
</html>
