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

<!-- ESTILOS -->

<style>

    /* GENERAL */

    section{
        padding-top: 1.3em;
    }
    h1{
        margin-left: 1em;
        font-size: 76px;
    }

    /* HEAD */

    #head{
        display: flex;
    }
    .btn-outline-success, .btn-outline-primary,  .btn-outline-secondary, .form-control{
        margin-top: 2.3em;
    }
    #create{
        position: absolute;
        left: 320px;
    }
    #edit{
        position: absolute;
        left: 430px;
    }
    #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: 8px;
        padding-left: 25px;
        padding-right: 25px;
        font-size: 20px;
        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;
    }

    /* RESPONSIVE */

    @media(max-width: 2298px){
        #detailBorder{
            max-width: 1150px;
        }
    }
    @media(max-width: 2222px){
        #detailBorder{
            max-width: 1000px;
        }
    }
    @media(max-width: 1956px){
        #detailBorder{
            max-width: 850px;
        }
    }
    @media(max-width: 1710px){
        #detailBorder{
            max-width: 750px;
        }
    }
    @media(max-width: 1550px){
        #detailBorder{
            max-width: 650px;
        }
    }
    @media(max-width: 1391px){
        .progress{
            height: 40px;
        }
        #epicDetail{
            height: 40px;
            font-size: 18px;
        }
        #detailBorder{
            max-width: 550px;
        }
        .bi-arrow-up-right{
            width: 15px;
            height: 15px;
        }
    }
    @media(max-width: 1212px){
        #detailBorder{
            max-width: 450px;
        }
    }
    @media(max-width: 1041px){
        #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; */
        }
        .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>Epics</h1>
    </div>
    <div id="create">
        <a class="btn btn-outline-success" type="button" href="/epics/import">Crear&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="edit">
        <a class="btn btn-outline-primary" type="button" href="#">Editar&nbsp&nbsp&nbsp
            <span class="edit-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
                    <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
                </svg>
            </span>
        </a>
    </div>
    <div id="search">
        <form class="d-flex" role="search" id="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
    <div id="filter">
        <a class="btn btn-outline-secondary" type="button" href="?">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel-fill" viewBox="0 0 16 16">
                <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
            </svg>
        </a>
    </div>
</section>

<!-- BODY -->

<section id="body">
    <br>

    <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: 10%"></div>
                </div>
            </div>
        </div>
        <div id="epicDetail" style="width: 60%" class="item">
            <p id="detailBorder">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
        </div>
        <div class="detailButton">
            <a href="/epics/details">
                <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>

    <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">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates adipisci aliquam, minima maxime laboriosam molestiae aut exercitationem vel perspiciatis dolor libero quidem eligendi.
            </p>
        </div>
        <div class="detailButton">
            <a href="/epics/details">
                <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>

    <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: 85%"></div>
                </div>
            </div>
        </div>
        <div id="epicDetail" style="width: 60%" class="item">
            <p id="detailBorder">
                Lorem ipsum dolor sit amet consectetur adipisicing.
            </p>
        </div>
        <div class="detailButton">
            <a href="/epics/details">
                <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>

    <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: 26%"></div>
                </div>
            </div>
        </div>
        <div id="epicDetail" style="width: 60%" class="item">
            <p id="detailBorder">
                Lorem ipsum dolor sit.
            </p>
        </div>
        <div class="detailButton">
            <a href="/epics/details">
                <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>

    <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: 67%"></div>
                </div>
            </div>
        </div>
        <div id="epicDetail" style="width: 60%" class="item">
            <p id="detailBorder">
                Lorem ipsum dolor sit amet consectetur.
            </p>
        </div>
        <div class="detailButton">
            <a href="/epics/details">
                <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>

    <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: 95%"></div>
                </div>
            </div>
        </div>
        <div id="epicDetail" style="width: 60%" class="item">
            <p id="detailBorder">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod suscipit!
            </p>
        </div>
        <div class="detailButton">
            <a href="/epics/details">
                <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>

</section>

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