{% load static menu_tags absolute_static wagtailsettings_tags wagtailimages_tags %}<!doctype html>
<html lang="en">{% get_settings as settings %}
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
    <title>{% block document_title %}{% if title %}{{ title }} · {% endif %}hpk.io{% endblock %}</title>

    <style>
      @font-face { font-family: 'Sacramento'; src: url("{% static 'fonts/Sacramento-Regular.ttf' %}") format("truetype"); font-weight: 400; font-style: normal; }
      @font-face { font-family: 'Zilla Slab'; src: url("{% static 'fonts/ZillaSlab-Light.ttf' %}") format("truetype"); font-weight: 300; font-style: normal; }
      @font-face { font-family: 'Zilla Slab'; src: url("{% static 'fonts/ZillaSlab-LightItalic.ttf' %}") format("truetype"); font-weight: 300; font-style: italic; }
      @font-face { font-family: 'Zilla Slab'; src: url("{% static 'fonts/ZillaSlab-Bold.ttf' %}") format("truetype"); font-weight: 700; font-style: normal; }
      @font-face { font-family: 'Zilla Slab'; src: url("{% static 'fonts/ZillaSlab-BoldItalic.ttf' %}") format("truetype"); font-weight: 700; font-style: italic; }
      @font-face { font-family: 'Zilla Slab Highlight'; src: url("{% static 'fonts/ZillaSlabHighlight-Bold.ttf' %}") format("truetype"); font-weight: 700; font-style: normal; }
      @font-face { font-family: 'Bitter'; src: url("{% static 'fonts/Bitter-Light.ttf' %}") format("truetype"); font-weight: 300; font-style: normal; }
      @font-face { font-family: 'Bitter'; src: url("{% static 'fonts/Bitter-LightItalic.ttf' %}") format("truetype"); font-weight: 300; font-style: italic; }
      @font-face { font-family: 'Bitter'; src: url("{% static 'fonts/Bitter-Bold.ttf' %}") format("truetype"); font-weight: 700; font-style: normal; }
      @font-face { font-family: 'Bitter'; src: url("{% static 'fonts/Bitter-BoldItalic.ttf' %}") format("truetype"); font-weight: 700; font-style: italic; }}
      @font-face { font-family: 'Fira Code'; src: url("{% static 'fonts/FiraCode-Light.ttf' %}") format("truetype"); font-weight: 300; font-style: normal; }
      @font-face { font-family: 'Fira Code'; src: url("{% static 'fonts/FiraCode-SemiBold.ttf' %}") format("truetype"); font-weight: 600; font-style: normal; }
    </style>

    {% if debug %}<link rel="stylesheet" href="{% static 'hpk.css' %}"/>
    {% else %}<link rel="stylesheet" href="{% static 'hpk.min.css' %}" />{% endif %}

    <meta name="description" content="{% block meta_description %}Hpk.io{% endblock %}" />

    <meta property="og:title" content="{% block og_title %}Hpk.io{% endblock %}">
    <meta property="og:description" content="{% block og_description %}Ada Wrights's website - Hpk.io{% endblock %}">
    <meta property="og:image" content="{% block og_image %}{% if settings.picata.SocialSettings.default_social_image %}{{ request.scheme }}://{{ request.get_host }}/{% image_url settings.picata.SocialSettings.default_social_image 'fill-1200x630' %}{% else %}{% absolute_static 'ada-social-bear.jpg' %}{% endif %}{% endblock %}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:type" content="{% block og_type %}website{% endblock %}">

    <script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "{% block ld_type %}WebPage{% endblock %}",
          "name": "{{ page.get_social_title }}",
          "description": "{{ page.get_social_description }}",
          "image": "{% block ld_image %}{% if settings.picata.SocialSettings.default_social_image %}{{ request.scheme }}://{{ request.get_host }}/{% image_url settings.picata.SocialSettings.default_social_image 'fill-1200x630' %}{% else %}{% absolute_static 'ada-social-bear.jpg' %}{% endif %}{% endblock %}",
          "url": "{{ request.build_absolute_uri }}"
      }
    </script>
  </head>
  <body>
    <header>
      <div>

        <!-- Top bar spanning the page -->
        {% if debug %}
        <div id="top-bar" class="debug">

          <!-- Debug Breakpoint Indicator -->
          <div id="debug-container" class="flex space-x-2">
            <div class="sm:hidden bg-gray-700">xs</div>
            <div class="sm:flex md:hidden bg-blue-700 hidden">sm</div>
            <div class="md:flex lg:hidden bg-green-700 hidden">md</div>
            <div class="lg:flex xl:hidden bg-yellow-700 hidden">lg</div>
            <div class="xl:flex 2xl:hidden bg-red-700 hidden">xl</div>
            <div class="2xl:flex bg-purple-700 hidden">2xl</div>
          </div>

        {% else %}
        <div id="top-bar">
        {% endif %}

          <div class="flex btn-group">

            <!-- Search controls -->
            <div id="search-wrapper">
              <button id="search-toggle" class="!rounded-r-full" aria-label="Toggle search field" aria-expanded="false" aria-controls="search-field" title="Toggle Search">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                </svg>
              </button>
              <form action="{% url 'search' %}" method="get">
                <input id="search-field"  name="query" value="{{ search_query }}" type="text" tabIndex="-1" placeholder="Search the site&hellip;" class="search-hidden opacity-0" aria-hidden="true" aria-label="Search field" />
              </form>
            </div>

            <!-- Theme chooser -->
            <div id="theme-wrapper" class="group">
              <span id="theme-reset" class="opacity-0 group-hover:opacity-100 indicator-item">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
              </span>
              <div class="flex">
                <button class="btn btn-sm !rounded-l-full !rounded-r-none border-r-0" data-set-theme="fl" data-act-class="btn-active" aria-label="Switch to light mode" title="Light mode">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
                  </svg>
                </button>
                <div class="pill-button-divider"></div>
                <button class="btn btn-sm !rounded-r-full !rounded-l-none border-l-0" data-set-theme="ad" data-act-class="btn-active" aria-label="Switch to dark mode" title="Dark mode">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
                  </svg>
                </button>
              </div>
            </div>

          </div>

        </div>

        <!-- Page title and menu bar -->
        <div id="menu-block">
          <!-- Image and title with tagline -->
          <div class="profile">
            <img src="{% static 'ada-profile.jpg' %}" alt="Profile picture of Ada Wright" />
            <h1><span class="name">Ada Wright</span> <span class="tagline">writes here</span></h1>
          </div>
          <!-- Menu buttons -->
          <nav>
            {% render_site_menu %}
          </nav>
        </div>
      </div>
    </header>

    <main class="{% block main_classes %}one-column{% endblock %}">
     {% block content %}{% endblock %}
    </main>

    <footer class="footer">
      <div>
        <p>&copy; 2024 Ada Wright</p>
      </div>
    </footer>

    {% if debug %}<script src="{% static 'hpk.js' %}"></script>
    {% else %}<script src="{% static 'hpk.min.js' %}"></script>{% endif %}

    <!-- Optional: Link to your JS file -->
  </body>
</html>
