{%- extends "nav" -%}
{%- block card %}
      <!-- RADIAL MENU -->
      <div class="grid">
        <!-- top-left -->
        <!-- PEERS LINK AND ICON -->
        <a class="top-left" href="/scuttlebutt/peers" title="Scuttlebutt Peers">
          <div class="circle circle-small">
            <img class="icon-medium" src="/icons/users.svg">
          </div>
        </a>
        <!-- top-middle -->
        <!-- CURRENT USER LINK AND ICON -->
        <a class="top-middle" href="/scuttlebutt/profile" title="Profile">
          <div class="circle circle-small">
            <img class="icon-medium" src="/icons/user.svg">
          </div>
        </a>
        <!-- top-right -->
        <!-- MESSAGES LINK AND ICON -->
        <a class="top-right" href="/scuttlebutt/private" title="Private Messages">
          <div class="circle circle-small">
            <img class="icon-medium" src="/icons/envelope.svg">
          </div>
        </a>
        <!-- middle -->
        <a class="middle">
          <div class="circle circle-large"></div>
        </a>
        <!-- bottom-left -->
        <!-- SYSTEM STATUS LINK AND ICON -->
        {%- if standalone_mode == true -%}
        <a class="bottom-left" href="/status/scuttlebutt" title="Status">
        {% else -%}
        <a class="bottom-left" href="/status" title="Status">
        {%- endif -%}
          <div class="circle circle-small">
            <img class="icon-medium" src="/icons/heart-pulse.svg">
          </div>
        </a>
        <!-- bottom-middle -->
        <!-- PEACHCLOUD GUIDEBOOK LINK AND ICON -->
        <a class="bottom-middle" href="/help" title="Help Menu">
          <div class="circle circle-small">
            <img class="icon-medium" src="/icons/book.svg">
          </div>
        </a>
        <!-- bottom-right -->
        <!-- SYSTEM SETTINGS LINK AND ICON -->
        <a class="bottom-right" href="/settings" title="Settings Menu">
          <div class="circle circle-small">
            <img class="icon-medium" src="/icons/cog.svg">
          </div>
        </a>
      </div>
{%- endblock card %}