
<div id="navigation" class="d-flex flex-column flex-shrink-0">
  <a href="/login" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip"
  data-bs-placement="right" data-bs-original-title="{{ 'Logout' if authenticated else 'Login' }}">

    {% if branding %}
      <svg class="bi nav-logo">
        <use xlink:href="#{{ theme }}"></use>
      </svg>
    {% else %}
      <svg class="bi" width="28" height="28" style="margin-left: 2px">
        <use style="fill: #d34a5d" xlink:href="#learners-icon"></use>
      </svg>
    {% endif %}
  </a>

  {% if authenticated is sameas true %}

    <nav class="mb-auto">
      <ul class="nav flex-column text-center">

        {% if admin %}
          {% with href="/result/all", tooltip="Results", icon="icon_doc" %}
            {% include "partials/tab.html" %}
          {% endwith %}

          {% with href="/questionaire/all", tooltip="Questionaire", icon="icon_charts" %}
            {% include "partials/tab.html" %}
          {% endwith %}

          {% with href="/comments", tooltip="Comments", icon="icon_chat" %}
            {% include "partials/tab.html" %}
          {% endwith %}
        {% endif %}

        {% if url_documentation %}
          {% with href="/access#docs", tooltip="Documentation", icon="icon_doc" %}
            {% include "partials/tab.html" %}
          {% endwith %}
        {% endif %}

        {% if url_exercises %}
          {% with href="/access#exercises", tooltip="Exercises", icon="icon_play" %}
            {% include "partials/tab.html" %}
          {% endwith %}
        {% endif %}

        {% if url_presentations %}
          {% with href="/access#presentations", tooltip="Presentations", icon="icon_slides" %}
            {% include "partials/tab.html" %}
          {% endwith %}
        {% endif %}

        {% for site in staticsites %}
          {% with href="/access#"+site.id, tooltip=site.title, icon=site.icon %}
            {% include "partials/tab.html" %}
          {% endwith %}
        {% endfor %}

        {% if vnc_clients %}
          {% for vnc_client, client_info in vnc_clients.items() %}
            <li class="nav-item">
              <a href="/access#{{ vnc_client }}" class="nav-link py-3" data-bs-toggle="tooltip" data-bs-placement="right"
                data-bs-original-title="{{ client_info.tooltip }}">
                <svg class="bi" width="22" height="22" role="img">
                  <use xlink:href="#icon_vnc"></use>
                </svg>
                {% if vnc_clients | length > 1 %}
                  <div class="client_index">
                    <span>{{ loop.index }}</span>
                  </div>
                {% endif %}
              </a>
            </li>
          {% endfor %}
        {% endif %}

      </ul>
    </nav>
  {% endif %}


  {% if authenticated is sameas true %}
    <div class="nav-item">
      <a id="menu-newtab" class="nav-link py-3" data-bs-toggle="tooltip" data-bs-placement="right"
        data-bs-original-title="Open current view in new tab">
        <svg class="bi" width="24" height="24" role="img">
          <use xlink:href="#icon_newtab"></use>
        </svg>
      </a>
    </div>
  {% endif %}

  {% if chat %}
    <div class="nav-item">
      <span href="#" id="menu-chat" class="nav-link py-3" data-bs-toggle="tooltip" data-bs-placement="right"
        data-bs-original-title="Support Chat">
        <svg class="bi" width="21" height="21" role="img">
          <use xlink:href="#icon_chat"></use>
        </svg>
      </span>
    </div>
  {% endif %}

</div>
