<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="/css/index.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>

  <body>
    <header>
      <div class="logo-con">
        <a href="/">
          <p>
            <span class="p">P</span>
            <span class="p-all">ool Quiz</span>
          </p>
        </a>
      </div>
      <div class="nav-links-con">
        <ul class="links">
          <li class="link"><a href="/browse">Browse </a></li>
          <li class="link"><a href="/add-question">Create Question </a></li>
          <li class="link"><a href="/api-setting">API </a></li>

          <% if (isAuthenticated) { %>
          <li class="link">
            <div class="dropdown text-end">
              <a
                href="#"
                class="d-block text-decoration-none dropdown-toggle"
                id="dropdownUser1"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <img
                  src="/assests/user.png"
                  alt="mdo"
                  width="28"
                  height="28"
                  class="rounded-circle"
                />
              </a>
              <ul
                class="dropdown-menu text-small"
                aria-labelledby="dropdownUser1"
                style=""
              >
                <li><a class="dropdown-item" href="/profile">Profile</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a class="dropdown-item" href="/logout">Sign out</a></li>
              </ul>
            </div>
          </li>
          <% }else { %>
          <li class="link"><a href="/login">Login</a></li>
          <% } %>
        </ul>
      </div>
    </header>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
