templates/layout.html

<!doctype html>
<html>
  <head>
    <title>AddressIQ</title>
    {% assets filters="pyscss", output="gen/main.css", "main.scss" %}
      <link href="{{ ASSET_URL }}" rel='stylesheet' type='text/css'>
    {% endassets %}
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"><!-- suppress IE compatibility mode so Persona doesn't break -->
    <script src="https://login.persona.org/include.js" type="text/javascript"></script>
    <!-- Pulled from http://code.google.com/p/html5shiv/ -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript">
      var currentUser = {{email|tojson|safe}};
      var csrfToken = "{{ csrf_token() }}";
    </script>
  </head>
  <body>
      <header>
        <div class="container">
          <div>
            {% set navigation_bar = [
                ('/browse', 'browse', 'Browse All')
            ] -%}
            {% set active_page = active_page|default('') -%}
            <a href="/" id="logo"><span>AddressIQ</span></a>
            <ul id="navigation">
              {% for href, id, caption in navigation_bar %}
              <li{% if id == active_page %} class="active"{% endif %}>
                  <a href="{{ href|e }}">{{ caption|e }}</a>
              </li>
              {% endfor %}
            </ul>
          </div>
          <div id="user-nav">
            {% if current_user.is_authenticated() %}
              <div class="user-pic">
              </div>
              <div class="username">
                {{ current_user.name }}
              </div>
            {% endif %}
            <div class="signon">
              <form>
                {% if current_user.is_authenticated() %}
                  <a href="#" id="logout">Log out</a>
                {% else %}
                  <a href="#" id="login">Log in</a>
                {% endif %}
              </form>
            </div>
          </div>
        </div>
      </header>
      <div class="container">
        <div class="search-area">
          <form action="/search" method="GET">
          <input name="q" type="text" id="address-search-box" placeholder="Search for address..." value="{{search_query}}"></input>
          </form>
        </div>
        <div class="page-content">
          {% block body %}

          {% endblock %}
        </div>
      </div>
      <footer>
        <div class="container">
          <div class="copyright">
            <a href="http://www.codeforamerica.org/governments/longbeach/#2014">&copy; 2014 Code for America</a>
          </div>
          <div class="contact">
            <span>Questions?</span> Contact <a href="mailto:longbeach@codeforamerica.org">longbeach@codeforamerica.org</a>
          </div>
        </div>
      </footer>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="/static/main.js"></script>

  <script type="text/javascript">
    // From https://github.com/codeforamerica/bizarro-cms/blob/0d2e3cea116e054eb1e2ebbd2787175fa6c09923/bizarro/templates/index.html#L73
    var loginLink = document.getElementById('login');
    if (loginLink) {
      loginLink.onclick = function() { navigator.id.request(); return false; }    }
    var logoutLink = document.getElementById('logout');
    if (logoutLink) {
      logoutLink.onclick = function() { navigator.id.logout(); return false; };
    }
  </script>

  </body>
</html>