@extends('layouts.app')

@php
    /* --------------------------------------------------------------
       Anzeige-Sprache aus dem ersten URL-Segment (/de|/en); Standard = de.
       Route::dispatch biegt request() nicht um -> nur über segment(1).
       -------------------------------------------------------------- */
    $siteLocale = in_array(request()->segment(1), ['de', 'en'], true) ? request()->segment(1) : 'de';
    $en = $siteLocale === 'en';
    $t  = fn ($de, $enText) => $en ? $enText : $de;
    $lp = $en ? 'en/' : '';

    $items = $products ?? [];
    $count = count($items);

    /* Kurze, pro-Tool individuelle Beschreibungen (DE | EN).
       Verhindert die identische Zeile auf jeder Kachel. Fallback = generisch. */
    $winDesc = [
        'kotsch-cleaner'        => ['System aufräumen & Ballast entfernen.',  'Clean up the system & remove clutter.'],
        'cleaner'               => ['System aufräumen & Ballast entfernen.',  'Clean up the system & remove clutter.'],
        'commander'             => ['Zweispaltiger Datei-Manager im Retro-Look.', 'Dual-pane file manager, retro style.'],
        'taskmanager'           => ['Prozesse & Auslastung live im Blick.',    'Watch processes & load in real time.'],
        'codeeditor'            => ['Leichter Code-Editor mit Syntax-Highlight.', 'Lightweight code editor with highlighting.'],
        'notes'                 => ['Schnelle Notizen, direkt im Fenster.',    'Quick notes, right inside the window.'],
        'lumina-stream'         => ['Medien-Streaming-Oberfläche als Demo.',   'Media-streaming interface demo.'],
        'pruefmittel-manager'   => ['Prüfmittel verwalten & Fristen tracken.', 'Manage test equipment & track due dates.'],
        'de-companion'          => ['Begleiter-Tool für den Alltag.',          'A companion tool for everyday tasks.'],
    ];
    $winDescFallback = ['Eigenes Windows-Tool — Demo öffnen.', 'Custom Windows tool — open the demo.'];

    /* Funktions-Kategorie je Tool (Header-Filter + Tabs). Fallback = productivity. */
    $winCat = [
        'kotsch-cleaner' => 'system', 'cleaner' => 'system', 'commander' => 'system', 'taskmanager' => 'system',
        'codeeditor' => 'productivity', 'notes' => 'productivity', 'pruefmittel-manager' => 'productivity', 'de-companion' => 'productivity',
        'lumina-stream' => 'media',
    ];
@endphp

@section('title', $t('Windows-Tools & Apps | Arthur Kotsch', 'Windows Tools & Apps | Arthur Kotsch'))
@section('meta_description', $t('Eigene Windows-Tools und Experimente von Arthur Kotsch — jede App als Live-Vorschau im Mini-Fenster, direkt im Browser bedienbar.', 'Custom Windows tools and experiments by Arthur Kotsch — every app as a live preview inside a mini window, runnable right in the browser.'))

