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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            /* HEAD */
            h1{
                margin-top: 1em;
                margin-left: 2em;
                margin-bottom: 1em;
                font-size: 58px;
            }
            /* BODY */
            #flex{
                display: flex;
            }
            .row{
                justify-content: center;
                padding-bottom: 100px;
            }
            h3{
                font-size: 36px;
                margin-top: 25px;
            }
            .col-sm-4{
                width: 480px;
                height: 600px;
                text-align: center;
                padding: 10px;
                background-color: #e9ecef;
                border-radius: 5%;
                margin-left: 5%; 
            }
            .col-sm-8{
                width: 580px;
                height: 600px;
                text-align: center;
                background-color: #e9ecef;
                border-radius: 5%;
            }
            .bi-arrow-up-right{
                color: #252525;
                width: 21px;
                height: 21px;
            }
            .table-head{
                text-align: center;
            }
            .table-col {
                overflow: hidden; 
                text-overflow: ellipsis; 
                white-space: nowrap;
                text-align: center;
            }
            .table-responsive{
                margin-left: 3em;
                margin-right: 3em;
            }
            #ticketStatusOverviewTitleText{
                margin-top: 25px;
                margin-bottom: 25px;
            }
            #ticketStatusOverview{
                margin-left: 3%;
                margin-right: 3%;
            }
            #backButton{
                position: absolute;
                right: 0;
                margin-right: 45px;
                margin-bottom: 45px;
            }
            .table-rounded {
                border-radius: 10px;
                overflow: hidden;
            }
            .table-rounded td, .table-rounded th {
                padding: 0.75rem;
            }
            .table-rounded thead th:first-child {
                border-top-left-radius: 10px;
            }
            .table-rounded thead th:last-child {
                border-top-right-radius: 10px;
            }
            .table-rounded tbody tr:last-child td:first-child {
                border-bottom-left-radius: 10px;
            }
            .table-rounded tbody tr:last-child td:last-child {
                border-bottom-right-radius: 10px;
            }
            
            .rounded.table.table-bordered.table-striped.table-hover.table-rounded{
                margin-top: 30px;
                margin-bottom: auto;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>

    <input type="hidden" id="project_ID" value="<%= projecto %>">

<section id="head">
    <div id="title">
        <h1 class="fw-light" id="title"><%= projecto %></h1>
    </div>
</section>

<section id="body">
    <div class="row">
        <div class="col-sm-4" id="epicsTable">
            <div>
                <h3 class="fw-normal" id="epicTable">Epics</h3>
            </div>
            <div class="table-responsive">
                <table class="rounded table table-bordered table-striped table-hover table-rounded">
                    <thead class="table-head">
                        <tr>
                            <th>Epic</th>
                            <th>Summary</th>
                        </tr>
                    </thead>
                    <tbody id="results">
                        <% epics.forEach(epic=> { %>
                            <tr>
                                <td class="table-col">
                                    <%= epic.epic_Link %>
                                </td>
                                <td class="table-col">
                                    <%= epic.epic_Link_Summary %>   
                                </td>
                                <td class="table-col">
                                    <div class="detailButton">
                                        <a href="/epics/details/<%=epic.epic_Link%>">
                                            <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>
                                </td>
                            </tr>
                        <% }); %>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-8" id="ticketStatusOverview">
            <div class="ticketStatusOverview">
                <div class="ticketStatusOverviewTitle">
                    <div id="ticketStatusOverviewTitleText">
                        <h3 class="fw-normal" id="ticketStatusOverviewTitleText">Ticket Status Overview</h3>
                    </div>
                </div>
                <canvas id="doughnutChartCanvas" style="height:40vh; width:21.4vw"></canvas>
            </div>
        </div>
    </div>
</section>

<br><br><br>

<section id="footer">
    <div id="return">
        <a href="/projects" class="btn btn-outline-secondary float-right" id="backButton">Return&nbsp&nbsp&nbsp
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-return-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"/>
            </svg>  
        </a>
    </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="/js/charts.js"></script>
<script src="/js/helpers.js"></script>
<script src="/js/handlers.js"></script>

<script>
    printChartsProjectDetail();
</script>

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