<!DOCTYPE html>
{% trans_default_domain 'home' %}
<html lang="{{ app.request.locale }}" dir="{{ app.request.locale == 'ar' ? 'rtl' : 'ltr' }}">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">


        <meta name="description"
            content="Téléchargez des vidéos depuis n'importe quel site
            en quelques secondes avec VideoPowerPME. Gratuit,
            sans inscription, compatible YouTube, Instagram,
            TikTok, Facebook et plus encore.">

        <meta name="keywords" content="télécharger vidéo en ligne, téléchargeur vidéo gratuit,
        download vidéo YouTube, convertir YouTube MP4,
        downloader vidéo sans logiciel, VideoPowerPME">

        <meta name="robots" content="index, follow">
        <meta name="author" content="VideoPowerPME">
        <link rel="canonical" href="https://videopowerpme.com/fr/">
        <link rel="alternate" hreflang="en" href="{{ url('change_language', {'lang': 'en'}) }}">
        <link rel="alternate" hreflang="ar" href="{{ url('change_language', {'lang': 'ar'}) }}">
        <link rel="alternate" hreflang="fr" href="{{ url('change_language', {'lang': 'fr'}) }}">
        <link rel="alternate" hreflang="x-default" href="{{ url('change_language', {'lang': 'fr'}) }}">
        

        <title>{{ 'title_home'|trans}}</title>
        <!-- Font Awesome pour les icônes -->
        <link rel="stylesheet" href="{{ asset('assets/vendor/font-awesome@6.7.2/css/all.min.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/css/frontend.css') }}">

        <link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.min.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap@5.3.8/css/bootstrap.rtl.min.css') }}">

    </head>
    <body>
        <!-- BARRE HORIZONTALE TOUT EN HAUT DE LA PAGE -->
        <header class="top-header-bar">
            <div class="top-bar-container">
                <!-- Section langue fixe (pas de JS, simple affichage) -->
                <div class="static-lang">
                    <a href="{{ path('change_language', {'lang': 'ar'}) }}">🇸🇦</a>
                    <a href="{{ path('change_language', {'lang': 'fr'}) }}">🇫🇷</a>
                    <a href="{{ path('change_language', {'lang': 'en'}) }}">🇬🇧</a>
                </div>
                
                <!-- Badge démontrant l'absence de connexion obligatoire -->
                
                {% if is_granted('ROLE_USER') %}
                   
                    <div class="d-flex align-items-center gap-3">

                        <!-- History Button -->
                        <a href="{{ path('app_frontend_history') }}" class="btn btn-light border menu-btn">
                            <i class="fa-solid fa-clock-rotate-left"></i>
                            {{ "btn_history"|trans }}
                        </a>

                        <!-- Logout Button -->
                        <a  href="{{ path('security_logout') }}">
                            <button class="btn btn-danger menu-btn">
                                <i class="fa-solid fa-arrow-right-to-bracket"></i>
                                {{ "btn_decnx"|trans }}
                            </button>
                        </a>

                        <!-- User Info -->
                        <div class="d-flex align-items-center gap-2">
                            <span class="username">{{ app.user.pseudo|e }}</span>
                            <i class="fa-solid fa-circle-user fa-2xl"></i>
                        </div>

                    </div>

                {% else %}
                    <a  href="{{ path('security_login') }}">
                        <button class="btn btn-success menu-btn">
                            <i class="fa-solid fa-right-to-bracket"></i>
                            {{ "btn_cnx"|trans }}
                        </button>
                    </a>
                {% endif %}
              
            </div>
        </header>

        <div class="main-alert">
            {% if not is_granted('ROLE_USER') %}
                <div class="alert alert-primary" role="alert">
                    <i class="fa-solid fa-bell"></i>
                    {{ "alert_defaut"|trans }}
                </div>
            {% endif %}
        </div>

        <!-- Contenu principal (centré) -->
        <div class="main-container">

            <!-- Logo et titre -->
            <div class="logo-area">
                <i class="fab fa-youtube logo-icon"></i>
                <span class="logo-text">VideoPowerPME</span>
            </div>
            <!-- Zone de saisie des URLs -->
            <div class="url-section">
                <div class="url-input-area">
                    <textarea id="youtubeUrls" placeholder="{{ 'placeholder_url'|trans }}"></textarea>
                    <div class="format-row">
                        {#<select id="formatSelect">
                            <option value="mp4-1080p">MP4 - 1080p</option>
                            <option value="mp4-720p" selected>MP4 - 720p</option>
                            <option value="mp4-480p">MP4 - 480p</option>
                            <option value="webm-1080p">WebM - 1080p</option>
                            <option value="webm-720p">WebM - 720p</option>
                        </select>#}
                        <button id="processBtn" class="process-btn"><i class="fas fa-download"></i> <span class="btn-text">{{ 'btn_start'|trans }}</span></button>
                    </div>
                </div>
            </div>
            <!-- Liste des vidéos avec progression et statut -->
            <div class="video-list" id="videoListContainer">
                <!-- Les éléments dynamiques sont insérés ici -->
            </div>
        </div>
        
        <script src="{{ asset('assets/vendor/jquery@4.0.0/jquery.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/bootstrap@5.3.8/js/bootstrap.min.js') }}"></script>
        <script>
            const ENDPOINTS = {
                getInfo: "{{ path('app_frontend_size_movie') }}",      // retourne { name: "...", sizeMB: 180 } ou erreur
                streamDownload: "{{ path('app_streamed_download') }}",           // téléchargement direct
                backgroundDownload: "{{ path('app_background_download') }}",     // lance tâche de fond
                urlAuth: "{{ path('security_login') }}"          // retourne { authenticated: true/false }
                    // téléchargement le vidéo anonyme
            };
            function checkAuth() {
                {% if is_granted('ROLE_USER') %}
                    return true;
                {% else %}
                    return false;
                {% endif %}
            }
            
        </script>
        <script src="{{ asset('assets/js/frontend.js?v=1') }}"></script>
    </body>
</html>
