<style>
    .drag{
        height: 50px;
        width: 50px;
        position: absolute;
        text-align: center;
        margin: auto;
        z-index: 10;
    }

    .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;
    }
    body {
    height: 100%;
    overflow-y: hidden;
    }
    .createzone {
        background-color: #bfe4ff;
        border: dashed 4px transparent;
        border-radius: 4px;
        height: 10px;
        margin: 10px;
        padding: 10px;
        width: 10px;
        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;
        text-align: center;
        /* z-index: -1; */
    }
    .czones{
        display: flex;
        margin: auto;
        /* justify-content: space-around; */
        flex-wrap: wrap;
        width: 80%;
        height: 100px;
        /* overflow-x: auto; */
    }

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

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

    #proj_top{
        margin: auto;
        width: 90%;
        display: flex;
        justify-content: space-around;
    }
    #proj_name{
        background-color: #aaa;
        border: 0px;
        text-align: center;
    }

    .inputs{
        display: flex;
        width: 80vw;
        margin: auto;
        padding-block: 20px;
    }

    .wall{
        /* display: flex; */
        /* position: relative; */
        /* margin: 60px auto; */
        width: 400px;
        height: 200px;
        background-color: #fff;
        background-image: url("/img/bg1red.png");
        background-size: 200px;
        background-repeat: repeat;
        background-position: bottom 0px left 0px;
        border: 2px solid black;
        /* overflow: visible; */
        z-index: 2;
    }
</style>

<%- include('./static/start.ejs',{name:proj_name,async: true}) %>
<%- include('./header.ejs') %>
<script src="/lib/interact.min.js"></script>


<div id="drags">
    <!-- <div class="cube drag spawn" id="cube_0" style="transform: translate(197.7px, 57.8667px);" data-x="197.6999969482422" data-y="57.866668701171875" >cube</div>     -->
</div>
<section class="main">
    <div id="proj_top">
    <button onclick="save()">save</button>  
        <input id="proj_name"></input>
    </div>
</section>

    
    <!-- <div class="dropzone"></div> -->

<div class="inputs">
    <div class="czones">
        <!-- <div class="cube createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div>
        <div class="buble createzone"></div> -->
    </div>
    <div class="trash">trash bin</div>
</div>


<div id="wall_input">
    <div>
        <div style="display: flex;width: 150px;justify-content: space-between;">
            <label for="wall_height">height </label>
            <div id="wall_height_value">0</div>
        </div>
        <input type="range" step="0.1" min="0.9" max="4" id="wall_height" value="2" oninput="wall_size_change('height')"> 
    </div>
    <div>
        <div style="display: flex;width: 150px;justify-content: space-between;">
            <label for="wall_width">width</label>
            <div id="wall_width_value">0</div>
        </div>
        <input type="range" step="0.1" min="1.9" max="7" id="wall_width" value="4" oninput="wall_size_change('width')"> 
    </div>
</div>
<div class="wall dropzone"></div>

<script src="/lib/inter.js"></script>
<script>
    load_objs((data)=>{
        data.forEach(value => {
            // console.log(value);
            let czones = document.getElementsByClassName("czones")[0];
            let czone =  document.createElement('img');
            czone.classList.add(value["name"]);
            czone.classList.add("createzone");
            czones.append(czone)
        });
    })
</script>
<script>
    let proj_name = "<%= proj_name %>";
    // console.log(proj_name);
    document.getElementById("proj_name").value = proj_name;
    // drag_start();
    load_proj();
</script>
<%- include('./static/end.ejs') %>