<!-- TEMPORAIRE A BOUGER -->
<script type="text/javascript">
var MyJSStringVar = "visiteur";
</script>

<style>
textarea {
    overflow-y: scroll;
}

.dialog-content {
    overflow-y: auto;
}

.slider {
    margin-top: 45px;
}

#ageSlider .noUi-connect {
    background: #477c11;
}

#nbjSlider .noUi-connect {
    background: #30abe6;
}

#dureeSlider .noUi-connect {
    background: #ff7615;
    ;
}

.voirJeu {
    border: none;
    background: none;
    font-size: 13px;
    cursor: pointer;
}

.voirJeuText {
    border-width: 4px;
    border-style: solid;
    cursor: pointer;
    padding: 0px 2px;
    height: 420px;
}

tr img {

    max-height: 150px !important;
}

.imgdiv {
    height: 150px;
    width: 180px;
}

.odd,
.even {
    float: left;
    width: 200px;
    height: 420px;
    margin: 0px 8px;

}

.dt-center {
    border-bottom: none !important;
}

.commentaire {
    width: 80%;
    height: 90%;
    background-color: #979597e0;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin: 5px;
}

table.dataTable tbody td {
    vertical-align: middle;
}
</style>
<div id="mainUserJeux" hidden="">
    <div class="mx-auto" data-role="panel" data-title-caption="Filtres avancés"
        data-title-icon="<span class='mif-filter'></span>" data-collapsible="true" data-hint-position-min="bottom"
        data-hint-position-max="top" data-cls-panel="shadow-3" data-cls-title-icon="bg-green fg-white"
        data-cls-collapse-toggle="bg-dark fg-white marker-light">
        <button class="button" id="resetFilters">Réinitialiser les filtres</button>
        <button class="button success" id="dispo">Jeux disponibles uniquement</button>
        <button class="button secondary" id="favoris">
            <div class="removefavoris"></div><span> </span> Mes jeux favoris / à tester
        </button>
        <div class="row" style="margin-left: 50px;margin-right: 20px;">
            <div class="cell-md-full cell-lg-3">
                <div id="ageSlider" class="slider"></div>
                <span class="tally success">Age</span>
            </div>
            <div class="cell-lg-1"></div>
            <div class="cell-md-full cell-lg-2">
                <div id="nbjSlider" class="slider"></div>
                <span class="tally info ">Nombre de joueurs</span>
            </div>


            <div class="cell-lg-1"></div>
            <div class="cell-md-full cell-lg-2 ">
                <div id="dureeSlider" class="slider"></div>
                <span class="tally warning ">Durée</span>
            </div>
            <div class="cell-lg-1"></div>
                        <div style='visibility: hidden' class="cell-md-full cell-lg-2 ">
                <div id="difficulteSlider" class="slider"></div>
                <span class="tally" style="background-color:#3FB8AF;color:#fff">Difficulté</span>
            </div>

            <div class="cell-md-full cell-lg-4 ">
                <span style="background-color:purple;color:white;" class="tally">Catégories :</span>
                <div class="border bd-violet">
                    <select data-role="select" data-on-change="" id="selectCategories">
                    </select>
                </div>
            </div>
                        <div class="cell-md-full cell-lg-4 ">
                            <span style="background-color:red;color:white;" class="tally">Sous-catégories :</span>
                                    <div class="border bd-red">
                    <select data-role="select" data-on-change="" id="selectSousCategories">
                    </select>
                </div>
            </div>
                    </div>
        <div class="row" style="margin-left: 50px;margin-right: 20px;">
            
            <div class="cell-md-full cell-lg-4 ">
                <select style="display:none" name="Mécanismes"></select>
                                       <span style="background-color:black;color:white;" class="tally">Langues de la règle :</span>
                                    <select data-role="select" data-on-change="" id="selectMecanismes" multiple>
                </select>
            </div>
                    </div>
    </div>

    <table class="display" style="width:100%" id="table-jeux">
        <thead>
            <tr>
                <th>Les jeux</th>

            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </thead>
    </table>

    <div class="dialog" id="formulaireNoteJeu" data-role="dialog" data-width="80%" data-height="80%"
        data-close-button="true">
        <div class="dialog-title">Avis</div>
        <div class="dialog-content">
            <div class="row">
                <div class="cell-md-12">
                    <h3>Ma note :</h3>
                    <div class="ratingJeu" id="ratingJeu"></div>
                    <hr>
                    <button class="button success ajouterCommentaire">Ajouter un commentaire</button>
                    <div id="commentairesAffichage">
                    </div>
                </div>
            </div>
        </div>
        <div class="dialog-actions">
            <button class="button alert js-dialog-close">Fermer</button>
        </div>
    </div>

    <div class="dialog" id="voirJeu" data-overlay-click-close="true" data-role="dialog" data-width="90%" data-height="90%"
    data-close-button="true">
    <div class="dialog-title">
        <h2 id="NomJeu"></h2>
        <div class="userMoyenne" id="moyenneNotes" data-rating=""></div>
    </div>
    <div class="dialog-content">
        <div class="tabs tabs-wrapper top tabs-expand">
            <ul data-expand-point="sm" data-role="tabs" class="tabs-list">
                <li class="active"><a class="onglet" href="#_target_1">Description</a></li>
                <li class=""><a class="onglet" href="#_target_2">Détails</a></li>
                <li class=""><a class="onglet" href="#_target_3">Vidéo</a></li>

            </ul>
            <button type="button" class="hamburger menu-down dark"><span class="line"></span><span
                    class="line"></span><span class="line"></span></button>
        </div>
        <p></p>
        <div class="bd-default no-border-top p-2">
            <div id="_target_1" style="display: block;">
                <div class="row">
                    <div class="cell-md-5">
                        <img id="LienImg" src="" alt="">
                    </div>
                    <div class="cell-md-2">
                        <img id="LienImg2" src="" alt="">
                    </div>
                    <div class="cell-md-5">
                        <div class="row">
                            <h5>Description :</h5>
                        </div>
                        <div id="CommentaireJeu"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell-md-4">
                        <img id="LienImg3" src="" alt="">
                    </div>
                    <div class="cell-md-4">
                        <img id="LienImg4" src="" alt="">
                    </div>
                </div>
            </div>
            <div id="_target_2" style="display: none;">
                <div class="row">
                    <h5>Contenu :</h5>
                </div>
                <div class="row">
                    <div id="ContenuJeu"></div>
                </div>


                <div class="row">
                    <div class="cell-md-4">
                        <a style="display: none;" class="LienRegle" target="_blank" href=''>Lien vers la règle pdf</a>
                    </div>
                </div>
                <div class="row">
                    <div class="cell-md-2">
                        <span id="Age"></span>
                    </div>
                    <div class="cell-md-3">
                        <span id="NbJoueur"></span>
                    </div>
                    <div class="cell-md-2">
                        <span id="Duree"></span>
                    </div>
                    <div class="cell-md-4">
                        <span id="TypeJeu"></span>
                    </div>

                </div>
                <div class="row">
                    <div class="cell-md-6">
                        <span id="Mécanisme"></span>
                    </div>
                    <div class="cell-md-6">
                        <span id="Thématique"></span>
                    </div>
                </div>
                <div class="row">
                    <div class="cell-md-2">
                        <span id="Auteur"></span>
                    </div>
                    <div class="cell-md-2">
                        <span id="Illustrateur"></span>
                    </div>

                </div>
            </div>
            <div id="_target_3" style="display: none;">
                <div class="row">
                    <div class="cell-md-12">
                        <div id="VideoRegle"></div>
                    </div>
                </div>
            </div>
        </div>




        <div class="row">
            <h5>Commentaires:</h5>
        </div>
        <div class="row">
            <div class="cell-md-12">
                <button class="button success ajouterCommentaire">Ajouter un commentaire</button>
                <div id="commentairesDescriptionJeu"></div>
            </div>
        </div>
    </div>
    <div class="dialog-actions">
        <button class="button alert js-dialog-close">Fermer</button>
    </div>
</div>
    <div class="dialog" id="formulaireCommentaire" data-role="dialog" data-width="50%" data-height="70%"
        data-close-button="true">
        <div class="dialog-title">Mon commentaire :</div>
        <div class="dialog-content">
            <div class="row">
                <textarea name="commentaire" cols="100" rows="5"></textarea>
            </div>
        </div>
        <div class="dialog-actions">
            <button class="button success" id="envoyerCommentaire">Enregistrer</button>
            <button class="button alert js-dialog-close">Fermer</button>
        </div>
    </div>


</div>{"id":10,"date":"2023-11-26T21:41:23","date_gmt":"2023-11-26T20:41:23","guid":{"rendered":"https:\/\/ludothequejeuxjoue.ca\/?page_id=10"},"modified":"2023-12-31T11:45:47","modified_gmt":"2023-12-31T10:45:47","slug":"les-jeux","status":"publish","type":"page","link":"https:\/\/ludothequejeuxjoue.ca\/index.php\/les-jeux\/","title":{"rendered":"Les jeux"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":3,"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/ludothequejeuxjoue.ca\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}