<%- include('includes/head.ejs') %>

<!-- ESTILOS -->

<style>

    /* GENERAL */

    section{
        padding-top: 1.3em;
    }
    h1{
        margin-left: 1em;
        font-size: 76px;
    }
    h3{
        margin-left: 1em;
        margin-top: 2.8em;
        text-align: center;
    }

    /* HEAD */

    #head{
        display: flex;
    }
    .btn-outline-success, .btn-outline-primary,  .btn-outline-secondary, .form-control, .btn-outline-danger{
        margin-top: 2.3em;
    }
    #create{
        position: absolute;
        left: 430px;
    }
    #edit{
        position: absolute;
        left: 540px;
    }
    #search {
        position: sticky;
        top: 0;
        left: 80%;
        margin-right: 9.2%;
    }
    #filter{
        position: absolute;
        right: 0;
        margin-right: 75px;
        color: #252525;
    }

    /* BODY */

    .progress{
        max-width: 750px;
        border-radius: 30px;
    }
    .progress-bar{
        border-radius: 30px;
    }
    #epic{
        padding: 25px 25px;
        display: flex;
        flex-direction: row;
    }
    #progressBar, #epicDetail{
        flex: 1;
    }
    #epicDetail{
        border: 1px solid #e9ecef;
        border-radius: 30px;
        background-color: #e9ecef;
        height: 50px;
        margin-right: 35px;
        margin-left: 35px;
        text-align: left;
        padding-top: 10px;
        padding-left: 25px;
        padding-right: 25px;
        font-size: 18px;
        color: #252525;
    }
    #detailBorder{
        max-width: 1200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bi-arrow-up-right{
        color: #252525;
        position: absolute;
        right: 0;
        margin-right: 85px;
        margin-left: 15px;
        margin-top: 14px;
    }
    .bi-pencil{
        color: #252525;
        position: absolute;
        right: 0;
        margin-right: 120px;
        margin-left: 15px;
        margin-top: 14px;
    }

    /* RESPONSIVE */

    @media(max-width: 2373px){
        #detailBorder{
            max-width: 1150px;
        }
    }
    @media(max-width: 2283px){
        #detailBorder{
            max-width: 1050px;
        }
    }
    @media(max-width: 2222px){
        #detailBorder{
            max-width: 1000px;
        }
    }
    @media(max-width: 2035px){
        #detailBorder{
            max-width: 950px;
        }
    }
    @media(max-width: 1956px){
        #detailBorder{
            max-width: 850px;
        }
    }
    @media(max-width: 1774px){
        #detailBorder{
            max-width: 750px;
        }
    }
    @media(max-width: 1614px){
        #detailBorder{
            max-width: 650px;
        }
    }
    @media(max-width: 1446px){
        #detailBorder{
            max-width: 550px;
        }
        .bi-arrow-up-right{
            width: 15px;
            height: 15px;
            margin-top: 18px;
        }
        .bi-pencil{
            width: 15px;
            height: 15px;
            margin-top: 18px;
        }
    }
    @media(max-width: 1288px){
        #detailBorder{
            max-width: 500px;
        }
    }
    @media(max-width: 1181px){
        #detailBorder{
            max-width: 400px;
        }
    }
    @media(max-width: 1032px){
        #detailBorder{
            max-width: 350px;
        }
    }
    @media(max-width: 981px){
        #epic{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .progress-bar .bg-success{
            width: 50%;
            margin-top: 25px;
        }
        #epicDetail{
            width: 50%;
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
        }
        #detailBorder{
            max-width: 550px;
        }
        .bi-arrow-up-right{
            margin: 0;
            right: auto;
            border: 1px solid #e9ecef;
            border-radius: 30px;
            background-color: #e9ecef;
            border-width: 8px;
            box-sizing: content-box;
            /* margin-bottom: 50px; */
        }
        .bi-pencil{
            margin: 0;
            right: auto;
            border: 1px solid #e9ecef;
            border-radius: 30px;
            background-color: #e9ecef;
            border-width: 8px;
            box-sizing: content-box;
            /* margin-bottom: 50px; */
    }
        .detailButton{
            margin-bottom: 35px;
        }
        #search{
            display: none;
        }
    }
    @media(max-width: 660px){
        #filter{
            display: none;
        }
    }
    @media(max-width: 532px){
        #create, #edit{
            display: none;
        }
        #title{
            margin: auto;
            padding-right: 50px;
            text-align: center;
            justify-content: center;
        }
    }
