{% if roles.logged-in %}
<div class="be-site-header">
    <button type="button"
	    id="be-site-side-menu-toggle"
	    onclick="toggleSiteSideMenu()">
	<img alt="Site Side Menu"
	     src="/images/icons/site-side-menu.png">
	Menu
    </button>

    <div class="be-user-info">
	<p><span>Logged in as: </span>{{user.username}}</p>
    </div>
</div>
{% endif %}

{% if roles.logged-in %}
<div class="be-site-side-menu" id="be-site-side-menu">
    <div>
	<div>
	    <a class="be-gui-link" href="/dashboard">
		<img alt="Dashboard"
		     src="/images/icons/dashboard.png">
		Dashboard
	    </a>

	    <a class="be-gui-link" href="/storage/manage">
		<img alt="Dashboard"
		     src="/images/icons/index.png">
		Storage
	    </a>
	</div>
	<div>
	    <h2>Archive</h2>
	    <a class="be-gui-link" href="/create/archive-entry">
		<img alt="New Page"
		     src="/images/icons/add-circle.png">
		Create Entry
	    </a>
	    <a class="be-gui-link" href="/user/archive">
		<img alt="New Page"
		     src="/images/icons/index.png">
		Archive Index
	    </a>
	</div>
	<div>
	    <h2>Pages</h2>
	    <a class="be-gui-link" href="/create/page">
		<img alt="New Page"
		     src="/images/icons/add-circle.png">
		Add Page
	    </a>
	    <a class="be-gui-link" href="/user/pages">
		<img alt="New Page"
		     src="/images/icons/index.png">
		Pages Index
	    </a>
	</div>
    </div>
    <div>
	<h2>Accounts and Settings</h2>
	<a class="be-gui-link" href="/user/edit">
	    <img alt="Edit Profile"
		 src="/images/icons/profile.png">
	    My Account Details
	</a>
	{% if roles.administrator %}
	<a class="be-gui-link" href="/users">
	    <img alt="Manage Accounts"
		 src="/images/icons/all-accounts.png">
	    Manage Accounts
	</a>
	<a class="be-gui-link" href="/site-settings">
	    <img alt="Site Settings"
		 src="/images/icons/settings.png">
	    Site Settings
	</a>
	{% endif %}
    </div>
    <div>
	<form action="/logout"
	      method="post">
	    <input required type="hidden"
		   name="AUTHENTICITY-TOKEN"
		   value="{{token}}">
	    <button class="be-gui-button"
		    type="submit">
		<img alt="Log Out"
		     src="/images/icons/logout.png">
		Log Out
	    </button>
	</form>
    </div>
</div>
{% endif %}

<div id="fe-main">
    {% if alert %}
    <div class="be-alert-container"
	 id="be-alert-container">
	{{alert | safe}}
	<button class="be-gui-button-no-text"
		       title="Click to close alert message"
		       type="button"
		       id="be-close-alert"
		       onclick="closeAlert()">
	    <img alt="Close alert"
		 src="/images/icons/cross-circle.png">
	</button>
    </div>
    {% endif %}

    <div class="fe-site-header">
	{% ifequal system-data.first.enable-site-logo 1 %}
	<img alt="{{system-data.first.site-name}}"
	     src="/images/site-logo.png">
	{% endifequal %}
	<h1>{{system-data.first.site-name}}</h1>
    </div>

    <div>
	<nav>
	    {% for page in system-data.last.first %}
	    {% ifequal page.enable-nav-menu 1 %}
	    {% if page.slug == "login" %}
	    <a href="/{{page.slug}}">{{page.title}}</a>
	    {% elif page.slug == "home" %}
	    <a href="/">{{page.title}}</a>
	    {% elif page.slug == "archive" %}
	    <a href="/{{page.slug}}">{{page.title}}</a>
	    {% elif page.slug == "pages" %}
	    <a href="/{{page.slug}}">{{page.title}}</a>
	    {% elif page.slug == "sign-up" %}
	    <a href="/{{page.slug}}">{{page.title}}</a>
	    {% else %}
	    <a href="/view/page/{{page.slug}}">{{page.title}}</a>
	    {% endif %}
	    {% endifequal %}
	    {% endfor %}
	</nav>
    </div>
    <hr>