@section('content')

    {{-- =============================================================
         HERO
         ============================================================= --}}
    <header class="win-hero">
        <div class="win-hero-inner">
            <span class="win-kicker">
                <i class="fa-brands fa-windows" aria-hidden="true"></i>
                {{ $t('Windows · Desktop-Software', 'Windows · Desktop Software') }}
            </span>
            <h1 class="win-h1">
                {{ $t('Windows-Tools,', 'Windows tools,') }}
                <span>{{ $t('live im Fenster.', 'live in the window.') }}</span>
            </h1>
            <p class="win-lead">
                {{ $t('Eigene Desktop-Tools und Experimente für Windows — jede Kachel zeigt die App als echte', 'Custom desktop tools and experiments for Windows — every tile shows the app as a real') }}
                <strong>{{ $t('Live-Vorschau', 'live preview') }}</strong>{{ $t(', direkt im Browser.', ', right in your browser.') }}
            </p>
            @if($count > 0)
                @php $liveLabel = $t($count === 1 ? 'App live' : 'Apps live', $count === 1 ? 'app live' : 'apps live'); @endphp
                <span class="win-livecount">
                    <span class="win-dot" aria-hidden="true"></span>
                    {{ $count }} {{ $liveLabel }}
                </span>
            @endif
        </div>
    </header>

    {{-- =============================================================
         LIVE-PREVIEW GRID
         ============================================================= --}}
    <section class="win-listing" aria-labelledby="win-grid-heading">
        @if($count > 0)
            {{-- Abschnitts-Überschrift hält die Hierarchie lückenlos (h1 -> h2 -> h3). --}}
            <h2 id="win-grid-heading" class="win-section-h2">{{ $t('Alle Tools', 'All tools') }}</h2>

            {{-- Suche + Funktions-Kategorien (synchron mit den Header-Links via #cat=). --}}
            <div class="win-toolbar">
                <div class="win-search">
                    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                    <input type="search" id="winSearch" placeholder="{{ $t('Tool suchen …', 'Search tools …') }}" autocomplete="off" aria-label="{{ $t('Tool suchen', 'Search tools') }}">
                </div>
                <div class="win-tabs" id="winCatTabs" role="tablist">
                    <button type="button" class="is-active" data-cat="all">{{ $t('Alle', 'All') }}</button>
                    <button type="button" data-cat="system">System</button>
                    <button type="button" data-cat="productivity">{{ $t('Produktivität', 'Productivity') }}</button>
                    <button type="button" data-cat="media">{{ $t('Medien', 'Media') }}</button>
                </div>
            </div>

            <div class="win-grid">
                @foreach($items as $product)
                    @php
                        $slug = $product['slug'];
                        $name = $product['name'];
                        $cat  = $winCat[$slug] ?? 'productivity';
                        $nameLower = \Illuminate\Support\Str::lower($name);
                        $href = '/' . $lp . 'windows/' . $slug;
                        /* Vorschau ebenfalls lokalisiert, damit die EN-Seite keine DE-Vorschau einbettet. */
                        $previewSrc = '/' . $lp . 'windows/' . $slug . '?view=monitor';
                        $ariaLabel  = $t('Details zu', 'Details for') . ' ' . $name;
                        $descPair   = $winDesc[$slug] ?? $winDescFallback;
                        $desc       = $t($descPair[0], $descPair[1]);
                        $previewTitle = $t('Live-Vorschau von', 'Live preview of') . ' ' . $name;
                    @endphp
                    <article class="win-card reveal" data-cat="{{ $cat }}" data-name="{{ $nameLower }}">
                        <a href="{{ $href }}" class="win-card-link" aria-label="{{ $ariaLabel }}">

                            {{-- Fluent-Fensterrahmen mit LIVE-Vorschau --}}
                            <div class="win-window">
                                <div class="win-titlebar">
                                    <span class="win-titlebar-app">
                                        <i class="fa-regular fa-window-maximize" aria-hidden="true"></i>
                                        {{ $name }}
                                    </span>
                                    {{-- Windows-11 Caption-Buttons (rechteckig, Glyphen) — bewusst KEINE macOS-Punkte. --}}
                                    <span class="win-caption" aria-hidden="true">
                                        <span class="win-cap-btn win-cap-min"><i class="fa-solid fa-minus"></i></span>
                                        <span class="win-cap-btn win-cap-max"><i class="fa-regular fa-square"></i></span>
                                        <span class="win-cap-btn win-cap-close"><i class="fa-solid fa-xmark"></i></span>
                                    </span>
                                </div>
                                <div class="win-screen">
                                    {{-- Klick-Schutz: Overlay hält die Karte klickbar, das Iframe ist nur Vorschau --}}
                                    <div class="win-screen-overlay" aria-hidden="true"></div>
                                    <iframe
                                        src="{{ $previewSrc }}"
                                        title="{{ $previewTitle }}"
                                        loading="lazy"
                                        tabindex="-1"
                                        aria-hidden="true"></iframe>
                                </div>
                            </div>

                            {{-- Info --}}
                            <div class="win-info">
                                <span class="win-status">
                                    <span class="win-status-dot" aria-hidden="true"></span>
                                    {{ $t('Demo · Live-Vorschau', 'Demo · live preview') }}
                                </span>
                                <h3 class="win-name">{{ $name }}</h3>
                                <p class="win-desc">{{ $desc }}</p>
                                <span class="win-action">
                                    {{ $t('Details ansehen', 'View details') }}
                                    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                                </span>
                            </div>
                        </a>
                    </article>
                @endforeach
            </div>
            <div class="win-noresults" id="winNoResults" hidden>
                <i class="fa-regular fa-face-frown" aria-hidden="true"></i>
                <p>{{ $t('Kein Tool gefunden.', 'No tools found.') }}</p>
            </div>
        @else
            <div class="win-empty">
                <i class="fa-regular fa-window-restore" aria-hidden="true"></i>
                <h2>{{ $t('Noch keine Module', 'No modules yet') }}</h2>
                <p>{{ $t('Hier erscheinen die Windows-Tools, sobald sie verfügbar sind.', 'Windows tools will appear here once they are available.') }}</p>
            </div>
        @endif
    </section>

    <style>
        /* Space Grotesk nur für die Überschriften dieser Seite (Windows-Identität) */
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

        .win-hero,
        .win-listing {
            --win-blue: #1B6CF2;
            --win-blue-dark: #0F4FBF;
            --win-ink: #0c1633;
            --win-muted: #5a647a;
            --win-line: #e4e8f2;
            --win-mica: #f4f6fc;
            --win-mica-2: #eaeff8;
        }

        /* ---------------- HERO ---------------- */
        .win-hero {
            position: relative;
            padding: 112px 8% 56px;
            text-align: center;
            background:
                radial-gradient(120% 80% at 50% -10%, rgba(27,108,242,.10) 0%, rgba(27,108,242,0) 55%),
                #ffffff;
            overflow: hidden;
        }
        /* dezentes Window-Pane / Fluent-Raster im Hintergrund */
        .win-hero::before {
            content: "";
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(27,108,242,.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(27,108,242,.05) 1px, transparent 1px);
            background-size: 56px 56px;
            -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
                    mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
            pointer-events: none;
        }
        .win-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }

        .win-kicker {
            display: inline-flex; align-items: center; gap: .5rem;
            padding: 7px 14px; border-radius: 999px;
            background: rgba(27,108,242,.10);
            color: var(--win-blue-dark);
            font-size: .68rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
        }
        .win-h1 {
            font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
            font-size: clamp(2.1rem, 5.2vw, 3.6rem);
            font-weight: 700; line-height: 1.05; letter-spacing: -1.5px;
            color: var(--win-ink); margin: 18px 0 0;
        }
        .win-h1 span { color: var(--win-blue); }
        .win-lead {
            max-width: 560px; margin: 16px auto 0;
            color: var(--win-muted); font-size: 1.02rem; line-height: 1.55;
        }
        .win-lead strong { color: var(--win-ink); font-weight: 700; }

        /* Live-Zähler — bewusst NICHT uppercase-tracked (nur der Kicker trägt das). */
        .win-livecount {
            display: inline-flex; align-items: center; gap: .5rem;
            margin-top: 22px; padding: 7px 15px; border-radius: 999px;
            background: #eef5ff; border: 1px solid #cfe0ff;
            color: var(--win-blue-dark); font-weight: 700; font-size: .82rem;
        }
        .win-dot {
            width: .55rem; height: .55rem; border-radius: 50%;
            background: var(--win-blue); animation: winPulse 2.2s ease-out infinite;
        }
        @keyframes winPulse {
            0%   { box-shadow: 0 0 0 0 rgba(27,108,242,.5); }
            70%  { box-shadow: 0 0 0 8px rgba(27,108,242,0); }
            100% { box-shadow: 0 0 0 0 rgba(27,108,242,0); }
        }

        /* ---------------- LISTING ---------------- */
        .win-listing {
            padding: 40px 8% 110px;
            background:
                linear-gradient(180deg, #ffffff 0%, var(--win-mica) 140px);
            min-height: 50vh;
        }
        .win-section-h2 {
            max-width: 1240px; margin: 0 auto 26px;
            font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
            font-size: 1.05rem; font-weight: 600; letter-spacing: -.2px;
            color: var(--win-muted);
        }
        /* ---------------- TOOLBAR (Suche + Kategorien) ---------------- */
        .win-toolbar {
            max-width: 1240px; margin: 0 auto 26px;
            display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
        }
        .win-search { position: relative; flex: 1 1 260px; max-width: 420px; }
        .win-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8b95ab; font-size: .9rem; }
        .win-search input {
            width: 100%; height: 46px; padding: 0 16px 0 42px;
            border-radius: 12px; border: 1px solid var(--win-line); background: #fff;
            font-size: .95rem; color: var(--win-ink); outline: none;
            transition: border-color .2s, box-shadow .2s;
        }
        .win-search input:focus { border-color: var(--win-blue); box-shadow: 0 0 0 4px rgba(27,108,242,.14); }
        .win-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--win-mica-2); }
        .win-tabs button {
            appearance: none; border: 0; background: transparent; cursor: pointer;
            padding: 9px 16px; min-height: 38px; border-radius: 9px; font: inherit; font-size: .86rem; font-weight: 600;
            color: #46506a; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s;
        }
        .win-tabs button.is-active { background: #fff; color: var(--win-blue); box-shadow: 0 4px 12px -6px rgba(15,30,80,.3); }
        .win-noresults { max-width: 1240px; margin: 30px auto 0; text-align: center; color: var(--win-muted); padding: 60px 0; }
        .win-noresults i { font-size: 2.4rem; color: #b9c2d8; }
        .win-noresults p { margin: 14px 0 0; font-weight: 600; }

        .win-grid {
            max-width: 1240px; margin: 0 auto;
            display: grid; gap: 34px;
            grid-template-columns: minmax(0, 1fr);
        }
        @media (min-width: 720px)  { .win-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (min-width: 1080px) { .win-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
        .win-card { min-width: 0; }
        .win-name, .win-desc { overflow-wrap: anywhere; }

        /* ---------------- CARD ---------------- */
        .win-card { display: flex; }
        .win-card-link {
            display: flex; flex-direction: column; width: 100%;
            text-decoration: none; color: inherit;
            background: #ffffff;
            border: 1px solid var(--win-line);
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 18px 40px -30px rgba(15,30,80,.55);
            transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
        }
        .win-card-link:hover,
        .win-card-link:focus-visible {
            transform: translateY(-8px);
            border-color: rgba(27,108,242,.45);
            box-shadow: 0 40px 70px -32px rgba(27,108,242,.42);
        }
        .win-card-link:focus-visible {
            outline: 3px solid var(--win-blue);
            outline-offset: 3px;
        }

        /* ---- Fluent-Fenster (Mica-Chrome + Live-Vorschau) ----
           Konzentrische Radien: 14px Außenrand - 14px Inset = 8px Innenradius. */
        .win-window {
            margin: 14px 14px 0;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #d6deef;
            background: var(--win-mica);
            box-shadow: 0 12px 26px -18px rgba(15,30,80,.5);
        }
        .win-titlebar {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px; height: 34px; padding: 0 4px 0 12px;
            background: linear-gradient(180deg, #ffffff, #eef2fa);
            border-bottom: 1px solid #dde4f1;
        }
        .win-titlebar-app {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: .76rem; font-weight: 700; color: #3a455f;
            min-width: 0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .win-titlebar-app i { color: var(--win-blue); font-size: .72rem; flex: 0 0 auto; }

        /* Windows-11 Caption-Controls: rechteckige Glyph-Buttons, bündig rechts.
           Close wird erst beim Hover rot — im Ruhezustand neutral. */
        .win-caption { display: inline-flex; align-items: stretch; flex: 0 0 auto; height: 100%; }
        .win-cap-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 100%;
            color: #5a647a; font-size: .6rem;
            border-radius: 5px;
            transition: background .18s ease, color .18s ease;
        }
        .win-card-link:hover .win-cap-min,
        .win-card-link:hover .win-cap-max { background: rgba(15,30,80,.07); }
        .win-card-link:hover .win-cap-close { background: #e81123; color: #ffffff; }

        .win-screen {
            position: relative;
            aspect-ratio: 16 / 9;
            /* Helles Mica-Placeholder mit dezentem Fluent-Shimmer statt dunklem Flash */
            background:
                linear-gradient(135deg, var(--win-mica) 0%, var(--win-mica-2) 100%);
            overflow: hidden;
        }
        .win-screen::before {
            content: "";
            position: absolute; inset: 0; z-index: 0;
            background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
            background-size: 220% 100%;
            animation: winShimmer 2.4s ease-in-out infinite;
        }
        @keyframes winShimmer {
            0%   { background-position: 140% 0; }
            100% { background-position: -40% 0; }
        }
        .win-screen iframe {
            position: absolute; top: 0; left: 0; z-index: 1;
            width: 1200px; height: 675px;   /* 16:9 -> exakt skalierbar */
            border: 0;
            background: var(--win-mica);
            pointer-events: none;
            transform-origin: top left;
        }
        /* Klick-Schutz: hält die Karte klickbar */
        .win-screen-overlay {
            position: absolute; inset: 0; z-index: 5;
        }

        /* ---- Info ---- */
        .win-info { padding: 20px 22px 24px; display: flex; flex-direction: column; }
        /* Status: ruhiger Sentence-Look (kein zweites uppercase-800-Label). Grün auf 4.5:1. */
        .win-status {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: .74rem; font-weight: 700; letter-spacing: .1px;
            color: #157a4c;
        }
        .win-status-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18);
        }
        .win-name {
            font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
            font-size: 1.25rem; font-weight: 700; letter-spacing: -.4px;
            color: var(--win-ink); margin: 12px 0 0;
        }
        .win-desc {
            color: var(--win-muted); font-size: .9rem; line-height: 1.5;
            margin: 7px 0 0;
        }
        /* Action: gleiche Akzentfarbe, aber ohne uppercase-tracking. */
        .win-action {
            display: inline-flex; align-items: center; gap: 9px;
            margin-top: 18px;
            font-size: .85rem; font-weight: 700; letter-spacing: .1px;
            color: var(--win-blue);
        }
        .win-action i { transition: transform .3s ease; }
        .win-card-link:hover .win-action i,
        .win-card-link:focus-visible .win-action i { transform: translateX(4px); }

        /* ---------------- EMPTY ---------------- */
        .win-empty {
            max-width: 560px; margin: 30px auto; text-align: center;
            padding: 70px 24px; color: var(--win-muted);
        }
        .win-empty i { font-size: 3rem; color: #b9c2d8; }
        .win-empty h2 {
            font-family: 'Space Grotesk', system-ui, sans-serif;
            margin: 18px 0 6px; color: var(--win-ink);
        }

        @media (max-width: 720px) {
            .win-hero { padding: 96px 22px 44px; }
            .win-listing { padding: 30px 18px 88px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .win-card-link, .win-action i, .win-dot,
            .win-cap-btn { transition: none; animation: none; }
            .win-screen::before { animation: none; }
        }
    </style>

    <script>
        /* Skaliert jedes Vorschau-Iframe (1200px breit) auf die Containerbreite.
           Beibehalten & robuster gemacht: ein ResizeObserver pro .win-screen fängt
           jeden Reflow ab (Font-Swap, Lazy-Load, Resize), nicht nur load/resize. */
        (function () {
            function scaleOne(screen) {
                var iframe = screen.querySelector('iframe');
                if (!iframe) return;
                var w = screen.clientWidth;
                if (!w) return;
                iframe.style.transform = 'scale(' + (w / 1200) + ')';
            }

            function scaleMonitorIframes() {
                document.querySelectorAll('.win-screen').forEach(scaleOne);
            }
            // Global verfügbar machen (Original-API beibehalten).
            window.scaleMonitorIframes = scaleMonitorIframes;

            function init() {
                var screens = document.querySelectorAll('.win-screen');
                scaleMonitorIframes();

                if ('ResizeObserver' in window) {
                    var ro = new ResizeObserver(function (entries) {
                        entries.forEach(function (e) { scaleOne(e.target); });
                    });
                    screens.forEach(function (s) { ro.observe(s); });
                } else {
                    // Fallback für ältere Browser
                    window.addEventListener('resize', scaleMonitorIframes);
                }

                // Lazy-Iframes neu skalieren, sobald ihr Inhalt geladen ist.
                screens.forEach(function (s) {
                    var iframe = s.querySelector('iframe');
                    if (iframe) iframe.addEventListener('load', function () { scaleOne(s); });
                });
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', init);
            } else {
                init();
            }
            // Sicherheitsnetz nach vollständigem Laden (Webfonts etc.).
            window.addEventListener('load', scaleMonitorIframes);
        })();

        /* Kategorie- + Such-Filter (synchron mit den Header-Links via #cat=). */
        (function () {
            var search = document.getElementById('winSearch');
            var grid = document.querySelector('.win-grid');
            if (!grid) return;
            var cards = Array.prototype.slice.call(grid.querySelectorAll('.win-card'));
            var noRes = document.getElementById('winNoResults');
            var tabs = Array.prototype.slice.call(document.querySelectorAll('#winCatTabs button'));
            var CATS = ['system', 'productivity', 'media'];
            var fCat = 'all', fText = '';

            function apply() {
                var shown = 0;
                cards.forEach(function (c) {
                    var okC = fCat === 'all' || c.getAttribute('data-cat') === fCat;
                    var okT = !fText || (c.getAttribute('data-name') || '').indexOf(fText) !== -1;
                    var show = okC && okT;
                    c.style.display = show ? '' : 'none';
                    if (show) shown++;
                });
                if (noRes) noRes.hidden = shown > 0;
                // Sichtbar gewordene Iframes neu auf Containerbreite skalieren.
                if (window.scaleMonitorIframes) window.scaleMonitorIframes();
            }
            function setCat(val, pushHash) {
                fCat = CATS.indexOf(val) !== -1 ? val : 'all';
                tabs.forEach(function (b) { b.classList.toggle('is-active', b.getAttribute('data-cat') === fCat); });
                if (pushHash) {
                    if (fCat === 'all') history.replaceState(null, '', location.pathname + location.search);
                    else location.hash = 'cat=' + fCat;
                }
                apply();
            }
            function readHash() {
                var m = (location.hash || '').match(/cat=(system|productivity|media)/);
                setCat(m ? m[1] : 'all', false);
            }
            if (search) search.addEventListener('input', function (e) { fText = e.target.value.toLowerCase().trim(); apply(); });
            tabs.forEach(function (b) { b.addEventListener('click', function () { setCat(b.getAttribute('data-cat'), true); }); });
            window.addEventListener('hashchange', readHash);
            readHash();
        })();
    </script>
@endsection