<?php 



?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="/css/materialize.min.css"  media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="/css/loadingbar.css"/>
<link type="text/css" rel="stylesheet" href="/css/style.css"/>

<link rel="icon" href="/includes/LogoSNIR.png" />

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<ul id="slide-out" class="side-nav fixed">
    <li><div class="userView">
        <div class="background"></div>
        <div id="titresnir"><a href="/"><h3 class="white-text name logo">RASPSNIR</h3></a><br/></div>
        </div></li>
    <li><a class="waves-effect" href="/wankuls"><i class="material-icons">person_pin</i>Wankuls</a></li>
    <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
            <li>
                <a class="collapsible-header waves-effect">Classements<i class="material-icons">insert_chart</i></a>
                <div class="collapsible-body">
                    <ul>
                        <li><a class="waves-effect" href="/rocketleague">RocketLeague</a></li>
                        <li><a class="waves-effect" href="/lol">League of Legends</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
    <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
            <li>
                <a class="collapsible-header waves-effect">Jeux<i class="material-icons">games</i></a>
                <div class="collapsible-body">
                    <ul>
                        <li><a class="waves-effect" href="/tetris">Tetris</a></li>
                        <li><a class="waves-effect" href="/browserquest">BrowserQuest</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
    <li><div class="divider"></div></li>
    <li><a class="waves-effect" href="/soundbox"><i class="material-icons">volume_up</i>Soundbox</a></li>
    <li><a class="waves-effect" href="/edt"><i class="material-icons">schedule</i>Emploi du temps</a></li>
    <li><a class="waves-effect" href="/devteam"><i class="material-icons">code</i>L'équipe de DEV</a></li>
    <li><div class="divider"></div></li>
    <?php 
    if(isset($_SESSION['pseudo']))
    {
        echo "<li><a class=\"waves-effect\"><i class=\"material-icons\">perm_identity</i>" . $_SESSION['pseudo'] . "</a></li>
        <li><a href=\"/includes/php/disconnect.php\" class=\"waves-effect modal-trigger\"><i class=\"material-icons\">not_interested</i>Déconnexion</a></li>";
    }
    else
    {
        echo "<li><a class=\"waves-effect modal-trigger\" href=\"#modal1\"><i class=\"material-icons\">settings</i>Inscription</a></li>
        <li><a class=\"waves-effect modal-trigger\" href=\"#modal3\"><i class=\"material-icons\">perm_identity</i>Connexion</a></li>";
    }
    ?>
</ul>
<a id="menu-sidenav" href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons white">menu</i></a>  



<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Inscription</h4>
        <form class="col s12">
            <div class="row">
                <div class="input-field col s6">
                    <input id="first_name" name="first_name" type="text" class="validate">
                    <label for="first_name">Prénom</label>
                </div>
                <div class="input-field col s6">
                    <input id="last_name" name="last_name" type="text" class="validate">
                    <label for="last_name">Nom</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="pseudo" name="pseudo" type="text" class="validate">
                    <label for="pseudo">Pseudo</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <input id="password" name="password" type="password" class="validate">
                    <label for="password">Mot de passe</label>
                </div>
                <div class="input-field col s6">
                    <input id="repassword" name="repassword" type="password" class="validate">
                    <label for="repassword">Réécrivez votre mot de passe</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <a id="validRegister" class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>Valider</a>
                </div>
                <div class="input-field col s6">
                    <blockquote class="errorBQ" id="error">Je rappelle à tout les bonobos que je veux de vrais infos. Pas de prenom genre "mdr" ou "lol", pareil pour le mail, il me sera utile pour de prochaine fonctionnalités. Mettez votre vrai nom et prenom. Je rappelle aussi qu'il m'est impossible de voir vos mdp, ils sont cryptés. </blockquote>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="modal2" class="modal">
    <div class="modal-content">
        <h4>Bravo !</h4>
        <p>Vous êtes désormais inscrit ! Vous pouvez désormais vous connecter !</p>
    </div>
</div>

<div id="modal3" class="modal">
    <div class="modal-content">
        <h4>Connexion</h4>
        <form class="col s12">
            <div class="row">
                <div class="input-field col s12">
                    <input id="pseudoLogin" name="pseudo" type="text" class="validate">
                    <label for="pseudoLogin">Pseudo</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="passwordLogin" name="password" type="password" class="validate">
                    <label for="passwordLogin">Mot de passe</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6">
                    <a id="validLogin" class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>Valider</a>
                </div>
                <div class="input-field col s6">
                    <blockquote class="errorBQ" id="errorLogin"></blockquote>
                </div>
            </div>
        </form>
    </div>
</div>
