{% extends "base.html" %}

{% block styles %}
  {{ super() }}
  <link rel="stylesheet" href="{{ 'assets/stylesheets/molcrafts.css' | url }}">
{% endblock %}

{% block hero %}
  {% if page.meta and page.meta.hero %}
    {% set hero = page.meta.hero %}
    <section class="molcrafts-home-hero" aria-labelledby="molcrafts-home-hero-title">
      <div class="molcrafts-home-hero__inner md-grid">
        <div class="molcrafts-home-hero__copy">
          <p class="molcrafts-home-hero__kicker">{{ hero.kicker | d("Manual", true) }}</p>
          <h1 id="molcrafts-home-hero-title">{{ hero.title | d(config.site_name, true) }}</h1>
          {% if hero.description %}
            <p class="molcrafts-home-hero__description">{{ hero.description }}</p>
          {% endif %}
          {% if hero.actions %}
            <nav class="molcrafts-home-hero__actions" aria-label="Primary">
              {% for action in hero.actions %}
                <a class="molcrafts-home-hero__button{% if action.style == 'primary' %} molcrafts-home-hero__button--primary{% endif %}" href="{{ action.href | url }}">
                  <span>{{ action.label }}</span>
                </a>
              {% endfor %}
            </nav>
          {% endif %}
        </div>
        {% if hero.install or hero.badges %}
          <aside class="molcrafts-home-hero__aside">
            {% if hero.install %}
              <div class="molcrafts-home-hero__install" data-molcrafts-install>
                <span class="molcrafts-home-hero__install-label">{{ hero.install.label | d("Install", true) }}</span>
                {% if hero.install.methods %}
                  <div class="molcrafts-home-hero__install-tabs" role="tablist" aria-label="{{ hero.install.label | d('Install', true) }} methods">
                    {% for method in hero.install.methods %}
                      <button
                        class="molcrafts-home-hero__install-tab{% if loop.first %} molcrafts-home-hero__install-tab--active{% endif %}"
                        id="molcrafts-install-tab-{{ loop.index0 }}"
                        type="button"
                        role="tab"
                        aria-selected="{% if loop.first %}true{% else %}false{% endif %}"
                        aria-controls="molcrafts-install-panel-{{ loop.index0 }}"
                        data-molcrafts-install-tab="{{ loop.index0 }}"
                        {% if not loop.first %}tabindex="-1"{% endif %}
                      >
                        {{ method.label | d("Method", true) }}
                      </button>
                    {% endfor %}
                  </div>
                  {% for method in hero.install.methods %}
                    {% set cmd = method.command | d(method, true) %}
                    <div
                      class="molcrafts-home-hero__install-panel{% if loop.first %} molcrafts-home-hero__install-panel--active{% endif %}"
                      id="molcrafts-install-panel-{{ loop.index0 }}"
                      role="tabpanel"
                      aria-labelledby="molcrafts-install-tab-{{ loop.index0 }}"
                      data-molcrafts-install-panel="{{ loop.index0 }}"
                      {% if not loop.first %}hidden{% endif %}
                    >
                      <div class="molcrafts-home-hero__install-row">
                        <code>{{ cmd }}</code>
                        <button class="molcrafts-home-hero__install-copy" type="button" data-molcrafts-copy="{{ cmd | e }}" aria-label="Copy install command">
                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                        </button>
                      </div>
                    </div>
                  {% endfor %}
                {% else %}
                  {% set cmd = hero.install.command | d(hero.install, true) %}
                  <div class="molcrafts-home-hero__install-row">
                    <code>{{ cmd }}</code>
                    <button class="molcrafts-home-hero__install-copy" type="button" data-molcrafts-copy="{{ cmd | e }}" aria-label="Copy install command">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                    </button>
                  </div>
                {% endif %}
              </div>
            {% endif %}
            {% if hero.badges %}
              <div class="molcrafts-home-hero__badges">
                {% for badge in hero.badges %}
                  <a href="{{ badge.href }}" target="_blank" rel="noopener">
                    <img src="{{ badge.img }}" alt="{{ badge.alt | d('badge', true) }}" loading="lazy">
                  </a>
                {% endfor %}
              </div>
            {% endif %}
          </aside>
          <script>
            for (const install of document.querySelectorAll("[data-molcrafts-install]")) {
              const tabs = install.querySelectorAll("[data-molcrafts-install-tab]");
              const panels = install.querySelectorAll("[data-molcrafts-install-panel]");

              function activateInstallTab(tab) {
                const index = tab.dataset.molcraftsInstallTab;

                for (const item of tabs) {
                  const active = item === tab;
                  item.classList.toggle("molcrafts-home-hero__install-tab--active", active);
                  item.setAttribute("aria-selected", active ? "true" : "false");
                  item.tabIndex = active ? 0 : -1;
                }

                for (const panel of panels) {
                  const active = panel.dataset.molcraftsInstallPanel === index;
                  panel.classList.toggle("molcrafts-home-hero__install-panel--active", active);
                  panel.hidden = !active;
                }
              }

              for (const tab of tabs) {
                tab.addEventListener("click", () => activateInstallTab(tab));
                tab.addEventListener("keydown", (event) => {
                  if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
                  event.preventDefault();
                  const current = Array.from(tabs).indexOf(tab);
                  let next = current;
                  if (event.key === "ArrowLeft") next = (current - 1 + tabs.length) % tabs.length;
                  if (event.key === "ArrowRight") next = (current + 1) % tabs.length;
                  if (event.key === "Home") next = 0;
                  if (event.key === "End") next = tabs.length - 1;
                  tabs[next].focus();
                  activateInstallTab(tabs[next]);
                });
              }
            }

            for (const btn of document.querySelectorAll(".molcrafts-home-hero__install-copy")) {
              btn.addEventListener("click", function () {
                navigator.clipboard.writeText(this.dataset.molcraftsCopy).then(() => {
                  this.classList.add("molcrafts-home-hero__install-copy--done");
                  setTimeout(() => this.classList.remove("molcrafts-home-hero__install-copy--done"), 1600);
                });
              });
            }
          </script>
        {% endif %}
      </div>
    </section>
  {% endif %}
{% endblock %}

