{# Extend the upstream JupyterHub template #}
{# See: https://jupyterhub.readthedocs.io/en/latest/howto/templates.html#extending-templates #}
{% extends "templates/page.html" %}

{% block title %}
  Swan
{% endblock %}

{% block favicon %}
  <link rel="shortcut icon" type="image/x-icon" href="{{ static_url('swan/logos/favicon.ico') }}">
{% endblock favicon %}

{% block stylesheet %}
  {{ super() }}
  <link rel="stylesheet" href="{{ static_url('swan/css/style.css') }}" type="text/css"/>
{% endblock stylesheet %}

{% block logo %}
  <span id="jupyterhub-logo" class="navbar-brand">
    <a href="{{ logo_url or base_url }}">
      <img src="{{ base_url }}logo" alt="SWAN logo" class="jpy-logo" title="Home" />
    </a>
  </span>
{% endblock logo %}

{% block nav_bar_left_items %}
  <li class="nav-item">
    <a class="btn swan-nav-link" href="{{ base_url }}home">Home</a>
  </li>
  <li class="nav-item">
    <a class="btn swan-nav-link" href="{{ base_url }}token">Token</a>
  </li>
  {% if 'admin-ui' in parsed_scopes %}
    <li class="nav-item">
      <a class="btn swan-nav-link" href="{{ base_url }}admin">Admin</a>
    </li>
  {% endif %}
{% endblock nav_bar_left_items %}

{% block theme_toggle %}
  <button class="btn btn-sm me-3"
          id="dark-theme-toggle"
          aria-label="Toggle dark mode"
          title="Toggle dark mode">
    <i aria-hidden="true" class="fa fa-moon"></i>
    <i aria-hidden="true" class="fa fa-sun"></i>
  </button>
{% endblock theme_toggle %}

{% block login_widget %}
  <span id="login_widget">
    {% if user %}
      <span class="me-1">{{ user.name }}</span>
      <a id="logout"
          role="button"
          class="btn swan-nav-link"
          href="{{ logout_url }}"><i aria-hidden="true" class="fa fa-sign-out me-1"></i>Logout</a>
    {% else %}
      <a id="login"
          role="button"
          class="btn swan-nav-link"
          href="{{ login_url }}">Login</a>
    {% endif %}
  </span>
{% endblock login_widget %}

{% block footer %}
  <footer>
    <div class="pt-2 pt-md-5"></div>
    <div class="container-fluid py-4 px-3 py-md-2">
      <div class="row align-items-center text-center row-gap-3">
        <div class="col-12 col-md-3 order-2 order-md-0 text-md-start">
          {{ render_copyright() }}
        </div>
        <div class="col-12 col-md-6 order-1 order-md-0">
          {{ render_help_links() }}
        </div>
        <div class="col-12 col-md-3 order-3 order-md-0 text-md-end">
          {{ render_logo() }}
        </div>
      </div>
    </div>
  </footer>
{% endblock footer %}

{% macro render_copyright() %}
  <span class="text-body-secondary small">SWAN | Copyright &copy; {{ current_year }} CERN</span>
{% endmacro %}

{% macro render_logo() %}
  <img src="{{ static_url('swan/logos/logo_cern.svg') }}" alt="CERN logo">
{% endmacro %}

{% macro render_help_links() %}
  <div class="d-flex flex-wrap justify-content-center gap-3">
    <a href="https://cern.ch/swan/"
       class="text-decoration-none link-secondary small">
      <i class="fa fa-home me-1"></i>Home
    </a>
    <a href="https://swan-community.web.cern.ch/"
       class="text-decoration-none link-secondary small">
      <i class="fa fa-users me-1"></i>Community
    </a>
    <a href="https://cern.service-now.com/service-portal/?id=functional_element&name=swan"
       class="text-decoration-none link-secondary small">
      <i class="fa fa-life-ring me-1"></i>Support
    </a>
    <a href="https://github.com/swan-cern"
       class="text-decoration-none link-secondary small d-flex align-items-center">
      {{ render_github_logo() -}}
      GitHub
    </a>
    <a href="https://cern.service-now.com/service-portal?id=privacy_policy&se=SWAN-Service&notice=swan"
       class="text-decoration-none link-secondary small">
      <i class="fa fa-shield-halved me-1"></i>Privacy
    </a>
  </div>
{% endmacro %}

{# The github logo is only avaiable in the fa-brands pack,
   which is not included in JupyterHub #}
{% macro render_github_logo() %}
  <svg xmlns="http://www.w3.org/2000/svg"
       width="14"
       height="14"
       fill="currentColor"
       viewBox="0 0 16 16"
       class="me-1">
    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
  </svg>
{%- endmacro %}