{#
SPDX-License-Identifier: CC0-1.0

Proxy web UI base page template.

This file is part of Hydrilla&Haketilo.

Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org>

Available under the terms of Creative Commons Zero v1.0 Universal.
#}
{% extends "base.html.jinja" %}

{% block head %}
  {{ super() }}
  <link rel="icon" type="image/x-icon" href="static/haketilo-favicon.ico">
  <title>
    {% block title %}
      {{ _('base.title.haketilo') }}
    {% endblock %}
  </title>
  <meta http-equiv="Content-Security-Policy"
        content="script-src 'none'; default-src 'self'">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
{% endblock head %}

{% block style %}
  {{ super() }}

  .nav-container {
      display: block;
      padding: 20px 10px;
  }

  nav {
      display: inline-flex;
      flex-direction: column;
      padding: 0;
      margin: auto;
      min-height: calc(100vh - 40px);
      justify-content: space-evenly;
  }

  nav > a {
      margin: 0;
  }

  .navigation-dots {
      display: none;
      padding: 20px 10px;
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0.75;
  }

  .navigation-dots img {
      width: 10px;
      height: auto;
  }

  body {
      width: 100%;
  }

  .subpage {
      width: calc(100% - 20px);
      overflow: hidden;
      padding: 0 10px;
  }

  .subpage-layout {
      display: flex;
      width: calc(700px + 300px);
      margin: auto;
      position: relative;
      overflow: hidden;
  }

  @media screen and (max-width: 1020px) {
      .subpage-layout {
          width: 100%;
      }
  }

  .subpage:nth-child(2n) {
      background-color: #f6fff9;
  }

  .subpage-left-part {
      min-height: calc(100vh - 20px);
      flex: 1 1 700px;
      max-width: 700px;
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .subpage-main-contents {
      margin: 10px;
  }

  @media screen and (max-width: 500px) {
      .nav-container {
          position: absolute;
          right: -340px;
          /* border will cover the 3 dots */
          border-right: 30px solid white;
          border-left: 2px solid #f4f4f4;
          padding-right: 0;
          background-color: #ffffffc0;
          z-index: 1;
      }

      .subpage:nth-child(2n) .nav-container {
            background-color: #f6fff9c0;
            border-right: 30px solid #f6fff9;
      }

      .nav-container:target {
          right: -10px;
      }

      .navigation-dots {
          display: block;
      }
  }

  h3 {
      text-align: center;
  }

  li {
      margin-bottom: 10px;
  }
{% endblock style %}

{% macro nav(current_subpage_id) %}
  <div id="nav-{{ current_subpage_id }}" class="nav-container">
    <nav>
      {% for subpage_id, href, text in nav_links_data %}
        {% set attrs = {'href': href, 'draggable': 'false'} %}
        {% if current_subpage_id == subpage_id %}
          {% do attrs.update({'class': 'blue-button'}) %}
        {% else %}
          {% do attrs.update({'class': 'green-button'}) %}
        {% endif %}
        <a{{ attrs|xmlattr }}>{{ text }}</a>
      {% endfor %}
    </nav>
  </div>
  <a class="navigation-dots" href="#nav-{{ current_subpage_id }}">
    <img alt="Three dots, click to view mobile navigation panel"
         src="static/three-green-dots.svg" draggable="false">
  </a>
{% endmacro %}

{% macro subpage(subpage_id) %}
  <div id="{{ subpage_id }}" class="subpage">
    <div class="subpage-layout">
      <div class="subpage-left-part">
        <div class="subpage-main-contents">
          {{ caller() }}
        </div>
      </div>
      {{ nav(subpage_id) }}
    </div>
  </div>
{% endmacro %}