<!doctype html>
<html lang="{{ lang | default(value='sk') }}" data-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{{ t(key="admin-title", lang=lang | default(value='sk')) }}{% endblock title %}</title>
    <meta name="description" content="{% block meta_description %}{{ t(key="meta-description", lang=lang | default(value='sk')) }}{% endblock meta_description %}">
    <link rel="icon" type="image/x-icon" href="/static/favicon/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/static/favicon/site.webmanifest">
    <script>
      function applyTheme(t) {
        var dark = t === 'dark'
          || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
        document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
      }
      function highlightTheme(t) {
        document.querySelectorAll('[data-theme-opt]').forEach(function (b) {
          var on = b.getAttribute('data-theme-opt') === t;
          b.classList.toggle('active', on);
          var chk = b.querySelector('.opt-check');
          if (chk) chk.classList.toggle('hidden', !on);
        });
      }
      function setTheme(t) {
        localStorage.setItem('theme', t);
        applyTheme(t);
        highlightTheme(t);
      }
      applyTheme(localStorage.getItem('theme') || 'dark');
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
        if ((localStorage.getItem('theme') || 'dark') === 'system') applyTheme('system');
      });
      document.addEventListener('DOMContentLoaded', function () {
        highlightTheme(localStorage.getItem('theme') || 'dark');
        var path = location.pathname;
        document.querySelectorAll('.term-navlinks a[data-nav]').forEach(function (a) {
          var h = a.getAttribute('data-nav');
          if (h === path || (h !== '/' && path.indexOf(h) === 0)) a.classList.add('is-active');
        });
      });
    </script>
    <link href="/static/css/app.css" rel="stylesheet" type="text/css">
    {% block head %}{% endblock head %}
    <link href="/static/css/theme.css" rel="stylesheet" type="text/css">
    <script src="/static/vendor/htmx/htmx-1.9.12.min.js"></script>
    <style>
      @media (min-width: 768px) {
        .nav-menu { flex-direction: row; }
      }
      #nav-backdrop { display: none; }
      @media (max-width: 767px) {
        #nav-backdrop {
          display: block;
          position: fixed;
          inset: 0;
          z-index: 40;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.15s ease, visibility 0s linear 0.2s;
        }
        .term-titlebar:has(.dropdown:focus-within) ~ #nav-backdrop {
          opacity: 1;
          visibility: visible;
          transition: opacity 0.15s ease, visibility 0s;
        }
      }
    </style>
  </head>
  <body class="flex min-h-screen flex-col bg-base-100 text-base-content antialiased">
    <header class="term-titlebar">
      <nav class="term-nav">
        <a href="/admin/dashboard" class="term-brand">{{ t(key="admin-title", lang=lang | default(value='sk')) }}</a>
        <ul class="nav-menu term-navlinks menu menu-sm hidden items-center md:flex">
          <li><a href="/admin/dashboard" data-nav="/admin/dashboard">{{ t(key="admin-dashboard", lang=lang | default(value='sk')) }}</a></li>
          <li><a href="/admin/blog/articles" data-nav="/admin/blog">{{ t(key="admin-blog", lang=lang | default(value='sk')) }}</a></li>
          <li><a href="/admin/audio/albums" data-nav="/admin/audio">{{ t(key="admin-audio", lang=lang | default(value='sk')) }}</a></li>
          <li><a href="/admin/about" data-nav="/admin/about">{{ t(key="admin-about", lang=lang | default(value='sk')) }}</a></li>
          <li><a href="/" class="t-blue">{{ t(key="admin-exit", lang=lang | default(value='sk')) }}</a></li>
          <li>
            <form method="post" action="/admin/logout">
              <button type="submit" class="t-red w-full">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
            </form>
          </li>
        </ul>
        <div class="term-nav-right">
          <div class="dropdown dropdown-end md:hidden">
            <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="{{ t(key='menu', lang=lang | default(value='sk')) }}">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
              </svg>
            </div>
            <ul tabindex="0"
              class="menu dropdown-content z-50 mt-3 w-52 border border-base-300 bg-base-200 p-2 shadow-lg">
              <li><a href="/admin/dashboard">{{ t(key="admin-dashboard", lang=lang | default(value='sk')) }}</a></li>
              <li><a href="/admin/blog/articles">{{ t(key="admin-blog", lang=lang | default(value='sk')) }}</a></li>
              <li><a href="/admin/audio/albums">{{ t(key="admin-audio", lang=lang | default(value='sk')) }}</a></li>
              <li><a href="/admin/about">{{ t(key="admin-about", lang=lang | default(value='sk')) }}</a></li>
              <li><a href="/" class="t-blue">{{ t(key="admin-exit", lang=lang | default(value='sk')) }}</a></li>
              <li>
                <form method="post" action="/admin/logout">
                  <button type="submit" class="t-red w-full">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
                </form>
              </li>
            </ul>
          </div>
          <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle" aria-label="{{ t(key='settings', lang=lang | default(value='sk')) }}" title="{{ t(key='settings', lang=lang | default(value='sk')) }}">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="h-5 w-5">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
              </svg>
            </div>
            <form method="post" action="/lang" hx-boost="false">
              <ul tabindex="0" class="menu dropdown-content z-50 mt-3 w-56 border border-base-300 bg-base-200 p-2 shadow-lg">
                <li class="menu-title">{{ t(key="settings-language", lang=lang | default(value='sk')) }}</li>
                <li>
                  <button type="submit" name="lang" value="en" class="{% if lang | default(value='sk') == 'en' %}active{% endif %}">
                    {{ t(key="language-en", lang=lang | default(value='sk')) }}
                    {% if lang | default(value='sk') == 'en' %}
                    <span class="ml-auto">✓</span>
                    {% endif %}
                  </button>
                </li>
                <li>
                  <button type="submit" name="lang" value="sk" class="{% if lang | default(value='sk') == 'sk' %}active{% endif %}">
                    {{ t(key="language-sk", lang=lang | default(value='sk')) }}
                    {% if lang | default(value='sk') == 'sk' %}
                    <span class="ml-auto">✓</span>
                    {% endif %}
                  </button>
                </li>
                <li class="menu-title">{{ t(key="settings-theme", lang=lang | default(value='sk')) }}</li>
                <li><button type="button" data-theme-opt="system" onclick="setTheme('system')">{{ t(key="theme-system", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li>
                <li><button type="button" data-theme-opt="light" onclick="setTheme('light')">{{ t(key="theme-light", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li>
                <li><button type="button" data-theme-opt="dark" onclick="setTheme('dark')">{{ t(key="theme-dark", lang=lang | default(value='sk')) }} <span class="opt-check ml-auto hidden">✓</span></button></li>
              </ul>
            </form>
          </div>
        </div>
      </nav>
    </header>
    <div id="nav-backdrop" aria-hidden="true"></div>
    <main class="term-main">
      {% block content %}{% endblock content %}
    </main>
  </body>
</html>