</style>


<!-- HEAD -->

<section id="head">
    <div id="title">
        <h1 class="fw-light">Projects</h1>
    </div>
    <div id="create">
        <a class="btn btn-outline-success" type="button" href="projects/create">Create&nbsp&nbsp&nbsp
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
                    <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
                </svg>
            </span>
        </a>    
    </div>
    <div id="search">
        <form class="d-flex" role="search" id="search">
            <input id="searchInput" name="searchInput" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-danger" type="submit">Clear</button>
        </form>
    </div>
</section>

<!-- BODY -->

<section id="body">
    <br>
    <div id="results">
    <% if (projects.length > 0) { %>
        <% for (let proj of projects) { %>
            <div id="epic">
                <div id="progressContainer" style="width: 40%" class="item">
                    <div id="progressBar">
                        <div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"
                            style="height: 50px">
                            <div class="progress-bar bg-success" style="width: 40%"></div>
                        </div>
                    </div>
                </div>
                <div id="epicDetail" style="width: 60%" class="item">
                    <p id="detailBorder">
                        <%= proj.project_Name%>
                    </p>
                </div>
                <div id="editButton">
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil"
                            viewBox="0 0 16 16">
                            <path
                                d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
                        </svg>
                    </a>
                </div>
                <div class="detailButton">
                    <a href="/projects/details/<%=proj.project_Name%>">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                            class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />
                        </svg>
                    </a>
                </div>
            </div>
        <% } %>
    <% } else { %>
        <h3>No projects registered, try creating one.</h3>
    <% } %>
    </div>
</section>

<script>

    document.getElementById("searchInput").onkeyup = () => {
        const valorBusqueda = document.getElementById("searchInput").value;
        console.log(valorBusqueda);
        fetch('/projects/' + valorBusqueda, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        }).then(result => {
            return result.json();
        }).then(data => {

            let respuesta = "";

            if (data.projects.length > 0) {
                for (let proj of data.projects) {
                    respuesta += '<div id="epic">';
                        respuesta += '<div id="progressContainer" style="width: 40%" class="item">';
                            respuesta += '<div id="progressBar">';
                                respuesta += '<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 50px">';
                                    respuesta += '<div class="progress-bar bg-success" style="width: 40%"></div>';
                                respuesta += '</div>';
                            respuesta += '</div>';
                        respuesta += '</div>';
                        respuesta += ' <div id="epicDetail" style="width: 60%" class="item">';
                            respuesta += '<p id="detailBorder">';
                                respuesta += '' + proj.project_Name + '';
                            respuesta += '</p>';
                        respuesta += '</div>';
                        respuesta += '<div id="editButton">';
                            respuesta += '<a href="#">';
                                respuesta += '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">';
                                    respuesta += '<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />';
                                respuesta += '</svg>';
                            respuesta += '</a>';
                        respuesta += '</div>';
                        respuesta += '<div class="detailButton">';
                            respuesta += '<a href="/proyects/details/' + proj.project_Name + '">';
                                respuesta += ' <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">';
                                    respuesta += '<path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z" />';
                                respuesta += '</svg>';
                            respuesta += '</a>';
                        respuesta += '</div>';
                    respuesta += '</div>';
                };
            } else {
                respuesta += '<h3>No projects registered, try creating one.</h3>'
            };
        document.getElementById("results").innerHTML = respuesta;
    }).catch(err => {
        console.log(err);
    });
};

</script>

<%- include('includes/foot.ejs') %>