<!DOCTYPE html>
<html>

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

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

<!-- <script>
  const search = (directory) => {
    let searchQuery = document.getElementById('search-input-bar').value
    const searchFunction = async (urlString, bodyElement) => {
      console.log(urlString, bodyElement)
      try {
        await fetch(urlString, {
          method: "POST",
          redirect: "manual",
          body: JSON.stringify({
            bodyElement: searchQuery,
          }),
          headers: {
            "Content-Type": "application/json"
          }
        }).then((res) => window.location.href = res.url)
      } catch (err) {
        console.log(err)
      }
    }
    if (directory == 'readers') {
      searchFunction('/yellow/readers/search', 'searchInput')
    }
    if (directory == 'books') {
      searchFunction('/yellow/books/search', 'searchInput')
    }
  }
</script> -->

<header>
  <%- include('./yellowtoolbar.ejs', {pageLocation: 'Dashboard'}) %>

</header>

<body>
  <div id="wrapper" class="mx-6 my-6">
    <div class="mb-4">
      <div class="uppercase">Home</div>
      <div class="text-4xl font-semibold">Dashboard</div>
    </div>

    <div class="w-full p-5 rounded-xl bg-base-200 bg-opacity-25 flex flex-col justify-center items-center">
      <div class="grid grid-cols-1 md:grid-cols-6 xl:auto-rows-fr min-h-[70vh] w-full max-w-screen-2xl gap-4">
        <div id="welcome-card" class="col-span-1 md:col-span-6 xl:col-span-1 rounded-lg shadow-lg shadow-gray-200 bg-secondary-focus bg-opacity-40 p-5 overflow-hidden">
          <div class="flex flex-col justify-between h-full">
            <div class="text-4xl 2xl:text-5xl font-extrabold border-t-[1rem] border-primary py-3 text-primary">
              <% let today = new Date() %>
              <div class="font-light text-4xl 2xl:text-4xl">
                <%= today.toLocaleDateString(undefined, { weekday: 'long'}) %>
              </div>
              <%= today.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) %>
            </div>
            <div class="self-center text-center">
              <a href="/users/logout" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 mr-2" 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
              </a>
            </div>
            <div class="hidden xl:block h-48 w-full text-primary-focus opacity-20 -m-10 -z-10">
              <svg class="text-inherit inline h-full" viewBox="0 0 284 284" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <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>
            </div>
          </div>
        </div>
        <div id="counter-quickactions-card" class="col-span-1 md:col-span-3 xl:col-span-3 rounded-lg shadow-lg shadow-gray-200 bg-secondary-focus bg-opacity-20 overflow-hidden">
          <div class="flex h-full flex-col justify-between">
            <div class="p-4 lg:p-8 h-full pb-0">
              <div class="grid grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
                <a href="/yellow/counter/loans/new" class="cursor-pointer active:animate-ping bg-primary bg-opacity-30 min-h-16 rounded-md p-2 border border-secondary text-secondary-content ">
                  <svg class="mb-2 h-10 md:h-12 p-1 border-b-4 border-primary-focus text-primary-focus" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z" />
                    <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z" />
                  </svg>
                  <div class="text-sm md:text-xl font-medium">New Loan</div>
                </a>
                <a href="/yellow/counter/loans/onloan" class="cursor-pointer active:animate-ping bg-primary bg-opacity-30 min-h-16 rounded-md p-2 border border-secondary text-secondary-content">
                  <svg class="mb-2 h-10 md:h-12 p-1 border-b-4 border-primary-focus text-primary-focus" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.598 5.013a.144.144 0 0 1 .202.134V6.3a.5.5 0 0 0 .5.5c.667 0 2.013.005 3.3.822.984.624 1.99 1.76 2.595 3.876-1.02-.983-2.185-1.516-3.205-1.799a8.74 8.74 0 0 0-1.921-.306 7.404 7.404 0 0 0-.798.008h-.013l-.005.001h-.001L7.3 9.9l-.05-.498a.5.5 0 0 0-.45.498v1.153c0 .108-.11.176-.202.134L2.614 8.254a.503.503 0 0 0-.042-.028.147.147 0 0 1 0-.252.499.499 0 0 0 .042-.028l3.984-2.933zM7.8 10.386c.068 0 .143.003.223.006.434.02 1.034.086 1.7.271 1.326.368 2.896 1.202 3.94 3.08a.5.5 0 0 0 .933-.305c-.464-3.71-1.886-5.662-3.46-6.66-1.245-.79-2.527-.942-3.336-.971v-.66a1.144 1.144 0 0 0-1.767-.96l-3.994 2.94a1.147 1.147 0 0 0 0 1.946l3.994 2.94a1.144 1.144 0 0 0 1.767-.96v-.667z" />
                  </svg>
                  <div class="text-sm md:text-xl font-medium">Return & Prolong</div>
                </a>
                <a href="/yellow/books/add" class="cursor-pointer active:animate-ping bg-primary bg-opacity-30 min-h-16 rounded-md p-2 border border-secondary text-secondary-content">
                  <svg class="mb-2 h-10 md:h-12 p-1 border-b-4 border-primary-focus text-primary-focus" aria-hidden="true" fill="currentColor" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z" />
                    <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" />
                  </svg>
                  <div class="text-sm md:text-xl font-medium">Register Book</div>
                </a>
                <a href="/yellow/readers/add" class="cursor-pointer active:animate-ping bg-primary bg-opacity-30 min-h-16 rounded-md p-2 border border-secondary text-secondary-content">
                  <svg class="mb-2 h-10 md:h-12 p-1 border-b-4 border-primary-focus text-primary-focus" aria-hidden="true" fill="currentColor" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                    <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z" />
                  </svg>
                  <div class="text-sm md:text-xl font-medium">Register Reader</div>
                </a>
                <!-- <a class="cursor-pointer active:animate-ping bg-primary bg-opacity-30 min-h-16 rounded-md p-2 border border-secondary text-secondary-content">
                  <svg class="mb-2 h-12 p-1 border-b-4 border-primary-focus text-primary-focus" aria-hidden="true" fill="currentColor" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
                    <path d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4z" />
                  </svg>
                  <div class="text-xl font-medium">New Order</div>
                </a> -->
              </div>
            </div>
            <div class="h-min -ml-5 mt-4 flex opacity-50">
              <svg xmlns="http://www.w3.org/2000/svg" class=" self-end stroke-primary h-12 md:h-20 aspect-square" fill="none" viewBox="4 3 18 18" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
              </svg>
              <div class="self-end text-2xl md:text-4xl text-primary">Counter <span class="font-thin">Quick Actions</span></div>
            </div>
          </div>
        </div>
        <div id="loans-mostrecent-card" class="col-span-1 md:col-span-3 xl:col-span-2 rounded-lg shadow-lg shadow-gray-200 bg-secondary-focus bg-opacity-20 overflow-hidden">
          <div class="flex h-full flex-col justify-between">
            <div class="p-4 md:p-8 pb-0">
              <% if (loansMostRecentOutput == null) { %>
              <div class="flex flex-col items-center h-full justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-20 md:w-48 text-primary opacity-50" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M3.112 5.112a3.125 3.125 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11L3.112 5.112zm11.372 7.372L4.937 2.937A5.512 5.512 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711zm-.838 1.87-12-12 .708-.708 12 12-.707.707z" />
                </svg>
                <div class="text-2xl text-primary opacity-70">Failed fetching your data.</div>
              </div>
              <% } %>
              <% if (loansMostRecentOutput != null && loansMostRecentOutput.length == 0) { %>
              <div class="flex flex-col items-center h-full justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-20 md:w-48 text-primary opacity-50" viewBox="0 0 16 16">
                  <path d="M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4H4.98zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374l3.7-4.625z" />
                </svg>
                <div class="text-2xl text-primary opacity-70">No loans on the record.</div>
              </div>
              <% } %>
              <% if (loansMostRecentOutput != null && loansMostRecentOutput.length > 0) { %>
              <div>
                <div class="flex gap-4 mb-1">
                  <div class="w-7 lg:w-9"><svg xmlns="http://www.w3.org/2000/svg" class="aspect-square w-full text-primary" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M9 7a1 1 0 0 1 1-1h5v2h-5a1 1 0 0 1-1-1zM1 9h4a1 1 0 0 1 0 2H1V9z" />
                      <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                    </svg></div>
                  <div>
                    <div class="sm:text-xl font-semibold text-primary-focus">
                      Issued <%= loansMostRecentOutput[0].dateIssued.toLocaleString(undefined, {day:'numeric', month:'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric'}) %>
                    </div>
                    <div>
                      Return Due <%= loansMostRecentOutput[0].dateToReturn.toLocaleDateString() %>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="flex gap-4 mb-1">
                  <div class="w-7 lg:w-9"><svg xmlns="http://www.w3.org/2000/svg" class="aspect-square w-full text-primary" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                      <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z" />
                    </svg></div>
                  <div>
                    <div class="sm:text-xl font-semibold text-primary-focus">
                      <%= loansMostRecentOutput[0].reader.firstName %> <%= loansMostRecentOutput[0].reader.surName %>
                    </div>
                    <div>
                      <%= loansMostRecentOutput[0].reader.emailAddress %>
                    </div>
                    <div>
                      <%= loansMostRecentOutput[0].reader.phoneNumber %>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div class="flex gap-4 mb-2">
                  <div class="w-7 lg:w-9"><svg xmlns="http://www.w3.org/2000/svg" class="aspect-square w-full text-primary" fill="currentColor" viewBox="0 0 16 16">
                      <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                    </svg></div>
                  <div>
                    <div class="sm:text-xl font-semibold text-primary-focus">
                      <%= loansMostRecentOutput[0].book.title %>
                    </div>
                    <div>
                      Authored by <%= loansMostRecentOutput[0].book.author %>
                    </div>
                    <div>
                      Copy ID <%= loansMostRecentOutput[0].collectionCopy[0].copyIDNumber %>
                    </div>
                  </div>
                </div>
                <div class="form-control flex-row gap-1 justify-end items-center w-full">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-7 text-primary opacity-70 mr-2" viewBox="0 0 16 16">
                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                  </svg>
                  <a href="/yellow/books/view/<%=loansMostRecentOutput[0].book._id%>" class="btn btn-xs md:btn-sm btn-primary">Book</a>
                  <a href="/yellow/readers/view/<%=loansMostRecentOutput[0].reader._id%>" class="btn btn-xs md:btn-sm btn-primary">Reader</a>
                </div>
              </div>
              <% } %>
            </div>
            <div class="h-min -ml-7 flex opacity-50">
              <svg class="self-end fill-primary h-12 md:h-20 aspect-square" aria-hidden="true" fill="currentColor" viewBox="2 0 16 13" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z" />
              </svg>
              <div class="self-end text-2xl md:text-4xl text-primary">Loans <span class="font-thin">Most Recent</span></div>
            </div>
          </div>
        </div>
        <div id="loans-overdue-card" class="col-span-1 md:col-span-3 min-h-[300px] rounded-lg shadow-lg shadow-gray-200 bg-secondary-focus bg-opacity-20 overflow-hidden">
          <div class="flex h-full flex-col justify-between">
            <div class="p-4 md:p-8 h-full pb-0">
              <% if (loansOverdueOutput == null) { %>
              <div class="flex flex-col items-center h-full justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-20 md:w-48 text-primary opacity-50" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M3.112 5.112a3.125 3.125 0 0 0-.17.613C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13H11L3.112 5.112zm11.372 7.372L4.937 2.937A5.512 5.512 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773a3.2 3.2 0 0 1-1.516 2.711zm-.838 1.87-12-12 .708-.708 12 12-.707.707z" />
                </svg>
                <div class="text-2xl text-primary opacity-70">Failed fetching your data.</div>
              </div>
              <% } %>
              <% if (loansOverdueOutput != null && loansOverdueOutput.length == 0) { %>
              <div class="flex flex-col items-center h-full justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-20 md:w-48 text-primary opacity-50" viewBox="0 0 16 16">
                  <path d="M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4H4.98zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374l3.7-4.625z" />
                </svg>
                <div class="text-2xl text-primary opacity-70">No overdue loans.</div>
              </div>
              <% } %>
              <% if (loansOverdueOutput != null && loansOverdueOutput.length > 0) { %>
              <div class="form-control flex-row gap-2 justify-end items-center w-full mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-7 text-primary opacity-70 mr-2" viewBox="0 0 16 16">
                  <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                  <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                </svg>
                <a href="/yellow/counter/loans" class="btn btn-xs md:btn-sm btn-primary">All Loans</a>
                <a href="/yellow/counter/loans/overdue" class="btn btn-xs md:btn-sm btn-primary">Overdue</a>
              </div>
              <div class="w-full h-full max-h-full relative overflow-scroll">
                <div class="w-full h-full max-h-full absolute">
                  <!-- here goes the table -->
                  <div class="overflow-x-auto border border-secondary rounded-lg">
                    <table class="table w-full table-compact rounded-lg">
                      <!-- head -->
                      <thead>
                        <tr class="bg-secondary border-0">
                          <th class="bg-secondary border-0">Reader</th>
                          <th class="bg-secondary border-0">Book & Copy</th>
                          <th class="bg-secondary border-0">Return Due</th>
                          <th class="bg-secondary border-0">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <% for( let index = 0; index < loansOverdueOutput.length; index++ ) { %>
                        <tr>
                          <th> <%=loansOverdueOutput[index].reader.firstName %> <%=loansOverdueOutput[index].reader.surName %> </th>
                          <td>
                            <div>
                              <%=loansOverdueOutput[index].book.title %>
                            </div>
                            <div class="text-xs">
                              Book ID <%=loansOverdueOutput[index].book.bookIDNumber %>
                            </div>
                            <div class="text-xs">
                              Copy ID <%=loansOverdueOutput[index].collectionCopy[0].copyIDNumber %>
                            </div>
                          </td>
                          <td><%=loansOverdueOutput[index].dateToReturn.toLocaleDateString() %></td>
                          <td>
                            <div class="form-control flex-row gap-1 items-center">
                              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-6 text-primary opacity-70 mr-1" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 5 7h2.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM3 11.5A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z" />
                              </svg>
                              <a href="/yellow/readers/view/<%=loansOverdueOutput[index].reader._id%>" class="btn btn-primary btn-xs">Reader</a>
                              <a href="/yellow/books/view/<%=loansOverdueOutput[index].book._id%>" class="btn btn-primary btn-xs">Book</a>
                              <div class="w-2"></div>
                              <a href="/yellow/counter/loans/prolong/<%=loansOverdueOutput[index]._id%>" class="btn btn-secondary btn-xs">Prolong</a>
                            </div>
                          </td>
                        </tr>
                        <% } %>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <% } %>
            </div>
            <div class="h-min -ml-7 flex opacity-50">
              <svg class="self-end fill-primary h-12 md:h-20 aspect-square" aria-hidden="true" fill="currentColor" viewBox="2 0 16 13" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z" />
              </svg>
              <div class="self-end text-2xl md:text-4xl text-primary">Loans <span class="font-thin">Overdue</span></div>
            </div>
          </div>
        </div>
        <div id="search-records-card" class="col-span-1 md:col-span-3 rounded-lg shadow-lg shadow-gray-200 bg-secondary-focus bg-opacity-20 overflow-hidden">
          <div class="flex h-full flex-col">
            <div class="p-4 md:p-8 h-full pb-0">
              <form action="" method="post">
                <input name="searchInput" class="input input-bordered input-md md:input-lg bg-opacity-70 w-full text-center" />
                <div class="form-control flex-col flex-initial lg:flex-row gap-2 py-8 w-full flex-grow justify-center items-center text-2xl">
                  <button type="submit" formaction="/yellow/readers/search" class="btn btn-secondary btn-sm text-base lg:btn-sm xl:btn-lg xl:text-xl items-center">
                    <svg class="h-3/5 xl:h-2/5 mr-2 text-inherit inline" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                      <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z" />
                    </svg>
                    <span>In Readers</span>
                  </button>
                  <button type="submit" formaction="/yellow/books/search" class="btn btn-secondary btn-sm text-base lg:btn-sm xl:btn-lg xl:text-xl items-center">
                    <svg class="h-3/5 xl:h-2/5 mr-2 text-inherit inline" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                    </svg>
                    <span>In Books</span>
                  </button>
                  <button type="submit" formaction="/yellow/counter/loans/search" class="btn btn-secondary btn-sm text-base lg:btn-sm xl:btn-lg xl:text-xl items-center">
                    <svg class="h-3/5 xl:h-2/5 mr-2 text-inherit inline" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                      <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z" />
                    </svg>
                    <span>In Loans</span>
                  </button>
                </div>
              </form>
            </div>
            <div class="h-min -ml-7 flex opacity-50">
              <svg class="self-end fill-primary h-12 md:h-20 aspect-square" aria-hidden="true" fill="currentColor" viewBox="0.5 -2 16 12" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
              </svg>
              <div class="self-end text-2xl md:text-4xl text-primary">Search <span class="font-thin">Records</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>





</body>

</html>