<!DOCTYPE html>
<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>

  <div id="navbar-container" class="fixed w-screen z-50">
    <nav class="relative px-4 py-4 flex justify-between items-center bg-white shadow-md shadow-secondary">
      <a class="text-3xl font-bold leading-none" href="/yellow/">
        <svg class="h-10 text-primary" viewBox="0 0 761 284" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 50V49.9851C0.00805664 22.3777 22.3907 0 50 0H60.2869L132.733 72.4463L72.2513 132.928L0 60.6769V50ZM81.6519 142.329L72.2513 132.928L62.8508 142.329L0 79.478V205.18L62.8508 142.329L72.2513 151.729L0 223.981V234C0 261.614 22.3857 284 50 284H60.9443L132.733 212.211L142.134 221.612L79.7454 284H204.522L142.134 221.612L151.534 212.211L223.323 284H234C261.614 284 284 261.614 284 234V223.713L212.016 151.729L221.417 142.329L284 204.912V79.7455L221.417 142.329L212.016 132.928L284 60.9445V50C284 22.3857 261.614 0 234 0H223.981L151.534 72.4463L142.134 63.0458L205.18 0H79.088L142.134 63.0458L132.733 72.4463L142.134 81.8468L81.6519 142.329ZM142.134 202.811L132.733 212.211L72.2513 151.729L81.6519 142.329L142.134 202.811ZM202.616 142.329L212.016 151.729L151.534 212.211L142.134 202.811L202.616 142.329ZM202.616 142.329L142.134 81.8468L151.534 72.4463L212.016 132.928L202.616 142.329ZM388.509 186.701H332V82H343.302V176.979H388.509V186.701ZM401.115 186.701V111.915H412.417V186.701H401.115ZM412.417 82V95.3119H401.115V82H412.417ZM437.512 82H448.814V119.393C457.454 113.311 465.19 110.269 472.02 110.269C490.103 110.269 499.144 123.182 499.144 149.009C499.144 163.667 495.93 173.937 489.5 179.821C483.774 185.006 477.044 187.598 469.308 187.598C465.39 187.598 461.422 186.751 457.403 185.056C453.385 183.261 450.07 181.366 447.458 179.372L444.143 186.701H437.512V82ZM448.814 130.013V170.697C450.823 172.99 453.485 174.785 456.8 176.081C460.217 177.378 463.532 178.026 466.746 178.026C474.582 178.026 480.057 175.732 483.171 171.145C486.286 166.558 487.843 159.379 487.843 149.607C487.843 139.835 486.286 132.456 483.171 127.47C480.057 122.484 476.089 119.991 471.267 119.991C464.034 119.991 456.55 123.332 448.814 130.013ZM531.075 129.564V186.701H519.774V111.915H527.007L528.815 120.739C533.637 116.95 537.656 114.308 540.87 112.812C544.085 111.217 547.752 110.419 551.87 110.419C553.88 110.419 555.387 110.519 556.391 110.718L558.501 111.316L556.693 121.637C554.884 121.038 552.424 120.739 549.309 120.739C543.281 120.739 537.204 123.681 531.075 129.564ZM608.243 141.979H614.421C614.421 132.905 613.266 127.021 610.955 124.329C608.645 121.537 603.522 120.141 595.585 120.141C587.649 120.141 580.918 121.188 575.392 123.282L573.283 114.607C581.721 111.815 590.461 110.419 599.503 110.419C617.184 110.419 626.024 119.194 626.024 136.744V186.701H619.394L615.476 177.876C610.855 181.665 606.837 184.258 603.421 185.654C600.105 186.95 596.238 187.598 591.818 187.598C584.786 187.598 579.31 185.554 575.392 181.466C571.474 177.278 569.515 171.793 569.515 165.013C569.515 149.657 582.425 141.979 608.243 141.979ZM614.572 151.402H607.791C597.544 151.402 590.461 152.399 586.543 154.393C582.727 156.387 580.817 159.529 580.817 163.816C580.817 168.004 581.923 171.444 584.132 174.137C586.343 176.829 589.206 178.175 592.722 178.175C596.338 178.175 599.755 177.378 602.969 175.782C606.284 174.087 610.152 171.195 614.572 167.107V151.402ZM664.695 129.564V186.701H653.393V111.915H660.626L662.435 120.739C667.257 116.95 671.276 114.308 674.49 112.812C677.705 111.217 681.372 110.419 685.49 110.419C687.5 110.419 689.007 110.519 690.011 110.718L692.121 111.316L690.312 121.637C688.504 121.038 686.043 120.739 682.928 120.739C676.901 120.739 670.824 123.681 664.695 129.564ZM722.725 188.197L697.258 111.915H710.067L729.204 174.735L748.493 111.915H761L735.081 186.701C731.766 196.373 728.1 203.851 724.081 209.137C720.063 214.422 714.889 218.709 708.56 222L704.341 214.222C708.36 211.928 712.127 208.538 715.642 204.051C719.159 199.564 721.519 194.279 722.725 188.197Z" fill="currentColor" />
        </svg>
      </a>
      <div class="lg:hidden">
        <button class="navbar-burger flex items-center text-primary p-3">
          <svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
        <% const menuElements =[{name: 'Counter', link:'/yellow/counter'},{name: 'Readers', link:'/yellow/readers'},{name: 'Books', link:'/yellow/books'},{name: 'Configure', link:'/yellow/config'}] %>
        <% for( let index = 0; index < menuElements.length; index++ ) { %>
        <% if (locals.pageLocation == menuElements[index]['name']) { %>
        <li><a class="text-primary-focus font-bold" href="<%=menuElements[index]['link']%>"><%=menuElements[index]['name']%></a></li>
        <% } else { %>
        <li><a class=" text-gray-400 hover:text-gray-500" href="<%=menuElements[index]['link']%>"><%=menuElements[index]['name']%></a></li>
        <% } %>
        <% if ((index + 1) !== menuElements.length) { %>
        <li class="text-gray-300">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
          </svg>
        </li>
        <% } %>
        <% } %>
      </ul>
      <a class="hidden lg:inline-block py-2 px-3 bg-primary hover:bg-primary-focus text-sm uppercase text-primary-content font-bold rounded-lg transition duration-200" href="/users/logout">
        <div class="flex flex-row gap-2 items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z" />
            <path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z" />
          </svg>
          Log Out
        </div>
      </a>
    </nav>
  </div>
  <div class="navbar-menu relative z-50 hidden">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
    <nav class="fixed top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-8">
        <a class="mr-auto text-3xl font-bold leading-none" href="#">
          <svg class="h-9 text-primary" alt="logo" viewBox="0 0 284 284">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 49.9851C0 49.9901 0 49.995 0 50V60.6769L72.2513 132.928L62.8508 142.329L0 79.478V205.18L62.8508 142.329L72.2513 151.729L0 223.981V234C0 261.614 22.3858 284 50 284H60.9444L132.733 212.211L142.134 221.612L79.7454 284H204.522L142.134 221.612L151.534 212.211L223.323 284H234C261.614 284 284 261.614 284 234V223.713L212.016 151.729L221.417 142.329L284 204.912V79.7455L221.417 142.329L212.016 132.928L284 60.9444V50C284 22.3858 261.614 0 234 0H223.981L151.534 72.4463L142.134 63.0458L205.18 0H79.088L142.134 63.0458L132.733 72.4463L60.2869 0H50C22.3907 0 0.00806 22.3777 0 49.9851ZM142.134 81.8468L132.733 72.4463L72.2513 132.928L81.6518 142.329L72.2513 151.729L132.733 212.211L142.134 202.811L151.534 212.211L212.016 151.729L202.616 142.329L212.016 132.928L151.534 72.4463L142.134 81.8468ZM142.134 81.8468L202.616 142.329L142.134 202.811L81.6518 142.329L142.134 81.8468Z" fill="currentColor" />
          </svg>
        </a>
        <button class="navbar-close">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div>
        <ul>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-accent-content hover:text-primary-focus rounded" href="/yellow">Dashboard</a>
          </li>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-accent-content hover:text-primary-focus rounded" href="/yellow/counter">Counter</a>
          </li>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-accent-content hover:text-primary-focus rounded" href="/yellow/readers">Readers</a>
          </li>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-accent-content hover:text-primary-focus rounded" href="/yellow/books">Books</a>
          </li>
          <li class="mb-1">
            <a class="block p-4 text-sm font-semibold text-gray-400 hover:bg-accent-content hover:text-primary-focus rounded" href="/yellow/config">Configure</a>
          </li>
        </ul>
      </div>
      <div class="mt-auto">
        <div class="pt-6">

          <a class="block px-4 py-3 mb-2 leading-loose text-xs text-center text-primary-content font-semibold bg-primary hover:bg-primary-focus  rounded-sm" href="/users/logout">Log Out</a>
        </div>
      </div>
    </nav>
  </div>
</body>

<script>
  // Burger menus
  document.addEventListener('DOMContentLoaded', function() {
    // open
    const burger = document.querySelectorAll('.navbar-burger');
    const menu = document.querySelectorAll('.navbar-menu');

    if (burger.length && menu.length) {
      for (var i = 0; i < burger.length; i++) {
        burger[i].addEventListener('click', function() {
          for (var j = 0; j < menu.length; j++) {
            menu[j].classList.toggle('hidden');
          }
        });
      }
    }

    // close
    const close = document.querySelectorAll('.navbar-close');
    const backdrop = document.querySelectorAll('.navbar-backdrop');

    if (close.length) {
      for (var i = 0; i < close.length; i++) {
        close[i].addEventListener('click', function() {
          for (var j = 0; j < menu.length; j++) {
            menu[j].classList.toggle('hidden');
          }
        });
      }
    }

    if (backdrop.length) {
      for (var i = 0; i < backdrop.length; i++) {
        backdrop[i].addEventListener('click', function() {
          for (var j = 0; j < menu.length; j++) {
            menu[j].classList.toggle('hidden');
          }
        });
      }
    }
  });
</script>

</body>

</html>