<%- include('./static/start.ejs',{name:'main',async: true}) %>
<%- include('./header.ejs') %>
<style>
    .drag{
        height: 50px;
        width: 50px;
        position: absolute;
        text-align: center;
    }

    .dropzone {
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        height: 140px;
        margin: 10px auto 30px;
        padding: 10px;
        width: 80%;
        transition: background-color 0.3s;
    }

    .trash {
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        margin: 10px auto 30px;
        padding: 10px;
        height: 50px;
        width: 50px;
        transition: background-color 0.3s;
        z-index: -1;
    }

    .drop-active {
        border-color: #aaa;
    }

    .drop-target {
        background-color: #29e;
        border-color: #fff;
        border-style: solid;
    }
</style>


<!-- <script src="/lib/interact.min.js"></script> -->

<section class="main">
    <button onclick="new_proj()"><%= lang("new project") %></button>
    <div id="projs_div"></div>
</section>

<!-- <script src="/lib/inter.js"></script> -->

<script>
    function load_projs(callback){
        $.post( "/get_projs")
        .done(function( res ) {
            if(res["out"] == "good"){
                // console.log(res["body"]);
                callback(res["body"]);
            }
        });
    }
    function new_proj(){
        let name = ask("please enter project name");
        if(name != null && name!= "" && name!=" " && typeof name != "undefined" && name!="undefined"){
            goto(`/proj/${name}`);
        }
    }
    load_projs((projs)=>{
        projs.forEach(proj => {
            // console.log(proj);
            let div = document.getElementById("projs_div");
            div.innerHTML += `<button id='proj_${proj["name"]}' class='proj' onclick="goto('/proj/${proj["name"]}')">${proj["name"]}<br><img height="200" width="290" src='${proj["img"]}' alt='${proj["name"]}'></img></button>`;
        });
    });
</script>
<%- include('./static/end.ejs') %>