<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ description | default('5Panda - Portfolio & Documentation') }}">
    <meta
    name="author" content="5Panda"> <!-- Open Graph -->
    <meta property="og:title" content="{{ title | default('5Panda') }}">
    <meta property="og:description" content="{{ description | default('Portfolio & Documentation') }}">
    <meta property="og:type" content="{{ ogType | default('website') }}">
    <title>{{ title | default("5Panda") }}</title>
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
    <!-- Fonts -->
    <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@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
      rel="stylesheet"> <!-- Styles -->
    <link
    rel="stylesheet" href="/css/style.css">
    <!-- Theme initialization script (must be in head to prevent FOUC) -->
    <script>
      (function () {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
          document.documentElement.setAttribute('data-theme', savedTheme);
        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
          document.documentElement.setAttribute('data-theme', 'light');
        }
      })();
    </script>
  </head>
  <body
    class="min-h-screen bg-base-100 text-base-content">
    <!-- Navbar -->
    <div class="navbar min-h-12 bg-base-100/80 backdrop-blur-xl border-b border-white/5 sticky top-0 z-50">
      <div class="navbar-start">
        <!-- Mobile menu button -->
        <div class="dropdown lg:hidden">
          <button class="btn btn-ghost btn-sm" tabindex="0">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
            </svg>
          </button>
          <ul tabindex="0" class="dropdown-content menu menu-sm bg-base-100 border border-white/5 shadow-xl rounded-lg w-56 p-2 mt-4">
            <li><a href="/" class="{% if page.url == '/' %}text-primary font-medium{% endif %}">Home</a></li>
            <li><a href="/blog/" class="{% if '/blog/' in page.url %}text-primary font-medium{% endif %}">Blog</a></li>
            <li><a href="/team/" class="{% if '/team/' in page.url %}text-primary font-medium{% endif %}">Team</a></li>
            <li>
              <details>
                <summary>Projects</summary>
                <ul>
                  <li><a href="/projects/clqms01/" class="{% if '/projects/clqms01/' in page.url %}text-primary font-medium{% endif %}">CLQMS</a></li>
                </ul>
              </details>
            </li>
          </ul>
        </div>
        <a href="/" class="text-xl font-bold brand-text transition-opacity px-2 hidden lg:block">5Panda</a>
      </div>
      <div class="navbar-center lg:hidden">
        <a href="/" class="text-xl font-bold brand-text">5Panda</a>
      </div>
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-sm menu-horizontal px-1 gap-1">
          <li>
            <a href="/" class="rounded-lg {% if page.url == '/' %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10 hover:text-primary transition-colors">
              Home
            </a>
          </li>
          <li>
            <a href="/blog/" class="rounded-lg {% if '/blog/' in page.url %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10 hover:text-primary transition-colors">
              Blog
            </a>
          </li>
          <li>
            <a href="/team/" class="rounded-lg {% if '/team/' in page.url %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10 hover:text-primary transition-colors">
              Team
            </a>
          </li>
          <li>
            <details class="group">
              <summary class="rounded-lg {% if '/projects/' in page.url %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10 hover:text-primary transition-colors cursor-pointer">
                Projects
              </summary>
              <ul class="p-2 bg-base-100 rounded-t-none bg-base-100/95 backdrop-blur-xl border border-white/5 shadow-xl w-60 z-[100]">
                <li>
                  <a href="/projects/clqms01/" class="{% if '/projects/clqms01/' in page.url %}text-primary bg-primary/10{% endif %} hover:text-primary hover:bg-primary/10">
                    <span class="mr-2">🏥</span>CLQMS
                  </a>
                </li>
              </ul>
            </details>
          </li>
        </ul>
      </div>
      <div class="navbar-end gap-1">
        <!-- Theme toggle -->
        <button id="theme-toggle" class="btn btn-ghost btn-circle btn-sm theme-toggle" aria-label="Toggle theme">
          <svg class="icon-sun h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
          </svg>
          <svg class="icon-moon h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
          </svg>
        </button>
        <!-- GitHub link -->
        <a href="https://github.com" target="_blank" class="btn btn-ghost btn-circle btn-sm" aria-label="GitHub">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207
            11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729
            1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304
            3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381
            1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138
            3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807
            5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386
            0-6.627-5.373-12-12-12z"/>
          </svg>
        </a>
      </div>
    </div>
    <!-- Main content -->
    <main class="animate-fade-in">
      {{ content | safe }}
    </main>
    <!-- Footer -->
    <footer class="footer footer-center bg-base-200 text-base-content p-10 border-t border-white/5">
      <aside>
        <p class="font-bold text-xl brand-text mb-2">5Panda</p>
        <p class="text-base-content/60">Portfolio & Documentation</p>
      </aside>
      <nav>
        <div class="grid grid-flow-col gap-4">
          <a
            href="https://github.com"
            target="_blank"
            class="btn btn-ghost btn-sm btn-circle hover:text-primary transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24">
              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207
              11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729
              1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304
              3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381
              1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138
              3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807
              5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386
              0-6.627-5.373-12-12-12z"/>
            </svg>
          </a>
        </div>
      </nav>
      <aside>
        <p class="text-sm text-base-content/40">&copy; {% year %} 5Panda. Built with 11ty & Tailwind CSS.</p>
      </aside>
    </footer>
    <!-- Theme toggle script -->
    <script>
      document.getElementById('theme-toggle').addEventListener('click', function () {
        const html = document.documentElement;
        const currentTheme = html.getAttribute('data-theme');
        const newTheme = currentTheme === 'light'
          ? 'dark'
          : 'light';
        html.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
      });
    </script>
  </body>
</html>