@page "/"
@namespace WerksverkaufScanner.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <title>ScannerPilot</title>

    <!-- wichtig für Mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="theme-color" content="#0d6efd" />

    <!-- Bootstrap CSS (CDN) -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          crossorigin="anonymous" />

    <!-- Deine globalen Styles (falls vorhanden) -->
    <link rel="stylesheet" href="css/site.css" />

    <!-- WICHTIG: Blazor Scoped CSS der Assembly
         (Name = dein Projektname; hier: WerksverkaufScanner) -->
    <link rel="stylesheet" href="WerksverkaufScanner.styles.css" />

    <!-- PWA Icons/Manifest (optional) -->
    <link rel="manifest" href="/manifest.webmanifest">
    <link rel="icon" sizes="192x192" href="/icons/icon-192.png">
    <link rel="apple-touch-icon" href="/icons/icon-192.png">
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="Server" />
    </app>

    <!-- Blazor Server -->
    <script src="_framework/blazor.server.js"></script>

    <!-- Bootstrap BUNDLE (Pflicht für Offcanvas/Collapse) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            crossorigin="anonymous"></script>

    <script>
        // Service Worker registrieren (optional)
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service-worker.js');
        }
    </script>
    <script>
        function hideOffcanvas(selector) {
          try {
            var el = document.querySelector(selector);
            if (!el || !window.bootstrap) return;
            var inst = bootstrap.Offcanvas.getOrCreateInstance(el);
            inst.hide();
          } catch (e) { console.warn('hideOffcanvas failed', e); }
        }
    </script>
</body>
</html>
