{% comment %}
PWA head tags for djust - include all PWA-related meta tags and scripts.
{% endcomment %}

<!-- PWA Meta Tags -->
<meta name="theme-color" content="{{ theme_color }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="{{ name }}">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="{{ name }}">

<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json">

<!-- PWA Icons -->
<link rel="apple-touch-icon" href="{{ static_url }}icons/icon-192.png">
<link rel="icon" type="image/png" sizes="192x192" href="{{ static_url }}icons/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="{{ static_url }}icons/icon-512.png">

<!-- Offline Styles -->
<style>
/* Offline/Online body classes */
body.djust-offline [dj-offline-hide],
body:not(.djust-online) [dj-offline-hide] {
    display: none !important;
}

body.djust-online [dj-offline-show] {
    display: none !important;
}

body.djust-offline [dj-offline-disable],
body:not(.djust-online) [dj-offline-disable] {
    pointer-events: none !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Offline indicator animations */
@keyframes djust-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

body.djust-offline .djust-indicator-dot {
    animation: djust-pulse 2s ease-in-out infinite;
}
</style>

<!-- Service Worker Registration -->
<script>
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js', { scope: '/' })
            .then(function(registration) {
                if (window.djust && window.djust.debug) {
                    window.djust.debug('[djust] ServiceWorker registered, scope:', registration.scope);
                }

                // Check for updates periodically
                setInterval(() => {
                    registration.update();
                }, 60 * 60 * 1000); // Every hour

                // Handle updates
                registration.addEventListener('updatefound', () => {
                    const newWorker = registration.installing;
                    newWorker.addEventListener('statechange', () => {
                        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                            if (window.djust && window.djust.offline) {
                                window.djust.offline.onUpdateAvailable(registration);
                            }
                        }
                    });
                });
            })
            .catch(function(error) {
                if (window.djust && window.djust.reportError) {
                    window.djust.reportError('[djust] ServiceWorker registration failed:', error);
                }
            });
    });
}
</script>