<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block page_title %}{{ config.title | default("bckt") }}{% endblock page_title %}</title>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ base_path }}/rss.xml">
    {% for tag in config.rss_tags %}
    <link rel="alternate" type="application/rss+xml" title="RSS for {{ tag }}" href="{{ base_path }}/rss-{{ tag }}.xml">
    {% endfor %}
    <link rel="icon" type="image/png" sizes="32x32" href="{{ base_path }}/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ base_path }}/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ base_path }}/apple-touch-icon.png">
    <link rel="icon" href="{{ base_path }}/favicon.ico">
    <script>
      (function () {
        try {
          var stored = localStorage.getItem("bckt-color-theme");
          var theme = stored || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
          document.documentElement.dataset.theme = theme;
        } catch (error) {
          document.documentElement.dataset.theme = "light";
        }
      })();
    </script>
    <link rel="stylesheet" href="{{ base_path }}/style.css">
    {% block page_meta %}
    {% set site_description = config.description | default("A site generated by bckt.") %}
    <meta name="description" content="{{ site_description }}">
    <meta property="og:site_name" content="{{ config.title | default("bckt") }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ config.title | default("bckt") | trim }}">
    <meta property="og:url" content="{{ base_url | safe }}">
    <meta property="og:description" content="{{ site_description | trim }}">
    <link rel="canonical" href="{{ base_url | safe }}">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ config.title | default("bckt") | trim }}">
    <meta name="twitter:description" content="{{ site_description | trim }}">
    {% if config.open_graph_image %}
    <meta property="og:image" content="{{ base_url }}{{ config.open_graph_image | safe }}">
    <meta name="twitter:image" content="{{ base_url }}{{ config.open_graph_image | safe }}">
    {% endif %}
    {% endblock page_meta %}
    {% block head %}{% endblock head %}
  </head>
  <body>
    <header class="site-header">
      <div class="site-shell site-header__inner">
        <a class="site-title" href="{{ base_path }}/">{{ config.title | default("bckt") }}</a>
        <nav class="site-nav" aria-label="Primary navigation">
          <a href="{{ base_path }}/">Home</a>
          <a href="{{ base_path }}/about/">About</a>
          <a href="{{ base_path }}/search/">Search</a>
          <a href="{{ base_path }}/rss.xml">RSS</a>
          <button class="theme-toggle" type="button" data-theme-toggle aria-label="Switch color theme" aria-pressed="false"><span data-theme-toggle-label>Dark</span></button>
        </nav>
      </div>
    </header>

    <main class="site-shell site-main">
      {% block content %}{% endblock content %}
    </main>

    <footer class="site-shell site-footer">
      <p>MicroX theme for <a href="https://github.com/vrypan/bckt">bckt</a>.</p>
    </footer>
    <script defer src="{{ base_path }}/js/theme-toggle.js"></script>
    <script defer src="{{ base_path }}/js/carousel.js"></script>
    {% block page_scripts %}{% endblock page_scripts %}
  </body>
</html>
