forestserviceprototype/specialuseform/templates/specialuseform/includes/header.html
{% load static from staticfiles %}
<header class="usa-header usa-header-extended" role="banner">
<!-- Gov banner BEGIN -->
<div class="usa-banner">
<div class="usa-accordion">
<header class="usa-banner-header">
<div class="usa-grid usa-banner-inner">
<img src="{% static "img/favicons/favicon-57.png" %}" alt="U.S. flag">
<p>An official website of the United States government</p>
<button class="usa-accordion-button usa-banner-button"
aria-expanded="false" aria-controls="gov-banner">
<span class="usa-banner-button-text">Here's how you know</span>
</button>
</div>
</header>
<div class="usa-banner-content usa-grid usa-accordion-content" id="gov-banner">
<div class="usa-banner-guidance-gov usa-width-one-half">
<img class="usa-banner-icon usa-media_block-img" src="{% static "img/icon-dot-gov.svg" %}" alt="Dot gov">
<div class="usa-media_block-body">
<p>
<strong>The .gov means it’s official.</strong>
<br>
Federal government websites always use a .gov or .mil domain. Before sharing sensitive information online, make sure you’re on a .gov or .mil site by inspecting your browser’s address (or “location”) bar.
</p>
</div>
</div>
<div class="usa-banner-guidance-ssl usa-width-one-half">
<img class="usa-banner-icon usa-media_block-img" src="{% static "img/icon-https.svg" %}" alt="SSL">
<div class="usa-media_block-body">
<p>This site is also protected by an SSL (Secure Sockets Layer) certificate that’s been signed by the U.S. government. The <strong>https://</strong> means all transmitted data is encrypted — in other words, any information or browsing history that you provide is transmitted securely.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Gov banner END -->
<div class="usa-navbar">
<button class="usa-menu-btn">Menu</button>
<div class="usa-logo" id="logo">
<em class="usa-logo-text">
<a href="/" accesskey="1" title="Home" aria-label="Home">Forest Service <br>e-Permitting <span class="usa-label">beta</span></a>
</em>
</div>
</div>
<nav role="navigation" class="usa-nav">
<div class="usa-nav-inner">
<button class="usa-nav-close">
<img src="{% static "img/close.svg" %}" alt="close">
</button>
<ul class="usa-nav-primary usa-accordion">
<li>
<a class="usa-nav-link" href="#">
<span>Permits</span>
</a>
</li>
<li>
<a class="usa-nav-link" href="#">
<span>Something Else</span>
</a>
</li>
</ul>
<div class="usa-nav-secondary">
<form class="usa-search usa-search-small js-search-form">
<div role="search">
<label class="usa-sr-only" for="search-field-small">Search small</label>
<input id="search-field-small" type="search" name="search">
<button type="submit">
<span class="usa-sr-only">Search</span>
</button>
</div>
</form>
<ul class="usa-unstyled-list usa-nav-secondary-links">
<li class="js-search-button-container">
<button class="usa-header-search-button js-search-button">Search</button>
</li>
{% if user.id %}
<li>
<a href="#">{{ user.email }}</a>
</li>
<li>
<a href="{% url 'logout' %}">Log out</a>
</li>
{% else %}
<li>
<a href="{% url 'login' %}">Log in</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</header>