<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Klääs WebApp</title>
  
  <link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>

  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">Klaas</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <% if (session && ( session.role =='admin' || session.role =='user' )) { %>

            <li class="nav-item">
              <a class="nav-link" href="/profile">Profil</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/qr">QR-Code</a>
            </li>
            
            <% } else {%>
              <li class="nav-item">
                <a class="nav-link" href="/register">Registrieren</a>
              </li>
    
              <% } %>

               <li class="nav-item"></li>
              <a class="nav-link" href="/projects">Projekte</a>
            </li>
            <% if (session && session.role === 'admin') { %>
              <li class="nav-item"><a class="nav-link" href="/admin">Admin</a></li>
            <% } %>
        </ul>
        <% if (session && ( session.role =='admin' || session.role =='user' )) { %>
        <form class="d-flex" role="search" method="get" action="/logout">
          <button class="btn btn-outline-success" type="submit">Logout</button>
        </form>
        <% } else { %>
          <form class="d-flex" role="search" method="POST" action="/login">
                <input type="text" class="form-control" placeholder="username" name="username">
                <input type="password" class="form-control" placeholder="passwort" name="password">
            <button class="btn btn-outline-success" type="submit">Login</button>
          </form>
          <% } %>
      </div>
    </div>
  </nav>

  <div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
      <symbol id="check-circle-fill" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
      </symbol>
      <symbol id="info-fill" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
      </symbol>
      <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
      </symbol>
    </svg>
    
    <% if (session.message){ %>
    <% if (session && session.message[2] === 'success') { %>
      <div class="alert alert-success" role="alert">
      </svg> <%= session.message[0] %> - <%= session.message[1] %>
      </div>
        <% session.message[2] = 'none' %>
      <% } %>
      <% if (session && session.message[2] === 'error') { %>
        <div class="alert alert-danger" role="alert">
        </svg> <%= session.message[0] %> - <%= session.message[1] %>
        </div>
          <% session.message[2] = 'none' %>
        <% } %>
        <% } %>