{% import "macros/ui.html" as ui %}
<!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="brand", 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>
      // Apply the saved theme before first paint to avoid a flash.
      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 setTheme(t) {
        localStorage.setItem('theme', t);
        applyTheme(t);
        document.dispatchEvent(new CustomEvent('theme:changed', { detail: t }));
      }
      function currentTheme() { return localStorage.getItem('theme') || 'dark'; }
      applyTheme(currentTheme());
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
        if (currentTheme() === 'system') applyTheme('system');
      });
      // Mark the active top-nav link via aria-current (styled with Tailwind).
      function markActiveNav() {
        var path = location.pathname;
        document.querySelectorAll('a[data-nav]').forEach(function (a) {
          var h = a.getAttribute('data-nav');
          var on = h === path || (h !== '/' && path.indexOf(h) === 0);
          if (on) a.setAttribute('aria-current', 'page');
          else a.removeAttribute('aria-current');
        });
      }
      document.addEventListener('DOMContentLoaded', markActiveNav);
      document.addEventListener('htmx:afterSwap', markActiveNav);
      // Sum the quantities stored in the `cart` cookie for the header badge.
      function cartCount() {
        var m = document.cookie.split('; ').find(function (c) { return c.indexOf('cart=') === 0 });
        if (!m) return 0;
        var v = decodeURIComponent(m.split('=')[1] || '');
        if (!v) return 0;
        return v.split(',').reduce(function (s, e) { return s + (parseInt(e.split(':')[1]) || 0) }, 0);
      }
      // True while any other navbar menu (profile / settings / mobile / category
      // toggle) is open — those triggers expose aria-expanded="true". Used to
      // suppress the cart hover preview so menus don't stack/overlap.
      function anyMenuOpen() {
        return !!document.querySelector('header [aria-expanded="true"]');
      }
      // Show a floating toast notification. Usage: toast('Saved').
      // Bridges to the vendored Penguin UI toast component, which listens for a
      // `notify` event with { variant, title, message }.
      function toast(message) {
        window.dispatchEvent(new CustomEvent('notify', { detail: { variant: 'success', message: message } }));
      }
    </script>
    <link href="/static/css/app.css?v=2026-06-16" rel="stylesheet" type="text/css">
    <script defer src="/static/vendor/htmx/htmx-1.9.12.min.js"></script>
    <!-- Alpine Focus plugin (x-trap / $focus) — must load before Alpine core;
         required by the Penguin UI keyboard-accessible dropdowns. -->
    <script defer src="/static/vendor/alpine/alpine-focus-3.14.9.min.js"></script>
    <script defer src="/static/vendor/alpine/alpinejs-3.14.9.min.js"></script>
  </head>
  <body hx-boost="true"
    hx-headers='{"X-CSRF-Token": "{{ csrf_token() }}"}'
    x-data="{ cats: false, lg: window.matchMedia('(min-width: 1024px)').matches }"
    x-init="window.matchMedia('(min-width: 1024px)').addEventListener('change', e => lg = e.matches)"
    class="min-h-screen bg-surface text-on-surface antialiased dark:bg-surface-dark dark:text-on-surface-dark">
    <!-- top utility bar (Kompress design): primary nav on the left, contact /
         sitemap links on the right. Non-sticky — it scrolls away above the
         sticky header. -->
    <div class="hidden border-b border-outline bg-surface text-xs sm:block dark:border-outline-dark dark:bg-surface-dark">
      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-2 text-on-surface dark:text-on-surface-dark">
        <div class="flex items-center gap-5">
          <a href="/" data-nav="/" class="transition hover:text-primary aria-[current=page]:font-semibold aria-[current=page]:text-primary dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-home", lang=lang | default(value='sk')) }}</a>
          <a href="/shop" data-nav="/shop" class="transition hover:text-primary aria-[current=page]:font-semibold aria-[current=page]:text-primary dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</a>
        </div>
        <div class="flex items-center gap-4">
          <a href="/kontakt" class="transition hover:text-primary dark:hover:text-primary-dark">{{ t(key="top-contact", lang=lang | default(value='sk')) }}</a>
          <span class="h-3 w-px bg-outline dark:bg-outline-dark"></span>
          <a href="/mapa-stranky" class="transition hover:text-primary dark:hover:text-primary-dark">{{ t(key="top-sitemap", lang=lang | default(value='sk')) }}</a>
        </div>
      </div>
    </div>

    <header
      class="sticky top-0 z-30 border-b border-outline bg-surface/95 backdrop-blur dark:border-outline-dark dark:bg-surface-dark/95">
      <nav class="mx-auto flex max-w-7xl items-center gap-3 px-4 py-3 sm:gap-4">
        <!-- category sidebar toggle (mobile only) -->
        {% set hamburger_icon = ui::icon(name="hamburger", size="size-6") %}
        {{ ui::icon_button(aria_label=t(key='categories', lang=lang | default(value='sk')), attrs='@click="cats = !cats" :aria-expanded="cats"', extra="lg:hidden", icon=hamburger_icon) }}

        <!-- real KOMPRESS logo from www.e-shop.kompress.sk (hidden on mobile;
             the category drawer carries navigation there) -->
        <a href="/" class="hidden shrink-0 items-center sm:flex">
          <img src="/static/img/logo.svg" alt="{{ t(key='brand', lang=lang | default(value='sk')) }}" width="260" height="52" class="h-8 w-auto dark:rounded-radius dark:bg-white dark:px-1.5 dark:py-0.5" />
        </a>

        <!-- in-header search → existing GET /search (q param). Hidden on small
             screens; the shop page keeps its compact mobile search row there. -->
        <form action="/search" method="get" role="search" class="hidden min-w-0 flex-1 md:flex md:max-w-sm lg:max-w-md">
          {% if selected_category and selected_category != "all" %}
          <input type="hidden" name="category" value="{{ selected_category }}" />
          {% endif %}
          <div class="flex min-w-0 flex-1 overflow-hidden rounded-radius border border-outline transition focus-within:border-primary dark:border-outline-dark dark:focus-within:border-primary-dark">
            <span class="pointer-events-none flex items-center bg-surface-alt pl-3.5 text-on-surface/40 dark:bg-surface-dark-alt dark:text-on-surface-dark/40">{{ ui::icon(name="search", size="size-[18px]") }}</span>
            <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
              placeholder="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
              aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
              class="min-w-0 flex-1 border-0 bg-surface-alt px-2.5 py-2.5 text-sm text-on-surface placeholder:text-on-surface/50 focus:outline-none dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50" />
            <button type="submit" class="shrink-0 bg-cta px-5 text-sm font-bold text-on-cta transition hover:opacity-90 dark:bg-cta-dark dark:text-on-cta-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
          </div>
        </form>

        <!-- right side: kurz + account + cart + settings + mobile toggle -->
        <div class="ml-auto flex items-center gap-2 sm:gap-3">
          <!-- exchange-rate ("kurz") display: the admin-set EUR→alt rate(s).
               Hidden when the store is EUR-only (no enabled alternatives). -->
          {% set nav_cc = currencies() %}
          {% if nav_cc.alts | length > 0 %}
          <div class="hidden items-center gap-2 text-xs text-on-surface/70 dark:text-on-surface-dark/70 sm:flex">
            <span class="font-semibold uppercase tracking-wide">{{ t(key="currency-rate", lang=lang | default(value='sk')) }}</span>
            {% for a in nav_cc.alts %}
            <span class="tabular-nums">1 {{ nav_cc.base.symbol }} = {{ a.rate }} {{ a.symbol }}</span>
            {% endfor %}
          </div>
          {% endif %}
          <!-- account area: admin quick links / customer profile dropdown /
               guest two-line "Vitajte · Prihláste sa" button (Kompress design) -->
          {% if logged_in_admin %}
          <div class="flex items-center gap-3">
            {{ ui::nav_link(label=t(key="admin-title", lang=lang | default(value='sk')), href="/admin/dashboard", data_nav="/admin", variant="warning", attrs='hx-boost="false"') }}
            <form method="post" action="/logout" hx-boost="false">
  {{ ui::csrf_field() }}
              <button type="submit" class="text-sm font-medium text-danger underline-offset-2 transition hover:opacity-75 focus:outline-hidden focus-visible:underline">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
            </form>
          </div>
          {% elif logged_in_customer %}
          {% include "partials/profile_menu.html" %}
          {% else %}
          <a href="/login" data-nav="/login" aria-label="{{ t(key='nav-login', lang=lang | default(value='sk')) }}" class="inline-flex items-center gap-2.5 rounded-radius px-2.5 py-1.5 text-on-surface transition hover:bg-surface-alt dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="size-5 shrink-0" aria-hidden="true"><circle cx="12" cy="8" r="4"></circle><path d="M5 20a7 7 0 0 1 14 0"></path></svg>
            <span class="hidden flex-col items-start leading-tight sm:flex">
              <span class="text-[11px] text-on-surface dark:text-on-surface-dark">{{ t(key="welcome", lang=lang | default(value='sk')) }}</span>
              <span class="text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</span>
            </span>
          </a>
          {% endif %}
          <!-- cart: hover opens an Alza-style mini-cart preview (Penguin
               dropdown-with-hover), lazy-loaded from /partials/cart on each hover
               so it's always fresh. Click still does a full navigation to /cart
               (hx-boost=false; the explicit hx-trigger is mouseenter, so click is
               not an htmx trigger). The badge reads the `cart` cookie client-side. -->
          <div x-data="{ isOpen: false, leaveTimeout: null }"
            x-on:mouseleave="leaveTimeout = setTimeout(() => isOpen = false, 250)"
            x-on:mouseenter="leaveTimeout && clearTimeout(leaveTimeout)"
            x-on:keydown.esc.window="isOpen = false"
            class="relative">
            <a href="/cart" data-nav="/cart" hx-boost="false"
              x-on:mouseenter="if (!anyMenuOpen()) isOpen = true"
              x-data="{ count: 0 }"
              x-init="count = cartCount(); ['htmx:afterSwap', 'htmx:afterRequest'].forEach(function (e) { window.addEventListener(e, function () { count = cartCount() }) })"
              hx-get="/partials/cart" hx-trigger="mouseenter delay:150ms" hx-target="#cart-preview-body" hx-swap="innerHTML"
              aria-label="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
              title="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
              class="flex shrink-0 items-center gap-2.5 rounded-radius border border-outline bg-surface-alt px-2.5 py-1.5 text-on-surface transition hover:border-outline-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:border-outline-dark-strong dark:focus-visible:outline-primary-dark">
              <span class="relative inline-flex text-primary dark:text-primary-dark">
                {{ ui::icon(name="cart", size="size-6") }}
                <span x-show="count > 0" x-cloak x-text="count"
                  class="absolute -right-2 -top-2 inline-flex min-w-[18px] items-center justify-center rounded-full bg-danger px-1 text-[10px] font-bold leading-[18px] text-on-danger ring-2 ring-surface-alt dark:ring-surface-dark-alt"></span>
              </span>
              <span class="hidden flex-col items-start leading-tight sm:flex">
                <span class="text-[11px] text-on-surface dark:text-on-surface-dark">{{ t(key="cart-title", lang=lang | default(value='sk')) }}</span>
                <span class="text-sm font-bold text-on-surface-strong dark:text-on-surface-dark-strong"><span x-text="count">0</span> {{ t(key="cart-units", lang=lang | default(value='sk')) }}</span>
              </span>
            </a>
            <!-- hover preview panel (no id on the panel → not htmx-settled on boosted nav) -->
            <div x-cloak x-show="isOpen" x-transition
              x-on:mouseenter="isOpen = true"
              class="absolute right-0 mt-2 w-80 overflow-hidden rounded-radius border border-outline bg-surface-alt shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt"
              role="dialog" aria-label="{{ t(key='cart-title', lang=lang | default(value='sk')) }}">
              <div id="cart-preview-body">
                <div class="px-4 py-10 text-center text-sm text-on-surface dark:text-on-surface-dark">…</div>
              </div>
            </div>
          </div>

          <!-- settings (language + theme) dropdown (self-contained Alpine state) -->
          {% include "partials/settings_dropdown.html" %}
        </div>
      </nav>
      {% set mobile_search_category = selected_category | default(value="") %}
      {% if on_home | default(value=false) or mobile_search_category %}
      <form action="/search" method="get" role="search" class="px-4 pb-3 md:hidden">
        {% if mobile_search_category and mobile_search_category != "all" %}
        <input type="hidden" name="category" value="{{ mobile_search_category }}" />
        {% endif %}
        <div class="flex min-w-0 overflow-hidden rounded-radius border border-outline transition focus-within:border-primary dark:border-outline-dark dark:focus-within:border-primary-dark">
          <span class="pointer-events-none flex items-center bg-surface-alt pl-3.5 text-on-surface/40 dark:bg-surface-dark-alt dark:text-on-surface-dark/40">{{ ui::icon(name="search", size="size-[18px]") }}</span>
          <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
            placeholder="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
            aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
            class="min-w-0 flex-1 border-0 bg-surface-alt px-2.5 py-2.5 text-sm text-on-surface placeholder:text-on-surface/50 focus:outline-none dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50" />
          <button type="submit" class="shrink-0 bg-cta px-4 text-sm font-bold text-on-cta transition hover:opacity-90 dark:bg-cta-dark dark:text-on-cta-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
        </div>
      </form>
      {% endif %}
    </header>

    <!-- dark overlay behind the category drawer on small screens -->
    <div x-cloak x-show="cats" x-transition.opacity @click="cats = false" aria-hidden="true"
      class="fixed inset-0 z-30 bg-black/50 lg:hidden"></div>

    <div class="mx-auto w-full max-w-7xl px-4 py-8">
      <!-- page breadcrumbs: full width, above the sidebar + content row -->
      {% block breadcrumbs %}{% endblock breadcrumbs %}
      <div class="flex w-full gap-8">
      {% if account_nav %}
      <!-- account-area sidebar: replaces the storefront categories while the
           customer is inside /account/*. -->
      <aside x-cloak x-show="cats || lg" aria-label="{{ t(key='nav-account', lang=lang | default(value='sk')) }}"
        class="fixed inset-y-0 left-0 z-40 w-64 overflow-y-auto border-r border-outline bg-surface-alt p-4 lg:sticky lg:top-24 lg:z-auto lg:w-64 lg:shrink-0 lg:self-start lg:overflow-visible lg:rounded-radius lg:border lg:p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
        <h2 class="px-3 pb-2 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="nav-account", lang=lang | default(value='sk')) }}</h2>
        <ul class="space-y-1">
          <li><a href="/account/orders" data-nav="/account/orders" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="account-orders", lang=lang | default(value='sk')) }}</a></li>
          <li><a href="/account/profile" data-nav="/account/profile" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="profile-title", lang=lang | default(value='sk')) }}</a></li>
          <li><a href="/account/password" data-nav="/account/password" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="account-change-password", lang=lang | default(value='sk')) }}</a></li>
          <li><a href="/account/security" data-nav="/account/security" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="security-title", lang=lang | default(value='sk')) }}</a></li>
        </ul>
        <form method="post" action="/logout" hx-boost="false" class="mt-4 border-t border-outline pt-3 dark:border-outline-dark">
  {{ ui::csrf_field() }}
          <button type="submit" class="block w-full rounded-radius px-3 py-2 text-left text-sm font-medium text-danger underline-offset-2 transition hover:bg-primary/5 focus:outline-hidden focus-visible:underline">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
        </form>
      </aside>
      {% else %}
      <!-- persistent category sidebar (off-canvas drawer on mobile).
           hx-preserve keeps this node across boosted page swaps, so it is
           fetched once (hx-trigger=load) and never reloaded on navigation. -->
      <aside id="category-sidebar" hx-preserve="true"
        x-cloak x-show="cats || lg" aria-label="{{ t(key='categories', lang=lang | default(value='sk')) }}"
        hx-get="/partials/categories" hx-trigger="load"
        class="fixed inset-y-0 left-0 z-40 w-64 overflow-y-auto border-r border-outline bg-surface-alt p-4 lg:sticky lg:top-24 lg:z-auto lg:w-64 lg:shrink-0 lg:self-start lg:overflow-visible lg:rounded-radius lg:border lg:p-3 dark:border-outline-dark dark:bg-surface-dark-alt">
      </aside>
      {% endif %}

      <main class="min-w-0 flex-1">
        {% block content %}{% endblock content %}
      </main>
      </div>
    </div>

    <!-- site footer (Kompress design): Informácie / Účet / Kontakt link columns
         + copyright bar. Static links; reuses the nav i18n keys. -->
    <footer class="border-t border-outline bg-surface dark:border-outline-dark dark:bg-surface-dark">
      <div class="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-4 py-10 sm:w-fit sm:grid-cols-3 sm:gap-x-32 md:gap-x-36 md:px-8 lg:gap-x-40">
        <div class="flex flex-col gap-2.5">
          <div class="text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="footer-info", lang=lang | default(value='sk')) }}</div>
          <a href="/obchodne-podmienky" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="footer-terms", lang=lang | default(value='sk')) }}</a>
          <a href="/o-nas" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="footer-about", lang=lang | default(value='sk')) }}</a>
          <a href="/predajne" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="footer-stores", lang=lang | default(value='sk')) }}</a>
          <a href="/doprava-a-platba" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="footer-shipping", lang=lang | default(value='sk')) }}</a>
        </div>
        <div class="flex flex-col gap-2.5">
          <div class="text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="footer-account", lang=lang | default(value='sk')) }}</div>
          {% if logged_in_customer %}
          <a href="/account/orders" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="footer-orders", lang=lang | default(value='sk')) }}</a>
          <a href="/account/profile" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="nav-profile", lang=lang | default(value='sk')) }}</a>
          {% else %}
          <a href="/login" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</a>
          <a href="/register" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="nav-register", lang=lang | default(value='sk')) }}</a>
          {% endif %}
          <a href="/cart" hx-boost="false" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="cart-title", lang=lang | default(value='sk')) }}</a>
        </div>
        <div class="flex flex-col gap-2.5">
          <div class="text-xs font-bold uppercase tracking-wider text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="footer-contact", lang=lang | default(value='sk')) }}</div>
          <a href="tel:+421903410476" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="hotline", lang=lang | default(value='sk')) }}</a>
          <a href="mailto:info@kompress.sk" class="text-sm text-on-surface transition hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark">{{ t(key="footer-email", lang=lang | default(value='sk')) }}</a>
          <span class="text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="footer-hours", lang=lang | default(value='sk')) }}</span>
        </div>
      </div>
      <div class="border-t border-outline dark:border-outline-dark">
        <div class="mx-auto max-w-7xl px-4 py-4 text-xs text-on-surface md:px-8 dark:text-on-surface-dark">{{ t(key="footer-rights", lang=lang | default(value='sk')) }}</div>
      </div>
    </footer>

    <!-- toast notifications: fire from anywhere with toast('message').
         Adapted from the vendored Penguin UI component
         (penguinui-components/toast-notification/stacking-toast-notification.html):
         the docs-only demo trigger buttons are omitted and the malformed quotes on
         the upstream dismiss-button <svg> tags are fixed. -->
    <div x-data="{
            notifications: [],
            displayDuration: 8000,
            soundEffect: false,
            addNotification({ variant = 'info', sender = null, title = null, message = null}) {
                const id = Date.now()
                const notification = { id, variant, sender, title, message }
                if (this.notifications.length >= 20) {
                    this.notifications.splice(0, this.notifications.length - 19)
                }
                this.notifications.push(notification)
            },
            removeNotification(id) {
                setTimeout(() => {
                    this.notifications = this.notifications.filter(
                        (notification) => notification.id !== id,
                    )
                }, 400);
            },
        }" x-on:notify.window="addNotification({
                variant: $event.detail.variant,
                sender: $event.detail.sender,
                title: $event.detail.title,
                message: $event.detail.message,
            })">

        <div x-on:mouseenter="$dispatch('pause-auto-dismiss')" x-on:mouseleave="$dispatch('resume-auto-dismiss')" class="group pointer-events-none fixed inset-x-8 top-0 z-99 flex max-w-full flex-col gap-2 bg-transparent px-6 py-6 md:bottom-0 md:left-[unset] md:right-0 md:top-[unset] md:max-w-sm">
            <template x-for="(notification, index) in notifications" x-bind:key="notification.id">
                <div>
                    <!-- Info Notification -->
                    <template x-if="notification.variant === 'info'">
                        <div x-data="{ isVisible: false, timeout: null }" x-cloak x-show="isVisible" class="pointer-events-auto relative rounded-radius border border-info bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark" role="alert" x-on:pause-auto-dismiss.window="clearTimeout(timeout)" x-on:resume-auto-dismiss.window=" timeout = setTimeout(() => {(isVisible = false), removeNotification(notification.id) }, displayDuration)" x-init="$nextTick(() => { isVisible = true }), (timeout = setTimeout(() => { isVisible = false, removeNotification(notification.id)}, displayDuration))" x-transition:enter="transition duration-300 ease-out" x-transition:enter-end="translate-y-0" x-transition:enter-start="translate-y-8" x-transition:leave="transition duration-300 ease-in" x-transition:leave-end="-translate-x-24 opacity-0 md:translate-x-24" x-transition:leave-start="translate-x-0 opacity-100">
                            <div class="flex w-full items-center gap-2.5 bg-info/10 rounded-radius p-4 transition-all duration-300">
                                <div class="rounded-full bg-info/15 p-0.5 text-info" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <h3 x-cloak x-show="notification.title" class="text-sm font-semibold text-info" x-text="notification.title"></h3>
                                    <p x-cloak x-show="notification.message" class="text-pretty text-sm" x-text="notification.message"></p>
                                </div>
                                <button type="button" class="ml-auto" aria-label="dismiss notification" x-on:click="(isVisible = false), removeNotification(notification.id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-5 shrink-0" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>
                    <!-- Success Notification -->
                    <template x-if="notification.variant === 'success'">
                        <div x-data="{ isVisible: false, timeout: null }" x-cloak x-show="isVisible" class="pointer-events-auto relative rounded-radius border border-success bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark" role="alert" x-on:pause-auto-dismiss.window="clearTimeout(timeout)" x-on:resume-auto-dismiss.window=" timeout = setTimeout(() => {(isVisible = false), removeNotification(notification.id) }, displayDuration)" x-init="$nextTick(() => { isVisible = true }), (timeout = setTimeout(() => { isVisible = false, removeNotification(notification.id)}, displayDuration))" x-transition:enter="transition duration-300 ease-out" x-transition:enter-end="translate-y-0" x-transition:enter-start="translate-y-8" x-transition:leave="transition duration-300 ease-in" x-transition:leave-end="-translate-x-24 opacity-0 md:translate-x-24" x-transition:leave-start="translate-x-0 opacity-100">
                            <div class="flex w-full items-center gap-2.5 bg-success/10 rounded-radius p-4 transition-all duration-300">
                                <div class="rounded-full bg-success/15 p-0.5 text-success" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <h3 x-cloak x-show="notification.title" class="text-sm font-semibold text-success" x-text="notification.title"></h3>
                                    <p x-cloak x-show="notification.message" class="text-pretty text-sm" x-text="notification.message"></p>
                                </div>
                                <button type="button" class="ml-auto" aria-label="dismiss notification" x-on:click="(isVisible = false), removeNotification(notification.id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-5 shrink-0" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>
                    <!-- Warning Notification -->
                    <template x-if="notification.variant === 'warning'">
                        <div x-data="{ isVisible: false, timeout: null }" x-cloak x-show="isVisible" class="pointer-events-auto relative rounded-radius border border-warning bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark" role="alert" x-on:pause-auto-dismiss.window="clearTimeout(timeout)" x-on:resume-auto-dismiss.window=" timeout = setTimeout(() => {(isVisible = false), removeNotification(notification.id) }, displayDuration)" x-init="$nextTick(() => { isVisible = true }), (timeout = setTimeout(() => { isVisible = false, removeNotification(notification.id)}, displayDuration))" x-transition:enter="transition duration-300 ease-out" x-transition:enter-end="translate-y-0" x-transition:enter-start="translate-y-8" x-transition:leave="transition duration-300 ease-in" x-transition:leave-end="-translate-x-24 opacity-0 md:translate-x-24" x-transition:leave-start="translate-x-0 opacity-100">
                            <div class="flex w-full items-center gap-2.5 bg-warning/10 rounded-radius p-4 transition-all duration-300">
                                <div class="rounded-full bg-warning/15 p-0.5 text-warning" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <h3 x-cloak x-show="notification.title" class="text-sm font-semibold text-warning" x-text="notification.title"></h3>
                                    <p x-cloak x-show="notification.message" class="text-pretty text-sm" x-text="notification.message"></p>
                                </div>
                                <button type="button" class="ml-auto" aria-label="dismiss notification" x-on:click="(isVisible = false), removeNotification(notification.id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-5 shrink-0" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>
                    <!-- Danger Notification -->
                    <template x-if="notification.variant === 'danger'">
                        <div x-data="{ isVisible: false, timeout: null }" x-cloak x-show="isVisible" class="pointer-events-auto relative rounded-radius border border-danger bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark" role="alert" x-on:pause-auto-dismiss.window="clearTimeout(timeout)" x-on:resume-auto-dismiss.window=" timeout = setTimeout(() => {(isVisible = false), removeNotification(notification.id) }, displayDuration)" x-init="$nextTick(() => { isVisible = true }), (timeout = setTimeout(() => { isVisible = false, removeNotification(notification.id)}, displayDuration))" x-transition:enter="transition duration-300 ease-out" x-transition:enter-end="translate-y-0" x-transition:enter-start="translate-y-8" x-transition:leave="transition duration-300 ease-in" x-transition:leave-end="-translate-x-24 opacity-0 md:translate-x-24" x-transition:leave-start="translate-x-0 opacity-100">
                            <div class="flex w-full items-center gap-2.5 bg-danger/10 rounded-radius p-4 transition-all duration-300">
                                <div class="rounded-full bg-danger/15 p-0.5 text-danger" aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="flex flex-col gap-2">
                                    <h3 x-cloak x-show="notification.title" class="text-sm font-semibold text-danger" x-text="notification.title"></h3>
                                    <p x-cloak x-show="notification.message" class="text-pretty text-sm" x-text="notification.message"></p>
                                </div>
                                <button type="button" class="ml-auto" aria-label="dismiss notification" x-on:click="(isVisible = false), removeNotification(notification.id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-5 shrink-0" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>
                    <!-- Message Notification -->
                    <template x-if="notification.variant === 'message'">
                        <div x-data="{ isVisible: false, timeout: null }" x-cloak x-show="isVisible" class="pointer-events-auto relative rounded-radius border border-outline bg-surface text-on-surface dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark" role="alert" x-on:pause-auto-dismiss.window="clearTimeout(timeout)" x-on:resume-auto-dismiss.window="timeout = setTimeout(() => { isVisible = false, removeNotification(notification.id) }, displayDuration)" x-init="$nextTick(() => { isVisible = true }), (timeout = setTimeout(() => { isVisible = false, removeNotification(notification.id) }, displayDuration))" x-transition:enter="transition duration-300 ease-out" x-transition:enter-end="translate-y-0" x-transition:enter-start="translate-y-8" x-transition:leave="transition duration-300 ease-in" x-transition:leave-end="-translate-x-24 opacity-0 md:translate-x-24" x-transition:leave-start="translate-x-0 opacity-100">
                            <div class="flex w-full rounded-radius items-center gap-2.5 bg-surface-alt p-4 transition-all duration-300 dark:bg-surface-dark-alt">
                                <div class="flex w-full items-center gap-2.5">
                                    <img x-cloak x-show="notification.sender.avatar" class="mr-2 size-12 rounded-full" alt="avatar" aria-hidden="true" x-bind:src="notification.sender.avatar"/>
                                    <div class="flex flex-col items-start gap-2">
                                        <h3 x-cloak x-show="notification.sender.name" class="text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong" x-text="notification.sender.name"></h3>
                                        <p x-cloak x-show="notification.message" class="text-pretty text-sm" x-text="notification.message"></p>
                                        <div class="flex items-center gap-4">
                                            <button type="button" class="whitespace-nowrap bg-transparent text-center text-sm font-bold tracking-wide text-primary transition hover:opacity-75 active:opacity-100 dark:text-primary-dark">Reply</button>
                                            <button type="button" class="whitespace-nowrap bg-transparent text-center text-sm font-bold tracking-wide text-on-surface transition hover:opacity-75 active:opacity-100 dark:text-on-surface-dark" x-on:click=" (isVisible = false), setTimeout(() => { removeNotification(notification.id) }, 400)">Dismiss</button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="ml-auto" aria-label="dismiss notification" x-on:click="(isVisible = false), removeNotification(notification.id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-5 shrink-0" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>
  </body>
</html>
