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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Responsive Bootstrap 4 Magazine/Blog Theme">
  <meta name="author" content="Bootlab">
  <link href="/css/bootstrap.css" rel="stylesheet">
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23ffffff%22></rect><path d=%22M44.15 38.82L44.15 38.82Q44.15 42.13 42.50 44.71Q40.85 47.30 37.25 48.80L37.25 48.80Q41.60 50.22 43.74 53.15Q45.88 56.08 45.88 59.97L45.88 59.97Q45.88 67.02 40.81 70.36Q35.75 73.70 26.30 73.70L26.30 73.70Q23.38 73.70 20.11 73.40Q16.85 73.10 14.07 72.27L14.07 72.27Q10.63 71.30 10.63 68.30L10.63 68.30L10.63 30.80Q10.63 29.52 11.34 28.81Q12.05 28.10 13.32 27.73L13.32 27.73Q15.88 26.90 18.99 26.60Q22.10 26.30 25.70 26.30L25.70 26.30Q34.48 26.30 39.31 29.38Q44.15 32.45 44.15 38.82ZM37.70 59.75L37.70 59.75Q37.70 56.30 35.15 54.31Q32.60 52.33 27.80 52.33L27.80 52.33L18.50 52.33L18.50 66.58Q20.07 66.95 22.25 67.14Q24.43 67.33 26.60 67.33L26.60 67.33Q31.93 67.33 34.81 65.49Q37.70 63.65 37.70 59.75ZM18.50 33.20L18.50 46.25L27.43 46.25Q31.70 46.25 33.88 44.38Q36.05 42.50 36.05 39.27L36.05 39.27Q36.05 32.67 25.70 32.67L25.70 32.67Q23.53 32.67 21.73 32.82Q19.93 32.98 18.50 33.20L18.50 33.20ZM70.70 57.13L64.03 57.13L64.03 72.65Q63.42 72.88 62.45 73.06Q61.47 73.25 60.27 73.25L60.27 73.25Q57.95 73.25 56.94 72.39Q55.92 71.52 55.92 69.50L55.92 69.50L55.92 30.80Q55.92 29.52 56.64 28.81Q57.35 28.10 58.63 27.73L58.63 27.73Q60.95 26.90 64.17 26.60Q67.40 26.30 70.25 26.30L70.25 26.30Q80 26.30 84.69 30.42Q89.38 34.55 89.38 41.60L89.38 41.60Q89.38 48.65 84.69 52.89Q80 57.13 70.70 57.13L70.70 57.13ZM63.95 50.60L70.17 50.60Q75.35 50.60 78.31 48.35Q81.28 46.10 81.28 41.60L81.28 41.60Q81.28 37.10 78.46 35Q75.65 32.90 70.40 32.90L70.40 32.90Q68.67 32.90 66.99 33.05Q65.30 33.20 63.95 33.42L63.95 33.42L63.95 50.60Z%22 fill=%22%235c22ca%22></path></svg>" />
  <title><%= title %></title>

  <!-- <link href="css/app.css" rel="stylesheet"> -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap" rel="stylesheet">

  <!-- font for nav-link -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap" rel="stylesheet">

  <!-- font for the card title -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">

  <!-- font for card text -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300&display=swap" rel="stylesheet">

  <!-- font for card meta -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">

  <!-- font for category tags -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap" rel="stylesheet">

  <!-- font for footer text -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4&display=swap" rel="stylesheet">

  <!-- font for titles in Search Result Page -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Crete+Round&display=swap" rel="stylesheet">

</head>

<body>

  <header>
    <nav class="navbar navbar-expand-md navbar-light bg-white absolute-top">
      <div class="container">

        <button class="navbar-toggler order-2 order-md-1" type="button" data-bs-toggle="collapse"
          data-bs-target=".navbar-collapse" aria-controls="navbar-left navbar-right" aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse order-3 order-md-2 inline-container" id="navbar-left">
          <ul class="navbar-nav me-auto">
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-header" href="/searchBook">Write a Review</a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-header" href="/sourceCode">Source Code</a>
            </li>

          </ul>
        </div>

        <a class="booksandpurple mx-auto order-1 order-md-3 inline-container" href="/"><span class="theBooks">BOOKS &
          </span><span class="thePurple">PURPLE</span></a>

        <div class="collapse navbar-collapse order-4 order-md-4 inline-container" id="navbar-right">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link border-right nav-link-header" href="/login"><%= login %></a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-header" href="/signup"><%= signup %></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>