<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Library</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link
      href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&display=swap"
      as="style"
      rel="stylesheet preload prefetch"
    />
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript">
      window.addEventListener("DOMContentLoaded", init);
    </script>
    <script
      defer
      data-domain="library.yetaga.in"
      src="https://stats.yetaga.in/js/script.js"
    ></script>
    <meta name="description" content="A personal library record." />
  </head>
  <body>
    <div class="wrapper">
      <div id="header">
        <h1>Library</h1>
        <a href="/records">records</a>
        <a
          target="_blank"
          rel="noreferrer"
          href="https://git.yetaga.in/alazyreader/library"
          >git</a
        >
        <a href="#" id="addBook" class="hidden">add book</a>
        <div id="searchBox">
          <label for="childrens" class="bookCount"
            >Include Childrens Books?</label
          >
          <input id="childrens" type="checkbox" name="childrens" />
          <span id="bookCount" class="bookCount">_ books</span>
          <input
            id="search"
            type="text"
            name="search"
            placeholder="Search..."
          />
        </div>
      </div>
      <div id="current">No Book Selected</div>
      <div id="books"></div>
      <!-- Table goes here -->
    </div>
  </body>
</html>