<!DOCTYPE html>
<html>

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

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

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

</header>

<body>
  <div id="wrapper" class="mx-6 my-6">
    <div class="mb-8">
      <div class="uppercase">Counter</div>
      <div class="text-4xl font-semibold">Management</div>
    </div>
    <div id="opaque-title-1" class="mb-4">
      <div class="text-4xl md:text-5xl font-semibold text-secondary">All Actions</div>
    </div>
    <div id="action-container-1" class="w-full grid grid-cols-1 lg:grid-cols-12 items-center mb-6 h-full">
      <div id="chevron-1" class="overflow-visible hidden lg:block">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 3 18 18" stroke-width="1.5" class="stroke-gray-300 h-72 aspect-square bi bi-caret-right-fill">
          <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>
      <div class="lg:col-span-11 h-fit">
        <div class="grid grid-cols-2 auto-rows-fr md:grid-cols-none md:grid-rows-2 md:grid-flow-col w-fit gap-3 items-center">
          <div onclick="window.location.href='/yellow/counter/loans/new'" class="h-full cursor-pointer p-3 lg:w-64 bg-white rounded-lg border border-gray-200 shadow-md">
            <svg class="mb-2 w-12 h-12 p-1 text-gray-500 border rounded" 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>
            <h5 class="mb-2 text-xl md:text-2xl font-semibold tracking-tight text-base-800">New Loan</h5>
          </div>
          <div onclick="window.location.href='/yellow/counter/loans/onloan'" class="h-full cursor-pointer p-3 lg:w-64 bg-white rounded-lg border border-gray-200 shadow-md">
            <svg class="mb-2 w-12 h-12 p-1 text-gray-500 border rounded" 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>
            <h5 class="mb-2 text-xl md:text-2xl font-semibold tracking-tight text-base-800">Return & Prolong</h5>
          </div>
          <!-- <div class="h-full cursor-pointer p-3 lg:w-64 bg-white rounded-lg border border-gray-200 shadow-md">
            <svg class="mb-2 w-12 h-12 p-1 text-gray-500 border rounded" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" 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>
            <h5 class="mb-2 text-xl md:text-2xl font-semibold tracking-tight text-base-800">New Order</h5>
          </div> -->
          <div onclick="window.location.href='/yellow/readers/add/'" class="h-full cursor-pointer p-3 lg:w-64 bg-white rounded-lg border border-gray-200 shadow-md">
            <svg class="mb-2 w-12 h-12 p-1 text-gray-500 border rounded" 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>
            <h5 class="mb-2 text-xl md:text-2xl font-semibold tracking-tight text-base-800">Register New Reader</h5>
          </div>
          <div onclick="window.location.href='/yellow/books/add/'" class="h-full cursor-pointer p-3 lg:w-64 bg-white rounded-lg border border-gray-200 shadow-md">
            <svg class="mb-2 w-12 h-12 p-1 text-gray-500 border rounded" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" 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>
            <h5 class="mb-2 text-xl md:text-2xl font-semibold tracking-tight text-base-800">Register New Book</h5>
          </div>
        </div>
      </div>
    </div>
    <div id="opaque-title-2" class="mb-4">
      <div class="text-4xl md:text-5xl font-semibold text-secondary">Review</div>
    </div>
    <div id="action-container-2" class="w-full grid grid-cols-1 lg:grid-cols-12 items-center mb-6 h-full">
      <div id="chevron-2" class="overflow-visible hidden lg:block">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 3 18 18" stroke-width="1.5" class="stroke-gray-300 h-72 aspect-square bi bi-caret-right-fill">
          <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>
      <div class=" lg:col-span-11 h-fit">
        <div class="grid grid-cols-2 w-full gap-3 items-center h-full">
          <div onclick="window.location.href='/yellow/counter/loans/'" class="h-full cursor-pointer p-3 md:w-64 bg-white rounded-lg border border-gray-200 shadow-md">
            <svg class="mb-2 w-12 h-12 p-1 text-gray-500 border rounded" 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>
            <h5 class="mb-2 text-xl md:text-2xl font-semibold tracking-tight text-base-800">All Loans</h5>
          </div>
          <!-- <div class="cursor-pointer p-3 w-64 h-fit bg-white rounded-lg border border-gray-200 shadow-md">
            <svg class="mb-2 w-12 h-12 p-1 text-gray-500 border rounded" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4zm2-1a1 1 0 0 0-1 1v10.566l3.723-2.482a.5.5 0 0 1 .554 0L11 14.566V4a1 1 0 0 0-1-1H4z" />
              <path d="M4.268 1H12a1 1 0 0 1 1 1v11.768l.223.148A.5.5 0 0 0 14 13.5V2a2 2 0 0 0-2-2H6a2 2 0 0 0-1.732 1z" />
            </svg>
            <h5 class="mb-2 text-2xl font-semibold tracking-tight text-base-800">All Orders</h5>
          </div> -->



        </div>
      </div>
    </div>





</body>

</html>