<!DOCTYPE html>
<html lang="en">
<head>
  <title>Zines</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/static/output.css" rel="stylesheet">
</head>
<body>

<nav class="bg-gray-800">
  <div class="mx-auto max-w-7xl px-4 sm:px-8 lg:px-8">
    <div class="relative flex h-16 items-center justify-between">
      <div class="flex flex-1 items-center">
        <a href="/"><div class="flex-shrink-0 w-full h-full">
          <img class="h-8 w-auto" src="/static/img/logo-white.png" alt="Your Company">
        </div></a>
        <!--
        {{ if .loggedIn }}
        <div class="hidden sm:ml-6 sm:block">
          <div class="flex space-x-4">
            <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Logged In</a>
          </div>
        </div>
        {{ end }}
        -->
      </div>
      {{ if .isAdmin }}
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 px-4 sm:px-8">
        <a href="/additem" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Add Item</a>
        <a href="/batchupload" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300
          hover:bg-gray-700 hover:text-white">Batch Upload</a>
        <a href="/orders" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300
          hover:bg-gray-700 hover:text-white">Orders</a>
        <a href="/tags" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Tags</a>
        <a href="/invites" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Invites</a>
        <a href="/cart/print" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700
          hover:text-white">Print</a>
        <a href="/cart" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700
          hover:text-white">Cart</a>
        <a href="/config" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700
          hover:text-white">Config</a>
        <a href="/paper" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700
          hover:text-white">Paper</a>
        <a href="/invoice" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700
          hover:text-white">Invoices</a>
        <a href="/logout" class="rounded-md  bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-red-300 hover:bg-gray-700 hover:text-white">Logout</a>
      </div>
      {{ end }}
      {{ if .loggedIn }}
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 px-4 sm:px-8">
        <a href="/cart" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">&#128722; Cart</a>
      </div>
      {{ end }}
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <!--
  {{ if .loggedIn }}
  <div class="sm:hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2">
      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Logged In</a>
    </div>
  </div>
  {{ end }}
  -->
</nav>
