{%- extends "base" -%}
{%- block nav -%}
    <!-- Top nav bar -->
    <nav class="nav-bar">
      <a class="nav-item" href="{% if back %}{{ back }}{% endif %}" title="Back">
        <img class="icon-medium nav-icon-left icon-active" src="/icons/back.svg" alt="Back">
      </a>
      <h1 class="nav-title">{{ title }}</h1>
      <a class="nav-item" id="logoutButton" href="/logout" title="Logout">
        <img class="icon-medium nav-icon-right icon-active" src="/icons/enter.svg" alt="Enter">
      </a>
    </nav>
    <!-- Main content container -->
    <main>
      {%- block card -%}{%- endblock card %}
    </main>
    <!-- Bottom nav bar -->
    <nav class="nav-bar">
      <a class="nav-item" href="https://scuttlebutt.nz/">
        <img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="/icons/hermies.png" alt="Secure Scuttlebutt">
      </a>
      <a class="nav-item" href="/">
        <img class="icon nav-icon-left" src="/icons/peach-icon.png" alt="PeachCloud" title="Home">
      </a>
      <a class="nav-item" href="/help">
        <img class="icon-medium nav-icon-right icon-active" title="Help" src="/icons/question-circle.svg" alt="Question mark">
      </a>
    </nav>
{%- endblock nav -%}