<?php
$relativepath = $infopage[0];  // position relative de la page, si la page est à la racine, alors on laisse le champ vide
$pagetitle = $infopage[1];     // titre de la page affiché dans la balise <title>
$pagecontent = $infopage[2];   // contenu de la page qui se retrouve dans le <body>
$pagescript = $infopage[3];    // contenu de la page qui doit se retrouver en dehors du <body>
$pagename = $infopage[4];      // nom de la page exact servant à appeler le css (cf <link rel="stylesheet" ...> sur /structure/template.php). Ex : ceciestunepage.php => { $pagetitle = "Ceci est une page" et $pagename = "ceciestunepage" }
$txt_pancarte = $infopage[5];  // le texte à mettre sur la pancarte
header("Cache-Control: no-cache, must-revalidate");
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width,maximum-scale=2">
    <link rel="shortcut icon" href="<?= $relativepath ?>favicon.ico">
    <link rel="stylesheet" type="text/css" href="<?= $relativepath ?>assets/css/page/<?= $pagename ?>.css" />
    <link rel="stylesheet" type="text/css" href="<?= $relativepath ?>assets/css/menu.css" />
    <link rel="stylesheet" type="text/css" href="<?= $relativepath ?>assets/css/template.css" />
    <link rel="stylesheet" type="text/css" href="<?= $relativepath ?>assets/css/queries.css" />

    <!-- Icone du site, logo de la promo-->
    <link rel = "shortcut icon" href = "<?= $relativepath ?>assets/img/logo.ico" >

    <title><?= $pagetitle ?> | INSAT Accueil</title>


    <!-- Matomo -->
    <script>
      var _paq = window._paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="//etud.insa-toulouse.fr/~accueil_insa/matomo/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '1']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
      })();
    </script>
    <!-- End Matomo Code -->


</head>
    <body>


        <div class="complete-wrapper">

            <header>
                <?php include $relativepath."structure/menu.php"; ?>
            </header>

            <?php 
            if(isset($txt_pancarte) && $txt_pancarte != ""){

            echo "<div class=\"pc_container\">
                <div class=\"pancarte\">

                    <div class=\"title\">
                        ".$txt_pancarte."
                    </div>

                    <span class=\"circles circles-top\"></span>
                    <span class=\"circles circles-bottom\"></span>
                </div>
            </div>";
            }
            ?>
            <?php
            if (isset($pagecontent)) {
                echo $pagecontent; //ici on appelle le contenu de la page
            }
            ?>



        </div>
        <div class="bg" id="bg"></div>

        <footer>

            <div class="footer-text-area">
                <?php include $relativepath."structure/footer.php"; ?>
            </div>

            <div style="height: 7vw"> </div>

        </footer>

        <!-- Script nécessaire au fonctionnement du menu sur mobile -->
        <!-- To be charged at the end so that it doesn't slow the page loading -->
        <script defer>
            (() => {
                const closeBTN = document.getElementById("close-mobile-menu");
                const mobileMenu = document.getElementById("mobile-menu");

                const onTubeClick = (e) => {
                    mobileMenu.classList.toggle("open");
                };

                closeBTN.addEventListener("click", onTubeClick)
            })()
        </script>
    </body>



    <!-- chargement du fond d'écran random -->

    <script type="text/javascript">


        var mobile_backgrounds = ['assets/img/asterix.svg', 'assets/img/adrenaline.svg', 'assets/img/obelix.svg', 'assets/img/assurancetourix.svg','assets/img/cleopatre.svg','assets/img/bonemine.svg'];
        var pc_backgrounds = ['assets/img/pc_background.svg'];
        
        var personnage = "";
        var background = "";
        
        // détecte les petits écrans (frigo connectés, 3DS ...)
        //  
        if (window.innerWidth <= 800){
            personnage = mobile_backgrounds[Math.floor(Math.random() * mobile_backgrounds.length)]
            background = "assets/img/hutte_panoramix.svg";
        }else{
            personnage = pc_backgrounds[Math.floor(Math.random() * pc_backgrounds.length)]
            background = "assets/img/village.svg";
        }

        document.getElementById('bg').style.backgroundImage = 'url(' + personnage + '),'+ 'url(\"'+background+'\")';
    </script>
</html>


<?php
if (isset($pagescript)) {
    echo $pagescript; //ici on appelle les scripts de la page (s'il y en a)
}
?>
