---
import "../styles/global.css";
import versionInfo from "../generated/version.json";

const version = versionInfo.version;
const releaseUrl = versionInfo.url;
const { title = "Computing:Box" } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>{title}</title>
    
    <script is:inline>
      var _paq = window._paq = window._paq || [];
      _paq.push(["setCookieDomain", "*.www.computingbox.co.uk"]);
      _paq.push(["setDomains", ["*.www.computingbox.co.uk","*.csbox.mrdaviscsit.uk","*.csbox.mrlyall.co.uk","*.csbox.mrlyall.uk"]]);
      _paq.push(["enableCrossDomainLinking"]);
      _paq.push(["disableCookies"]);
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="//analytics.adcmnetworks.co.uk/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '2']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
  </head>
  <body>
    <header class="siteNav">
      <div class="navInner">
        <a class="brand" href="/">
          <img class="brandLogo" src="/images/computing-box-logo-small.webp" alt="Computing:Box logo" />
          <span class="brandName">Computing:Box</span>
        </a>

        <nav class="navLinks" aria-label="Site navigation">
          <a href="/">Home</a>
          <a href="/about">About</a>
          <a href="/binary">Binary</a>
          <a href="/hexadecimal">Hexadecimal</a>
          <a href="/hex-colours">Hex Colours</a>
          <a href="/logic-gates">Logic Gates</a>
          <a href="/pc-builder">PC Components</a>
        </nav>
      </div>
    </header>

    <main class="pageWrap">
      <slot />
    </main>

    <footer class="siteFooter">
        <div class="footerInner">
          <div style="margin-top: 5px; display: flex; justify-content: center;">
              <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a>
              <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a>
          </div>
        <div>Computer Science Concept Simulators</div>
        <div>    Version:
    <a href={releaseUrl} target="_blank" rel="noopener noreferrer">{version}</a> • © {new Date().getFullYear()} Computing:Box • Created with ♥ by Mr A Lyall</div>
      </div>
    </footer>

<script is:inline>
      function setupToolboxAccordions() {
        // Look for cards inside ANY of the three toolboxes!
        const cards = document.querySelectorAll('.panelCol .card, .pb-toolbox .card, .lg-toolbox .card');
        if (!cards.length) return;

        // Your primary cards for each page
        const primaryCardNames = ['settings', 'info', 'components', 'system diagnostics'];

        cards.forEach(card => {
          const titleEl = card.querySelector('.cardTitle');
          if (!titleEl) return;

          const titleText = titleEl.textContent.trim().toLowerCase();
          const isPrimary = primaryCardNames.includes(titleText);

          // 1. DYNAMICALLY WRAP THE CONTENT
          if (!card.querySelector('.cardBody')) {
            const body = document.createElement('div');
            body.className = 'cardBody';
            const inner = document.createElement('div');
            inner.className = 'cardBodyInner';
            body.appendChild(inner);

            Array.from(card.childNodes).forEach(node => {
              if (node !== titleEl) {
                inner.appendChild(node);
              }
            });
            card.appendChild(body);
          }

          // 2. APPLY DEFAULT STATE
          if (isPrimary) {
            card.classList.remove('collapsed'); 
          } else {
            card.classList.add('collapsed');
          }

          // 3. CLICK LISTENERS
          if (card.dataset.accordionInit) return;
          card.dataset.accordionInit = "true";

          titleEl.addEventListener('click', () => {
            const isCollapsing = !card.classList.contains('collapsed');

            if (isCollapsing) {
              card.classList.add('collapsed');
            } else {
              if (isPrimary) {
                cards.forEach(c => { 
                  // Only close cards that share the same parent toolbox
                  if (c !== card && c.closest(card.parentElement.tagName) === card.closest(card.parentElement.tagName)) {
                    c.classList.add('collapsed'); 
                  }
                });
              } else {
                cards.forEach(c => {
                  if (c.closest(card.parentElement.tagName) !== card.closest(card.parentElement.tagName)) return;
                  const cTitle = c.querySelector('.cardTitle')?.textContent.trim().toLowerCase() || '';
                  if (primaryCardNames.includes(cTitle)) {
                    c.classList.add('collapsed');
                  }
                });
              }
              card.classList.remove('collapsed');
            }
          });
        });
      }

      setupToolboxAccordions();
      document.addEventListener('astro:page-load', setupToolboxAccordions);
    </script>

  </body>
</html>