<%- include('./load.ejs') %>
<style>
    #proj_top_panel{
        display: flex;
        /* width: 90%; */
        justify-content: space-between;
        width: 90%;
        text-align: center;
        margin: auto;
    }
    #top_panel_left{
        /* float: left; */
        justify-content: space-between;
        /* width: 200px; */
        cursor: pointer;
        width: 9vw;
        display: flex;
        /* width: 20vw; */
    }
    #top_panel_center{
        /* float: left; */
        justify-content: space-between;
        cursor: pointer;
        width: 58vw;
        display: flex;
        /* width: 20vw; */
    }
    #top_panel{
        height: 10vh;
        display: flex;
        margin-bottom: 2vh;
        margin-top: 1vh;
    }
    /* button{
        /* margin-inline: 5px; */
    /* } */
    .tpanel{
        margin: auto 0px;
        /* width: 100%; */
        height: 100%;
    }
    .tpanel button{
        border: 0px;
        background-color: transparent;
        cursor: pointer;
    }

    .menu_btn{
        background: ghostwhite;
        cursor: pointer;
        border: 1px gray solid;
        padding: 2px;
        width: 220px;
        border-radius: 0.5vw;
        min-height: 2.5vw;
    }
    .cmenu{
        position: absolute;
        display: grid;
        background: ghostwhite;
        color: black;
        cursor: pointer;
        border: 1px gray solid;
        border-radius: 0.5vw;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-top: 0px;
        z-index: 500;
        /* width: 218px; */
    }
    #top_panel_right_main{
        /* float: right; */
        justify-content:space-between;
        float: right;
        display: flex;
        cursor: pointer;
        width: 14vw;
        /* width: 20vw; */
        /* height: 60px; */
    }
    #top_panel_right_sec{
        /* float: right; */
        justify-content:space-between;
        float: left;
        display: flex;
        cursor: pointer;
        width: 14vw;
        transform: translateY(100%);
        /* width: 20vw; */
        /* height: 60px; */
    }
    .top_panel_right img{
        width: 2.5vw;
        /* height: 3vh; */
    }
    @media (max-width: 900px) {
        #top_panel_right_main{
            display: none;
        }
        #top_panel_right_sec{
            display: flex;
        }
        #top_panel_center{
            width: 70vw;
        }
    }
    @media (min-width: 900px) {
        #top_panel_right_main{
            display: flex;
        }
        #top_panel_right_sec{
            display: none;
        }
    }

    #top_panel_center button{
        border-radius: 0.5vw;
    }
    #top_panel_center :hover{
        border: 1px solid black;
    }
</style>

<header id="top_panel">
    <!-- <div id="user_name"></div> -->
    <div id="proj_top_panel">
        <div id="top_panel_left" class="tpanel"></div>
        <div id="top_panel_center" class="tpanel">
            <button id="page_btn_main" onclick="goto('/main')">Мои проекты</button>
            <button id="page_btn_tamp" onclick="goto('/temp')">Шаблоны</button>
            <button id="page_btn_gallery" onclick="goto('/gallery')">Галерея</button>
            <button id="page_btn_faq" onclick="goto('/faq')">FAQ</button>
            <button id="page_btn_help" onclick="goto('/help')">Связаться с поддержкой</button>

        </div>
        <div id="top_panel_right_main" class="tpanel top_panel_right">
            <a href=""><img src="/img/vk.svg" alt=""></a>
            <a href=""><img src="/img/youtube.svg" alt=""></a>
            <a href=""><img src="/img/ok.svg" alt=""></a>
            <a href=""><img src="/img/telegram.svg" alt=""></a>
        </div>
        <div class="tpanel">
            <button onclick='logout();'>Выход</button>
        </div>
    </div>        <!-- <div><button onclick="logout();">logout</button></div> -->
</header>
<div id="user_menu" class="cmenu"></div>


<div id="top_div" style="background-color: transparent; width: 100%;height: 100%;position: absolute;inset: 0px;z-index: 300;" onclick="hide_menus()"></div>

