<!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">
    <title>{% block title %}{{ hackerspace_name }} Membership Manager{% endblock %}</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <style type="text/css">
body {
    padding-top: 20px;
    padding-bottom: 20px;
}
.navbar {
    margin-bottom: 20px;
}
    </style>
	{% block head %}
    {% endblock %}
  </head>
  <body>
      <div class="container">
          <nav class="navbar navbar-default">
              <div class="container-fluid">
                   <div class="navbar-header">
                       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                       </button>
                       <a class="navbar-brand" href="#">{{ hackerspace_name }} Membership Manager</a>
                   </div>
                   <div id="navbar" class="navbar-collapse collapse">
                       <ul class="nav navbar-nav navbar-right">
                           {% if session.username %}
                           <li><a href="/"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{ session.username }}</a></li>
                           <li><a href="/logout"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Log Out</a></li>
                           {% else %}
                           <li><a href="/"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Log In</a></li>
                           {% endif %}
                       </ul>
                   </div>
               </div>
          </nav>
          {% for category, message in get_flashed_messages(true) %}
          <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
          {% endfor %}
      {% block content %}
      {% endblock %}
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="/static/js/bootstrap.min.js"></script>
      {% block scripts %}{% endblock %}
  </body>
</html>
