{# TODO: figure out nested macro calls #}
{% import 'components/navigation/global.html' as global %}
{% from 'components/navigation/sidebar.html' import nav_list, nav_item, nav_header, nav_entry %}
{% from 'components/loading_icon.html' import loading_icon %}
{% from 'components/timestamp.html' import timestamp %}
{% from 'components/tooltip.html' import tooltip %}
{% from 'components/links.html' import fancy_link, kemono_link, link_button %}
{% from 'components/tooltip.html' import register_message %}
{% from 'components/buttons.html' import button %}

{% macro header_link(url, text, class_name=none) %}
  <a
    href="{{url}}"
    class="header-link {{ class_name if class_name }}"
     >
      {{ text }}
  </a>
{% endmacro %}

<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
  <head>
    <script>var page_data = {{ render_page_data()|safe }}</script>

    {% if g.matomo_enabled and g.matomo_plain_code %}
      {{ g.matomo_plain_code|safe }}
    {% elif g.matomo_enabled %}
      <script>
        var _paq = window._paq = window._paq || [];
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
          var u="//{{ g.matomo_domain }}/";
          _paq.push(['setTrackerUrl', u+'{{ g.matomo_code }}']);
          _paq.push(['setSiteId', '{{ g.matomo_site_id }}']);
          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
          g.async=true; g.src=u+'{{ g.matomo_code }}.js'; s.parentNode.insertBefore(g,s);
        })();
      </script>
      <noscript>
        <p>
          <img
            src="//{{ g.matomo_domain }}/{{ g.matomo_code }}?idsite={{ g.matomo_site_id }}&amp;rec=1"
            style="border:0;"
            alt=""
          />
        </p>
      </noscript>
    {% endif %}

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block title %}
      <title>
        {{ (props.name ~ " | " ~ g.site_name) if props.name else g.site_name }}
      </title>
    {% endblock title %}
    <link rel="shortcut icon" href="/static/favicon.ico">

    {% block meta %}
      {% if props.service %}
        <meta name="service" content="{{ props.service }}">
      {% endif %}
      {% if props.id %}
        <meta name="id" content="{{ props.id }}">
      {% endif %}
      {% if props.importId %}
        <meta name="importId" content="{{ props.importId }}">
      {% endif %}
      {% if props.count %}
        <meta name="count" content="{{ props.count }}">
      {% endif %}
      {% if props.posts|length %}
        {% if props.posts[0].published %}
          <meta name="published" content="{{ props.posts[0].published }}"/>
        {% endif %}
        <meta name="added" content="{{ props.posts[0].added }}"/>
        <meta name="id" content="{{ props.posts[0].id }}"/>
      {% endif %}
    {% endblock meta %}

    {% block opengraph %}
      <meta property="og:title" content="{{ (props.name ~ ' | ' ~ g.site_name) if props.name else g.site_name }}">
      <meta property="og:type" content="website">
      <meta property="og:site_name" content="{{ g.site_name }}">
      <meta property="og:image" content="{{ g.origin }}/static/kemono-logo.svg">
      <meta property="og:image:width" content="150" />
      <meta property="og:image:height" content="150" />
      <meta property="og:url" content="{{ g.canonical_url }}">
    {% endblock opengraph %}

    {% block styles %}
    {% endblock styles %}

    {% block scripts %}
      {% if request.args.logged_in %}
        <script>
          localStorage.setItem('logged_in', 'yes');
        </script>
      {% endif %}
      {% if request.args.role %}
        <script>
          localStorage.setItem("role", "{{ request.args.role }}")
        </script>
      {% endif %}
      <script src="/static/js/lazy-styles.js"></script> {# TODO remove this shit #}
    {% endblock scripts %}

    {% block bundler_output %}
      {# quick hack until writing proper loader #}
      <% for (const css in htmlWebpackPlugin.files.css) { %>
        <% if (htmlWebpackPlugin.files.css[css].startsWith("/static/bundle/css/global")) { %>
          <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[css] %>">
        <% } %>
      <% } %>
      <% for (const chunk in htmlWebpackPlugin.files.chunks) { %>
        <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" defer></script>
      <% } %>
      <% for (const scriptPath in htmlWebpackPlugin.files.js) { %>
        <% if (htmlWebpackPlugin.files.js[scriptPath].startsWith("/static/bundle/js/global") || htmlWebpackPlugin.files.js[scriptPath].startsWith("/static/bundle/js/runtime") || htmlWebpackPlugin.files.js[scriptPath].startsWith("/static/bundle/js/vendors")) { %>
          <script src="<%= htmlWebpackPlugin.files.js[scriptPath] %>" defer></script>
        <% } %>
      <% } %>
    {% endblock bundler_output %}

    {% block scripts_extra %}
    {% endblock scripts_extra %}
  </head>
  <body class="transition-preload">
    <div class="global-sidebar">
      {% call nav_entry(class_name='clickable-header-entry') %}
        {{ nav_item('/', 'Home', 'clickable-header home-button', icon='/static/menu/home.svg') }}
        <div class='close-sidebar' >
          <img src="/static/close.svg" />
        </div>
      {% endcall %}
      {{ nav_list([
        [
          { 'header': true, 'text': g.artists_or_creators, 'icon': '/static/menu/artists.svg' },
          { 'text': 'Search', 'link': '/artists', 'icon': '/static/menu/search.svg' },
          { 'text': 'Recent', 'link': '/artists/updated', 'icon': '/static/menu/recent.svg' },
          { 'text': 'Random', 'link': '/artists/random', 'icon': '/static/menu/random1.svg' },
        ],
        [
          { 'header': true, 'text': 'Posts', 'icon': '/static/menu/posts.svg' },
          { 'text': 'Search', 'link': '/posts', 'icon': '/static/menu/search.svg' },
          { 'text': 'DMs', 'link': '/dms', 'icon': '/static/menu/dm.svg', 'disable': g.disable_dms },
          { 'text': 'Popular', 'link': '/posts/popular', 'icon': '/static/menu/recent.svg' },
          { 'text': 'Hash Lookup', 'link': '/search_hash', 'icon': '/static/menu/search.svg' },
          { 'text': 'Tags', 'link': '/posts/tags', 'icon': '/static/menu/tag.svg' },
          { 'text': 'Random', 'link': '/posts/random', 'icon': '/static/menu/random2.svg' },
        ],
        [
          { 'header': true, 'text': 'Importer', 'icon': '/static/menu/importer.svg' },
          { 'text': 'Import', 'link': '/importer', 'icon': '/static/menu/import.svg' },
          { 'text': 'FAQ', 'link': '/importer/tutorial', 'icon': '/static/menu/faq.svg', 'disable': g.disable_faq }
        ],
        [
          { 'header': true, 'text': 'Filehaus', 'disable': g.disable_filehaus},
          { 'text': 'Recent', 'link': '/shares' , 'disable': g.disable_filehaus},
        ]
      ]) }}
      {{ nav_entry([
        { 'header': true, 'text': 'Account', 'link': '/account', 'class_name': 'account-header', 'icon': '/static/menu/account.svg' },
        { 'text': 'Register', 'link': '/account/register?location=' + request.args.get("location", request.path), 'class_name': 'register', 'icon': '/static/menu/register.svg' },
        { 'text': 'Favorites', 'link': '/favorites', 'class_name': 'favorites hidden', 'icon': '/static/menu/favorites.svg' },
        { 'text': 'Review DMs', 'link': '/account/review_dms', 'class_name': 'review_dms hidden', 'icon': '/static/menu/dm.svg' },
        { 'text': 'Login', 'link': '/account/login?location=' + request.args.get("location", request.path), 'class_name': 'login', 'icon': '/static/menu/login.svg' }
      ], 'account') }}
      {{ nav_entry(g.custom_links, 'stuck-bottom') }}
    </div>

    <div class="content-wrapper shifted">
      <div class="backdrop backdrop-hidden">
      </div>
      <div class="header">
        <div id="burgor">
          <img src="/static/menu.svg" />
        </div>
        {{ header_link('/', 'Home', 'home') }}
        {{ header_link('/artists', g.artists_or_creators) }}
        {{ header_link('/posts', 'Posts') }}
        {{ header_link('/importer', 'Import', 'import') }}
        {{ header_link('/account/register?location=' + request.args.get("location", request.path), 'Register', 'register') }}
        {{ header_link('/account/login?location=' + request.args.get("location", request.path), 'Login', 'login') }}
      </div>
      {% include 'components/flash_messages.html' %}
      {% if g.banner_global %}
        {{ g.banner_global|safe }}
      {% endif %}

      <main class="main" id="main">
        {% block content %}
        {% endblock content %}
      </main>

      <footer class="global-footer">
        {% include 'components/footer.html' %}
        <div
          id="component-container"
          class="component-container"
          hidden
        >
          {{ fancy_link("") }}
          {{ register_message("") }}
          {{ timestamp("") }}
          {{ loading_icon() }}
          {% block components %}
          {% endblock components %}
        </div>
      </footer>
    </div>
    {# <div class="global-overlay">
    </div> #}
    {% call tooltip() %}
      <p class="tooltip__message">
      </p>
    {% endcall %}
  </body>
</html>
