<!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.0" />
  <title>Pizzroni</title>
  <link rel="stylesheet" href="/css/app.css" />
  <link rel="shortcut icon" href="/img/others/pizza.png" type="image/x-icon" />
</head>

<body>
  <div class="container">
    <nav class="navbar">
      <a href=""><img src="/img/others/Pizzroni Logo.png" alt="" width="150px" class="logo" /></a>
      <a href="" class="Home" style="color: #ffff">Home</a>
      <a href="/offers" class="Offers" style="color: #ffff">Offers</a>
      <% if(user) { %>
        <a href="/customer/orders" class="Orders" style="color: #ffff">Orders</a>
        <form id="logout" action="/logout" method="POST" class="Login">
          <a onclick="document.getElementById('logout').submit()" href="#" style="color: #ffff" class="Login">Logout</a>
        </form>
        <% } else { %>
          <a href="/register" class="Orders" style="color: #ffff">Register</a>
          <a href="/login" class="Login" style="color: #ffff">Login</a>
          <% } %>
            <div class="cart">
              <a href="/cart"><img src="/img/others/cart_1.png" width="25px" alt="" /></a>
            </div>
    </nav>

    <div class="heading">
      <h1>Get your Pizza<br />Now!</h1>
    </div>
    <p class="sub-heading">Hot And Tasty Pizza In Minutes</p>
    <div class="film"></div>
    <div class="blur-film"></div>
  </div>
  <button onclick="document.location='#menu'" type="button" class="CTA">
    ORDER NOW!
  </button>
  <div class="icons">
    <a class="FB" href=""><img src="/img/icons/facebook.png" alt="" width="25px" /></a>
    <a class="YT" href=""><img src="/img/icons/youtube.png" alt="" width="25px" /></a>
    <a class="TW" href=""><img src="/img/icons/twitter.png" alt="" width="25px" /></a>
  </div>

  <h1 class="Menu-Heading">Menu</h1>

  <section class="Menu" id="menu">
    <%pizzas.forEach(function(pizza){ %>
      <div class="card-container card-1">
        <div class="card">
          <img src="/img/menu/<%= pizza.image %>" alt="pizza" class="card-img" />
        </div>
        <div class="card-details">
          <p id="item-tittle">
            <%= pizza.name %>
          </p>
          <select name="size" id="pizza-size" title="size">
            <option value="small" title="Small">S</option>
            <option value="medium" title="Medium">M</option>
            <option value="large" title="Large">L</option>
          </select>
          <div class="card-base">
            <span id="price">â‚¹<%= pizza.price %></span>
            <button data-pizza="<%= JSON.stringify(pizza) %>" type="button" class="add-to-cart">
              <span>Add</span>
            </button>
          </div>
        </div>
      </div>
      <% }) %>
        <button type="submit" title="go to cart" onclick="location.href = '/cart';" class="total-cart">
          <span class="cart-counter">
            <%= session.cart ? session.cart.totalQty: '0' %>
          </span>
          <img src="img/others/cart_1.png" alt="" width="18" />
        </button>
  </section>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="../js/app.js"></script>
</html>