<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script
                                                                                                                                                                                            src="https://code.jquery.com/jquery-3.3.1.min.js"
                                                                                                                                                                                            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                                                                                                                                                                                            crossorigin="anonymous"></script>

    <script>
      function searchTable() {
        var input, filter, table, tr, td, i, j, txtValue, found;
        input = document.getElementById("search-box");
        filter = input.value.toUpperCase();
        table = document.getElementById("search-table");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
          found = false; 
          td = tr[i].getElementsByClassName("search-item");
          for (j = 0; j < td.length; j++) {
            if (td[j]) {
              txtValue = td[j].textContent || td[j].innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                found = true;
                break;
              }
            }
          }
          if (td.length > 0) {
            if(found) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }
        }
      }
    </script>
    <title>{{title}}</title>
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Wedding Administration</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
        {{#if user}}
          <a class="nav-item nav-link" href="{{path}}/admin/">Summary</a>
          <a class="nav-item nav-link" href="{{path}}/admin/guests">Guests</a>
          <a class="nav-item nav-link" href="{{path}}/admin/households">Households</a>
          <a class="nav-item nav-link" href="{{path}}/admin/mealoptions">Meal Options</a>
          <a class="nav-item nav-link" href="{{path}}/admin/message">Message</a>
        {{/if}}
        </div>
      </div>
      {{#if user}}
      <span><a href="/logout"><button type="submit" class="btn btn-outline-danger navbar-btn login-btn">Log Out</button></a></span>
      {{else}}
      <span><a href="/auth/github"><button type="submit" class="btn btn-outline-success navbar-btn login-btn">Log In</button></a></span>
      {{/if}}
    </nav>

    <div class="container">

      {{{ body }}}

      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>
</html>
