function settingsInitModal(){

    let template = document.querySelector('#settings_header');

    modalSetHeader('');

    modalSetBody('');

    modalSetFooter('');

    template = document.querySelector('#settings_header');

    if (template) {

        let contenu = document.importNode(template.content, true);

        if (contenu) modalSetChildren('modal_header',contenu);

    }

}

modal_hooks['settings'] = function(parametres){

    settingsSetModeInfo();

};

modal_hooks['login'] = function(parametres){

    settingsSetModeLogin();

};

function settingsSetModeInfo()

{

    let template = document.querySelector('#settings_body');

    settingsInitModal();

    if (template) {

        let contenu = document.importNode(template.content, true);

        if (contenu) modalSetChildren('modal_body',contenu);

    }

    modalSetFooter('');

}

function settingsSetModeLogin()

{

    let intervenant=getContexteValeur('intervenant');

    let profil=getContexteValeur('profil');

    let profils=getContexteValeur('profils');

    let modal_body='';

    let modal_footer='';

    let profil_selector=profil;

    if (profils) {

        let tableau=profils.split(',');

        profil_selector='<select style="width: 100%;font-size: 1em">';

        tableau.forEach(element => {

            let s=(element == profil) ? 'selected' : '';

            profil_selector+='<option '+s+'>'+element+'</option>';

        });

        profil_selector+='</select>';

    }

    settingsInitModal();

    modalSetBody(modal_body);

    modalSetFooter(modal_footer);

    modal_body+='<div style="height:100%;background: url(\'images/LoginBanner.jpg\');background-size: cover;display: flex;justify-content: center;align-items: center;">';

    modal_body+='  <div style="background-color: rgba(255, 255, 255, 0.4); border-radius: 5px;min-width: 25%;backdrop-filter: blur(3px);display: flex;flex-direction: column;justify-content: center;align-items: center;">';

    if (intervenant=='Anonymous') {

        modal_body+='     <input id="login_username" type="text" placeholder="Username" style="margin: 5px;font-size: 1em;width: 200px"></input>';

        modal_body+='     <input id="login_password" type="password" style="margin: 5px;font-size: 1em;width: 200px"></input>';

        modal_body+='     <button style="border:none;background-color: #2196F3;width: 200px;border-radius: 5px;margin: 5px;color: white; font-size: 1em; font-weight: bold; cursor: pointer" onclick="connectUser()">Log In</button>';

    } else {

        modal_body+='    <h2 style="width: 200px;display: flex;text-align : center;justify-content: center;align-items: center;margin: 2px;">'+intervenant+'</h2>';

        modal_body+='    <h3 style="width: 200px;display: flex;text-align : center;justify-content: center;align-items: center;margin: 5px;">'+getTrigrammeCollaborateur(intervenant)+'<h3>';

        modal_body+='    <div style=""width: 200px;display: flex;text-align : center;justify-content: center;align-items: center;margin: 5px;">'+profil_selector+'</div>';

        modal_body+='    <button style="border:none;background-color: grey;width: 200px;border-radius: 5px;margin: 5px;color: white; font-size: 1em; font-weight: bold; cursor: pointer" onclick="deconnectUser()">Log Out</button>';

    }

    modal_body+='  </div>';

    modal_body+='<div>';

    modalSetBody(modal_body);

}

function connectUser()

{

    let username = document.getElementById('login_username').value;

    let password = document.getElementById('login_password').value;

    // C'est un POC donc on n'a pas de base utilisateur

    if ((username!='')&&(password==username))

    {

        setContexteValeur('intervenant', username);

        setContexteValeur('profils', 'Utilisateur');

        setContexteValeur('profil', 'Utilisateur');

        if (username=='TME')

        {

            setContexteValeur('intervenant', 'Thibaud MEUNIER');

            setContexteValeur('profils', 'Utilisateur,Admin');

            setContexteValeur('profil', 'Utilisateur');

        }

        document.getElementById('username').innerHTML=username;

    }

    settingsSetModeLogin();

}

function deconnectUser()

{

    setContexteValeur('intervenant', 'Anonymous');

    settingsSetModeLogin();

    document.getElementById('username').innerHTML='Log In';

}

function settingsSetModeFilter()

{

    let modal_body='';

    let modal_footer='';

    settingsInitModal();

    modalSetBody(modal_body);

    modalSetFooter(modal_footer);

    modal_body+='<div style="height:100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">';

    modal_body+='<h2>Mode Filter</h2>';

    modal_body+='<div>';

    modalSetBody(modal_body);

}

function settingsSetModeSetup()

{

    let modal_body='';

    let modal_footer='';

    settingsInitModal();

    modalSetBody(modal_body);

    modalSetFooter(modal_footer);

    modal_body+='<div style="height:100%;width:100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">';

    modal_body+='  <h2>Thèmes</h2>';

    modal_body+='  <div style="display:flex;">';

    modal_body+='    <div style="flex: 1;border: 1px solid black;text-align: center;cursor: pointer">';

    modal_body+='      <a onclick="settingsSetTheme(\'default\')">Default</a>';

    modal_body+='    </div>';

    modal_body+='    <div style="flex:1;border: 1px solid black;text-align: center;cursor: pointer">';

    modal_body+='      <a onclick="settingsSetTheme(\'red\')" style="color:#FA0000">Red</a>';

    modal_body+='    </div>';

    modal_body+='    <div style="flex:1;border: 1px solid black;text-align: center;cursor: pointer">';

    modal_body+='      <a onclick="settingsSetTheme(\'blue\')" style="color:#0000FA">Blue</a>';

    modal_body+='    </div>';

    modal_body+='  </div>';

    modal_body+='<div>';

    modalSetBody(modal_body);

}

function settingsSetTheme(valeur) 

{

    switch(valeur){

        case 'blue':

            CSSsetClair(245,245,240);

            CSSsetSombre(0,0,245);

        break;

        case 'red':

            CSSsetClair(245,245,240);

            CSSsetSombre(245,0,0);

        break;

        default:

            CSSsetClair(245,245,240);

            CSSsetSombre(0,0,0);

    }

}