<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ sable_config.module_title }}</title>
    <link rel="stylesheet" href="static/mystyles.css" />
    <script
      src="https://kit.fontawesome.com/4d30d3d1aa.js"
      crossorigin="anonymous"></script>
      <script src="https://unpkg.com/lunr@2.3.9/lunr.js"></script>
      <script>
          const storageKey = 'theme-preference'

          const onClick = () => {
            // flip current value
            theme.value = theme.value === 'light'
              ? 'dark'
              : 'light'

            setPreference()
          }

          const getColorPreference = () => {
            if (localStorage.getItem(storageKey))
              return localStorage.getItem(storageKey)
            else
              return window.matchMedia('(prefers-color-scheme: dark)').matches
                ? 'dark'
                : 'light'
          }

          const setPreference = () => {
            localStorage.setItem(storageKey, theme.value)
            reflectPreference()
          }

          const reflectPreference = () => {
            const body = document.querySelector('body');
            const html = document.querySelector('html'); // The html element is also configured to make sure the background color is correct on mobile if the content overflows horizontally.

            if (theme.value === 'dark') {
                body.className = 'dark';
                html.className = 'dark';
            } else {
                body.className = '';
                html.className = '';
            }

            document.firstElementChild
              .setAttribute('data-theme', theme.value)

            document
              .querySelector('#theme-toggle')
              ?.setAttribute('aria-label', theme.value)
          }

          const theme = {
            value: getColorPreference(),
          }

          window.addEventListener(
            "load",
            () => {
            // set on load so screen readers can see latest value on the button
            reflectPreference()

            // now this script can find and listen for clicks on the control
            document
              .querySelector('#theme-toggle')
              .addEventListener('click', onClick)
          });

          // sync with system changes
          window
            .matchMedia('(prefers-color-scheme: dark)')
            .addEventListener('change', ({matches:isDark}) => {
              theme.value = isDark ? 'dark' : 'light'
              setPreference()
            });
      </script>
  </head>
  <body>
    <div class="container">
      <nav class="level pt-6 mb-5 pb-2 bottom-border">
        <div class="level-left">
          <p class="level-item has-text-centered is-size-3 has-text-weight-medium">
            <a class="link is-info" href="index.html">
              {{ sable_config.module_title }}
            </a>
          </p>
        </div>

        <div class="level-right">
          {% if sable_config.enable_lunr_search  %}
          <form action="search.html" class="mr-2 has-text-centered">
            <input type="text" name="query" class="input mr-3 navbar-search-query-input" placeholder="Search">
            <input type="submit" class="button is-primary mr-5" value="Search" />
          </form>
          {% endif %}

          <p class="level-item has-text-centered is-size-5">
            <a href="{{ sable_config.repository_url }}" class="link is-info mr-5" target="_blank">
              {% if sable_config.repository_type | string == "RepositoryType.GITHUB" %}
              <span class="icon">
                <i class="fa-brands fa-github"></i>
              </span>
              {% elif sable_config.repository_type | string == "RepositoryType.BITBUCKET" %}
              <span class="icon">
                <i class="fa-brands fa-bitbucket"></i>
              </span>
              {% endif %}
              <span>Source</span>
            </a>

            <button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite" type="button">
              <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
                <mask class="moon" id="moon-mask">
                  <rect x="0" y="0" width="100%" height="100%" fill="white" />
                  <circle cx="24" cy="10" r="6" fill="black" />
                </mask>
                <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
                <g class="sun-beams" stroke="currentColor">
                  <line x1="12" y1="1" x2="12" y2="3" />
                  <line x1="12" y1="21" x2="12" y2="23" />
                  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
                  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
                  <line x1="1" y1="12" x2="3" y2="12" />
                  <line x1="21" y1="12" x2="23" y2="12" />
                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
                  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
                </g>
              </svg>
            </button>
          </p>
        </div>
      </nav>
    </div>

    <div class="container mb-6">{% block content %}{% endblock %}</div>

    <footer class="footer">
      <div class="content has-text-centered">
        {% if sable_config.footer_content %}
          <p>{{ sable_config.footer_content | safe }}</p>
        {% endif %}
        <p>Built with <strong><a href="https://github.com/markvincze/sabledocs" target="_blank">sabledocs</a></strong>.</p>
      </div>
    </footer>
  </body>
</html>
