<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Movies &amp; TV Shows</title>
    <style>
    body {
        background: black;
        color: rgba(255,255,255,.73);
        font-size: .95em;
        font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",'Open Sans',sans-serif;
        margin: 100;
        padding: 0;
        overflow: hidden;
    }
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #f1f1f1;
        z-index: 999; /* Garantit que la barre de navigation est affichée au-dessus de l'iFrame */
    }

    #navbar a {
        float: left;
        display: block;
        color: #333;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 18px;
    }

    #navbar a:hover {
        background-color: #ddd;
    }

    #navbar a.active {
        background-color: #555;
        color: #fff;
    }

    #mainBlock {
        position: fixed;
        top: 58px; /* Hauteur de la barre de navigation + espace de 10 px */
        left: 0;
        right: 0;
        bottom: 0;
        border: none;
        width: 100vw;
        height: calc(100vh - 58px);
        display: block;
    }

    #lang-selector {
        float: right;
        position: relative;
        margin: 9px 16px;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
    }

    #lang-current {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        background: #ddd;
        border: 1px solid #999;
        color: #333;
        white-space: nowrap;
    }

    #lang-options {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        background: #f1f1f1;
        border: 1px solid #999;
        z-index: 1000;
        color: #333;
    }

    #lang-options div {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        white-space: nowrap;
    }

    #lang-options div:hover {
        background: #ddd;
    }

    #lang-selector img {
        height: 16px;
        width: auto;
        display: block;
    }

    #lang-reset {
        float: right;
        display: none;
        align-items: center;
        margin: 9px 4px 9px 0;
        padding: 4px 8px;
        background: #ddd;
        border: 1px solid #999;
        color: #333;
        font-size: 16px;
        cursor: pointer;
        line-height: 1;
    }

    #lang-reset:hover {
        background: #bbb;
    }
    </style>
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <script src="i18n.js"></script>
</head>
<body>
    <script>
        function changeContent(url, el) {
            document.getElementById("mainBlock").src = url;
            document.querySelectorAll('#navbar a').forEach(a => a.classList.remove('active'));
            el.classList.add('active');
        }
        window.addEventListener('message', function(e) {
            if (e.data && e.data.type === 'pb-lang-request') {
                e.source.postMessage({ type: 'pb-lang', lang: detectLanguage() }, '*');
            }
        });
    </script>
  <div id="navbar">
    <a href="#" onclick="changeContent('movielist.html', this)" data-i18n="nav-movies">Movies</a>
    <a href="#" onclick="changeContent('tvshows.html', this)" data-i18n="nav-tvshows">TV Shows</a>
    <div id="lang-reset" title="Reset to browser language">↺</div>
    <div id="lang-selector">
      <div id="lang-current"></div>
      <div id="lang-options"></div>
    </div>
  </div>
  <script>
    const langFlags = {
        en: 'flag_en.png',
        fr: 'flag_fr.png',
        de: 'flag_de.png',
        es: 'flag_es.png',
        it: 'flag_it.png',
        ru: 'flag_ru.png',
        zh: 'flag_zh.png',
        vi: 'flag_vi.png',
    };

    function makeLangEntry(lang, withText) {
        const div = document.createElement('div');
        if (langFlags[lang]) {
            const img = document.createElement('img');
            img.src = langFlags[lang];
            img.alt = lang;
            div.appendChild(img);
        }
        if (withText !== false) {
            div.appendChild(document.createTextNode(lang.toUpperCase()));
        }
        return div;
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('#navbar a').classList.add('active');

        const current = document.getElementById('lang-current');
        const options = document.getElementById('lang-options');
        const reset   = document.getElementById('lang-reset');
        const iframe  = document.getElementById('mainBlock');

        function updateResetButton() {
            reset.style.display = localStorage.getItem('pb-lang') ? 'flex' : 'none';
        }

        function selectLang(lang) {
            setLanguage(lang);
            applyI18n(lang);
            current.innerHTML = '';
            current.appendChild(makeLangEntry(lang, false));
            options.style.display = 'none';
            updateResetButton();
            iframe.contentWindow.postMessage({ type: 'pb-lang', lang: lang }, '*');
        }

        reset.addEventListener('click', function(e) {
            e.stopPropagation();
            clearLanguage();
            const lang = detectLanguage();
            applyI18n(lang);
            current.innerHTML = '';
            current.appendChild(makeLangEntry(lang, false));
            updateResetButton();
            iframe.contentWindow.postMessage({ type: 'pb-lang', lang: lang }, '*');
        });

        getAvailableLanguages().forEach(function(lang) {
            const item = makeLangEntry(lang);
            item.addEventListener('click', function(e) {
                e.stopPropagation();
                selectLang(lang);
            });
            options.appendChild(item);
        });

        current.appendChild(makeLangEntry(detectLanguage(), false));
        updateResetButton();

        document.getElementById('lang-selector').addEventListener('click', function(e) {
            e.stopPropagation();
            options.style.display = options.style.display === 'none' ? 'block' : 'none';
        });

        document.addEventListener('click', function() {
            options.style.display = 'none';
        });
    });
  </script>
  <iframe id="mainBlock" src="movielist.html"></iframe>
</body>
</html>
