<!DOCTYPE html>
<html lang="{{ user.ui_lang if user is defined and user else 'de' }}"
      data-theme="{{ user.theme if user is defined and user and user.theme else 'dark' }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#0f0f0f">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="manifest" href="/static/tv/manifest.json">
    <link rel="apple-touch-icon" href="/static/tv/icons/icon-192.png">
    <link rel="icon" href="/static/icons/favicon.ico">
    <link rel="stylesheet" href="/static/tv/css/tv.css?v={{ v }}">
    <title>{% block title %}VideoKonverter TV{% endblock %}</title>
</head>
<body>
    {% if user is defined and user %}
    <nav class="tv-nav" id="tv-nav">
        <div class="tv-nav-links">
            <a href="/tv/" class="tv-nav-item {% if active == 'home' %}active{% endif %}" data-focusable>{{ t('nav.home') }}</a>
            {% if user.can_view_series %}
            <a href="/tv/series" class="tv-nav-item {% if active == 'series' %}active{% endif %}" data-focusable>{{ t('nav.series') }}</a>
            {% endif %}
            {% if user.can_view_movies %}
            <a href="/tv/movies" class="tv-nav-item {% if active == 'movies' %}active{% endif %}" data-focusable>{{ t('nav.movies') }}</a>
            {% endif %}
            <a href="/tv/search" class="tv-nav-item {% if active == 'search' %}active{% endif %}" data-focusable>{{ t('nav.search') }}</a>
            <a href="/tv/watchlist" class="tv-nav-item {% if active == 'watchlist' %}active{% endif %}" data-focusable>{{ t('nav.watchlist') }}</a>
        </div>
        <div class="tv-nav-right">
            <a href="/tv/profiles" class="tv-nav-profile" data-focusable title="{{ t('profiles.switch') }}">
                <span class="tv-avatar" style="background:{{ user.avatar_color or '#64b5f6' }}">
                    {{ (user.display_name or user.username)[:1]|upper }}
                </span>
            </a>
            <a href="/tv/settings" class="tv-nav-item {% if active == 'settings' %}active{% endif %}" data-focusable>&#9881;</a>
            <a href="/tv/logout" class="tv-nav-item tv-nav-logout" data-focusable>{{ t('nav.logout') }}</a>
        </div>
    </nav>
    {% endif %}

    <main class="tv-main">
        {% block content %}{% endblock %}
    </main>

    <script src="/static/tv/js/tv.js?v={{ v }}"></script>
    {% block scripts %}{% endblock %}

    <script>
        // Tizen iframe: Parent signalisieren dass die App geladen hat
        if (window.parent !== window) {
            try { window.parent.postMessage({type: "vk_app_loaded"}, "*"); } catch(e) {}
        }

        // PWA Service Worker registrieren
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/static/tv/sw.js', {scope: '/tv/'})
                .catch(() => {});
        }
    </script>
</body>
</html>
