<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ohm Stream Downloader</title>

    <!-- CSS -->
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />

    <!-- External Libraries -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>

    <style>
        [x-cloak] { display: none !important; }
    </style>

    <!-- Configure HTMX to include auth token in all requests -->
    <script>
        document.addEventListener('htmx:configRequest', (event) => {
            const token = localStorage.getItem('auth_token');
            if (token) {
                event.detail.headers['Authorization'] = `Bearer ${token}`;
            }
        });
    </script>

    <!-- Legacy JavaScript (Refactored to HTMX/Alpine) -->
    <script src="/static/js/auth.js?v=1.10" defer></script>
    <script src="/static/js/api.js?v=1.11" defer></script>
    <script src="/static/js/utils.js?v=1.11" defer></script>
    <script src="/static/js/downloads.js?v=1.11" defer></script>
    <!-- <script src="/static/js/anime.js?v=1.11" defer></script> -->
    <!-- <script src="/static/js/anime-details.js?v=1.12" defer></script> -->
    <!-- <script src="/static/js/series-search.js?v=1.11" defer></script> -->
    <!-- <script src="/static/js/recommendations.js?v=1.11" defer></script> -->
    <script src="/static/js/watchlist.js?v=1.11" defer></script>
    <!-- <script src="/static/js/watchlist-ui.js?v=1.11" defer></script> -->
    <script src="/static/js/main.js?v=1.11" defer></script>
</head>
<body x-data="globalAppState">
    {% include "components/toast_container.html" %}
    <div class="container">
        {% block content %}{% endblock %}
    </div>

    <script>
        // Global State initialized when Alpine is ready
        document.addEventListener('alpine:init', () => {
            console.log('Alpine.js initializing...');
            Alpine.data('globalAppState', () => ({
                activeTab: 'home',
                isAuthenticated: true,
                username: '',
                init() {
                    window.addEventListener('auth-success', (e) => {
                        this.isAuthenticated = true;
                        this.username = e.detail.username;
                    });
                    window.addEventListener('auth-logout', () => {
                        this.isAuthenticated = false;
                        this.username = '';
                    });
                    window.addEventListener('set-tab', (e) => {
                        this.activeTab = e.detail.tab;
                    });
                }
            }));
        });
    </script>
</body>
</html>