{% block extrahead %}
  {{ super() }}
  <meta name="theme-color" content="#18432b">
  {% if config.extra.molcrafts %}
    {% set product = config.extra.molcrafts.product | d("", true) %}
    {% set accent = config.extra.molcrafts.accent | d("", true) %}
    {% set accent_soft = config.extra.molcrafts.accent_soft | d("", true) %}
  {% endif %}
  {% if product %}
    <script>
      document.documentElement.dataset.molcraftsProduct = "{{ product }}";
    </script>
  {% endif %}
  {#
    Per-product brand colours live in each product's zensical.toml
    ([project.extra.molcrafts].accent / .accent_soft), not in this theme.
    The theme only supplies the common palette/layout plus the default accent;
    the two config values are injected below and override that default. When a
    product sets accent_soft, it is used verbatim; otherwise it is derived from
    the primary accent.
  #}
  {% if accent %}
    <style>
      {% if product %}html[data-molcrafts-product="{{ product }}"] body{% else %}[data-md-color-scheme="default"], [data-md-color-scheme="slate"]{% endif %} {
        --molcrafts-product-accent: {{ accent }};
        --molcrafts-product-accent-soft: {{ accent_soft | d("color-mix(in srgb, " ~ accent ~ " 14%, transparent)", true) }};
      }
    </style>
  {% endif %}
  {#
    MathJax config must be in <head> BEFORE the library script in
    extra_javascript. Sites that load tex-mml-chtml.js (or similar) pick this
    up automatically. Sites without MathJax pay only a tiny config object.
    processHtmlClass matches pymdownx.arithmatex generic=true output.
  #}
  <script>
    window.MathJax = {
      tex: {
        /* arithmatex (generic=true) already rewrites $…$ / $$…$$ to these. */
        inlineMath: [["\\(", "\\)"]],
        displayMath: [["\\[", "\\]"]],
        processEscapes: true,
        processEnvironments: true
      },
      options: {
        ignoreHtmlClass: ".*|",
        processHtmlClass: "arithmatex"
      }
    };
  </script>
{% endblock %}

{% block scripts %}
  {{ super() }}
  {#
    Instant navigation (navigation.instant) swaps page content without a full
    reload, so MathJax's first typeset never sees formulas on later pages.
    Re-typeset on every document$ emission — and once on DOMContentLoaded as a
    fallback when document$ is missing or the library is still starting.
  #}
  <script>
    (function () {
      var pending = false;

      function typeset() {
        var mj = window.MathJax;
        if (!mj) return;
        // Library still downloading: queue one retry after startup.
        if (typeof mj.typesetPromise !== "function") {
          if (pending) return;
          pending = true;
          var n = 0;
          var timer = setInterval(function () {
            n += 1;
            if (window.MathJax && typeof window.MathJax.typesetPromise === "function") {
              clearInterval(timer);
              pending = false;
              typeset();
            } else if (n > 40) {
              clearInterval(timer);
              pending = false;
            }
          }, 50);
          return;
        }
        try {
          if (mj.startup && mj.startup.output && mj.startup.output.clearCache) {
            mj.startup.output.clearCache();
          }
          if (typeof mj.typesetClear === "function") mj.typesetClear();
          if (typeof mj.texReset === "function") mj.texReset();
          mj.typesetPromise();
        } catch (e) { /* library not ready yet */ }
      }

      if (typeof document$ !== "undefined" && document$.subscribe) {
        document$.subscribe(typeset);
      } else {
        document.addEventListener("DOMContentLoaded", typeset);
      }
    })();
  </script>
{% endblock %}