<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <%= title %>
  </title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<style>
  .heading {
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-weight: bold;
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Roboto', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .date-button {
    background-color: #c2892d;
    color: #121111;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
  }

  .date-button:hover {
    opacity: 0.9;
  }

  .options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 3rem;
  }

  .navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem;
  }

  .navbar-brand img {
    height: 50px;
    max-height: 100%;
  }

  .form-control-dark {
    background-color: #f2f2f2;
    border-color: #ccc;
  }

  .nav-link {
    font-size: 0.9rem;
    color: #ffffff;
  }

  .nav-link:hover {
    opacity: 0.8;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200vh;
  }

  .card {
    border: none;
    background: linear-gradient(to bottom right, #89288f, #49185c);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 20px;

    padding: 2rem;
    margin-top: 2rem;
    transition: all 0.3s ease;
    color: white;
  }

  .card h4 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  @media (max-width: 768px) {
    .heading {
      font-size: 1.5rem;
    }

    .date-button {
      padding: 8px 16px;
      font-size: 1rem;
    }
  }

  .card p {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  }
</style>

<body>
  <div class="px-3 py-2 text-bg-dark border-bottom">
    <div class="container-1">
      <div class="d-flex flex-wrap align-items-center justify-content-between">
        <a href="https://iitdh.ac.in"
          class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
          <img src="https://election.iitdh.ac.in/static/media/logog.084b1a7a95f4bcd9fccd.png" alt="Logo" height="50px">
        </a>
        <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
          <li>
            <a href="/user_open" class="nav-link text-secondary">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-book" 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.811zm7.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.492zM8 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.783" />
              </svg>
              Home
            </a>
          </li>
          <li>
            <a href="/recommendations" class="nav-link text-white">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-speedometer2" viewBox="0 0 16 16">
                <path
                  d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z" />
                <path fill-rule="evenodd"
                  d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3" />
              </svg>
              Recommendations
            </a>
          </li>
          <li>
            <a href="/order" class="nav-link text-white">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
                <path
                  d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 10V9H1v3h14zm0 1H1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2zm0-5V5H1v3h14zm0-4V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14z" />
              </svg>
              Orders
            </a>
          </li>
          <li>
            <a href="/upcoming_reservation" class="nav-link text-white">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-grid" viewBox="0 0 16 16">
                <path
                  d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm0 1h12a1 1 0 0 1 1 1v2H1V4a1 1 0 0 1 1-1zm1 4h10v4H3V7zm-1 5h12a1 1 0 0 0 1-1v-2H1v2a1 1 0 0 0 1 1z" />
              </svg>
              Reservation
            </a>
          </li>
          <li>
            <a href="/profile" class="nav-link text-white">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
                <path fill-rule="evenodd"
                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />
              </svg>
              <%= Name %>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="card-body">
        <div class="row g-0">
          <div class="col-md-4">
            <img src="<%= photo_link %>" class="img-fluid rounded-start" alt="Book Cover" style="height: 70vh;">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h4 class="card-title" style="color: #000000; font-family: 'Times New Roman', Times, serif;">
                <%= title %>
              </h4>
              <h5 class="card-title" style="color: #ffffff; font-family: 'Times New Roman', Times, serif;">- <%= author
                  %>
              </h5><br />
              <h6 class="card-title" style="color: #000000;">Description</h6>
              <h6 class="card-text">
                <%= description %>
              </h6><br />

              <div style="display: flex;">
                <h6 class="card-title" style="color: #000000;">Department:</h6>
                <h6 class="card-text">&nbsp<%= department %>
                </h6>
              </div><br />
              <div style="display: flex;">
                <h6 class="card-title" style="color: #000000;">Genre:</h6>
                <h6 class="card-text">&nbsp<%= genre %>
                </h6>
              </div><br />
              <div style="display: flex;">
                <h6 class="card-title" style="color: #000000;">Available Books: </h6>
                <h6 class="card-text">&nbsp <%= count %>
                </h6>
              </div><br />
              <div style="display: flex;">
                <h6 class="card-title" style="color: #000000;">Vendor:</h6>
                <h6>&nbsp<%= vendor %>
                </h6>
              </div>
              <div style="display: flex;">
                <h6 class="card-title" style="color: #000000;">Vendor Id:</h6>
                <h6 class="card-text">&nbsp<%= vendor_id %>
                </h6>
              </div><br />
              <div style="display: flex;">
                <h6 class="card-title" style="color: #000000;">Publisher:</h6>
                <h6>&nbsp<%= publisher %>
                </h6>
              </div>
              <div style="display: flex;">
                <h6 class="card-title" style="color: #000000;">Publisher Id:</h6>
                <h6 class="card-text">&nbsp<%= publisher_id %>
                </h6>
              </div><br />
            </div>
          </div>
          <div class="col-md-4 container" style="display: flex; gap: 30px;">
            <form action="/page1" method="post">
              <% if(count>0){ %>
                <button name="button" value="borrow" class="date-button btn-success">Borrow</button>
                <input hidden name="title" value="<%= title %>">
                <% }else{ %>
                  <button name="button" value="queue" class="date-button btn-success btn-outline-light">Enter Queue</button>
                  <input hidden name="title" value="<%= title %>">
                  <div style="display: flex;">
                    <h6 style="color: #000000;">No. of people in queue:</h6>
                    <h6>&nbsp <%= queue %>
                    </h6>
                  </div>
                  <% } %>
            </form>
            <form action="/reservation" method="post">
              <button class="date-button btn-success">Reserve</button>
              <input hidden name="title" value="<%= title %>">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>