<script>
    get_from_uuid((res)=>{
        // let uname = document.getElementById("user_name"); 
        // let menu = document.getElementById("user_menu"); 
        // let header = document.getElementById("top_panel"); 
        // let right = document.getElementById("top_panel_right"); 
        // let left = document.getElementById("top_panel_left"); 
        
        // if(document.title != "main") menu.innerHTML += `<button onclick="goto('/');">проекты</button> <br>`;
        // right.innerHTML += `<div id="user_name" class="menu_btn">${res["login"]}</div>`;
        
        let menu = document.getElementById("top_panel_center");
        if (res["admin"] == true){
            if (typeof admin != "undefined"){Object.values(admin).forEach(afunc => {afunc()});}
            menu.innerHTML += `<button id="page_btn_admin" onclick='goto("/admin")'>Админ. панель</button><br>`;
            switch (document.URL.split("/").at(-1)) {
                case ("admin"):document.getElementById("page_btn_admin").style.border = "1px solid black";break;
                case ("objects"):document.getElementById("page_btn_admin").style.border = "1px solid black";break;
                case ("users"):document.getElementById("page_btn_admin").style.border = "1px solid black";break;
                default:break;
            }
        }
        switch (document.URL.split("/").at(-1)) {
            case ("main"):
                document.getElementById("page_btn_main").style.border = "1px solid black";
                break; 
            default:break;
        }
    });

    // console.log("asd");

    // onscroll = (e)=>{
    //     hide_menus();
    // }
    onresize = (e)=>{
        hide_menus();
    }
    onclick = (e) => {
        // e.preventDefault()
        //   console.log(e);
        //   console.log(document.getElementById(e.target.id).parentElement);
        // if(e.target.onclick != null){
        //     if(document.title == "login"){
        //         // console.log(document.title);
        //         log_by_sid();
        //     }else if(document.title != "login"){
        //         check_sid(true);
        //         // console.log("check");
        //     }
        // }
        if(e.target.id == "user_name"){
            hide_menus();
            let menu = document.getElementById("user_menu");
            menu.style.display = 'block';
            menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
            // menu.onmouseleave = () => menu.style.display = 'none';
            // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // document.body.appendChild(menu)
            open_menu();
        }else if(e.target.id == "proj_menu"){
            hide_menus();
            let menu = document.getElementById("project_menu");
            menu.style.display = 'block';
            menu.style = `top:${e.target.getBoundingClientRect().top + 25}px;left:${e.target.getBoundingClientRect().left - 20}px`;
            // menu.onmouseleave = () => menu.style.display = 'none';
            // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // document.body.appendChild(menu)
            open_menu();
        }
        else if(e.target.id == "user_buttons"){
            hide_menus();
            let menu = document.getElementById("user_edit_menu");
            menu.setAttribute("login_id",e.target.classList[0]);
            menu.setAttribute("login_name",document.getElementById(`login_${e.target.classList[0]}`).innerText);
            menu.setAttribute("login_pass",document.getElementById(`pass_${e.target.classList[0]}`).innerText);
            menu.setAttribute("login_admin",document.getElementById(`admin_${e.target.classList[0]}`).innerText);
            menu.style.display = 'block';
            menu.style = `top:${e.target.getBoundingClientRect().top + 20}px;left:${e.target.getBoundingClientRect().left - 8}px`;
            // menu.onmouseleave = () => menu.style.display = 'none';
            // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // document.body.appendChild(menu)
            open_menu();
        
        }
        else if(e.target.id == "proj_cost"){
            hide_menus();
            document.getElementById("cost_list").style = `margin-top:2.5vw;left:${e.target.getBoundingClientRect().left}px`;
            console.log("cost_list");
            open_menu();
        }
        else if(`${e.target.id}`.split("-")[0] == "group_drop"){
            hide_menus();
            document.getElementById("group").innerHTML = "";

            // console.log(e.target.getAttribute("groups").split(","));
            console.log("group");
            open_menu();

            if (document.URL.split("/").at(-1) == "objects" && document.URL.split("/").at(-2) == "admin"){
                document.getElementById("group").style = `margin-top:4vw;left:${e.target.getBoundingClientRect().left}px;width: 14vw;padding: 0.45vw;display:block;padding-bottom: 0.7vw;`;
                if(e.target.getAttribute("count") != 0)load_groups(()=>{},e.target.getAttribute("groups").split(","),true)
                let groups = document.getElementById("group");
                let new_grp_btn = document.createElement("button");
                new_grp_btn.setAttribute("onclick",`create_new_group(${e.target.getAttribute("pid")})`);
                new_grp_btn.innerText = "Добавить группу";
                new_grp_btn.classList.add("btn_blue");
                new_grp_btn.style.width = "14vw";
                groups.append(new_grp_btn)
            }
            else{
                document.getElementById("group").style = `margin-top:2.5vw;left:${e.target.getBoundingClientRect().left}px;width: 14vw;padding: 0.45vw;display:block;padding-bottom: 0.7vw;`;
                if(e.target.getAttribute("count") != 0)load_groups(()=>{},e.target.getAttribute("groups").split(","))
            }
            // hide_menus();
            // let menu = document.getElementById("object_edit_menu");
            // let obj = e.target;
            // menu.style.display = 'block';
            // // menu.style = `top:${e.target.getBoundingClientRect().top+27}px;left:${e.target.getBoundingClientRect().left-13}px`;
            // menu.style = `top:${e.target.getBoundingClientRect().top + 40}px;left:${e.target.getBoundingClientRect().left - 5}px`;
            // // menu.onmouseleave = () => menu.style.display = 'none';
            // // menu.innerHTML = "<p>Option1</p><p>Option2</p><p>Option3</p><p>Option4</p>"
            // // document.body.appendChild(menu)
        
        }
        // else{
        //     hide_menus();
        // }
    }
</script>