<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;1,400;1,800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" type="text/css" href="/css/style.min.css" />
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png" />
    <title>Camp Explorers | Your Camping Helper</title>
  </head>
  <body>
    <nav class="navbar">
      <a class="navbar__logo-box" href="/">
        <img src="/img/logo.png" class="navbar__img" />
      </a>
      <input
        type="checkbox"
        name="navbarCheckbox"
        id="navbar__checkbox"
        class="navbar__checkbox"
      />
      <label class="navbar__toggle" for="navbar__checkbox">
        <span class="navbar__icon"></span>
      </label>
      <ul class="navbar__nav">
        <li class="navbar__item">
          <a href="/" class="navbar__link">Home</a>
        </li>
        <li class="navbar__item">
          <a href="/#about" class="navbar__link">About</a>
        </li>
        <li class="navbar__item">
          <a href="/#campgrounds" class="navbar__link">Campground</a>
        </li>
        <% if(!currentUser){ %>
        <li class="navbar__item">
          <a href="/login" class="navbar__link">Login</a>
        </li>
        <li class="navbar__item">
          <a href="/register" class="navbar__link">Register</a>
        </li>
        <% } else { %>
        <li class="navbar__item">
          <a href="#" class="navbar__link">
            Signed in as <%= currentUser.username %></a
          >
        </li>
        <li class="navbar__item">
          <a href="/logout" class="navbar__link">Logout</a>
        </li>
        <% } %>
      </ul>
    </nav>
    <div class="alert">
      <% if(error && error.length>0){ %>
      <div class="alert__danger"><%= error %></div>
      <% } %> <% if(success && success.length>0){ %>
      <div class="alert__success"><%= success %></div>
      <% } %>
    </div>
  </body>
</html>
