<!DOCTYPE html>
<html>
  <head>
    <title>Tixdb</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand brand" href="/">Tix<i class='bar'>|</i><b>db</b></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="/">Home</a>
            </li>
            {{#if user}}
            <li class="nav-item">
              <a class="nav-link" href="/customers">Customers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/tickets">Tickets</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/inventory">Inventory</a>
            </li>
            {{/if}}
          </ul>
          <ul class="navbar-nav mr-right">
            {{#if user}}
            <li class='nav-item'>
              <a href="/users/logout" class="nav-link">Logout</a>
            </li>
            {{else}}
            <li class='nav-item'>
              <a href="/users/register" class="nav-link">Register</a>
            </li>
            <li class='nav-item'>
              <a href="/users/login" class="nav-link">Login</a>
            </li>
            {{/if}}
          </ul>
          <!-- <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form> -->
        </div>
      </nav>
    <div class="main">
      <div id='flash'>
        {{#each messages.success}}
        <div id='flashSuccess' class="flash alert alert-success" style='display:none'><span>{{this}}</span></div>
        {{/each}}
        {{#each messages.warning}}
        <div id='flashWarning' class="flash alert alert-warning" style='display:none'><span>{{this}}</span></div>
        {{/each}}
        {{#each messages.error}}
        <div id='flashError' class="flash alert alert-danger" style='display:none'><span>{{this}}</span></div>
        {{/each}}
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
      {{{body}}}
    </div>
    <script type="text/javascript">
      $('.flash').slideDown().delay(5000).slideUp()
    </script>
  </body>
</html>
