<!DOCTYPE html>
<html lang="en">
    <head>
        <% include ../partials/head %>
    </head>
    <body>
        <% include ../partials/nav %>
        <div class="container">
            <h2>Coverage View</h2>

            <div class="row">
                <div class="col-sm-3">Connection Code</div>
                <a class="col-sm-9" target="_blank" href="/dashboard/session/view/<%=connectionCode%>" id="connection_code"><%=connectionCode%></a>
                <div class="col-sm-3">Profile Connection Code</div>
                <a class="col-sm-9" target="_blank" href="/dashboard/session/view/<%=connectionCodeProfile%>" id="numberOfExploration"><%=connectionCodeProfile%></a>

            </div>
        <hr/>
        <h2>Coverage</h2>

            <table id="coverageTable" class="table table-striped table-bordered" connectionCode="<%=connectionCode%>">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col" align="center">Depth</th>
                        <th scope="col" align="center">Probability Coverage</th>
                        <th scope="col" align="center">Depth Coverage</th>
                    </tr>
                </thead>
                <tbody >
                    <% for (const depth in coverage) { %>
                    <tr>
                        <td><%= depth %></td>
                        <td><%= (coverage[depth].coverageRate *100).toFixed(2) %>%</td>
                        <td><%= ((coverage[depth].covered / coverage[depth].totalToCover) *100).toFixed(2) %>% (<%= coverage[depth].covered %>/<%=coverage[depth].totalToCover%>)</td>
                    </tr>
                    <%}%>
                </tbody>
            </table>

        <h2>Ngrams Not Covered</h2>
        <% for (const depth in coverage) { %>
            <h3><%= depth %>-grams%></h3>
            <table id="coverageTable<%= depth %>" class="table table-striped table-bordered" connectionCode="<%=connectionCode%>">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col" align="center">Actions</th>
                        <th scope="col" align="center">Probability</th>
                        <th scope="col" align="center">Occurence</th>
                    </tr>
                </thead>
                <tbody >
                    <% for (const notCovered of coverage[depth].notCovered) { %>
                        <tr>
                        <td><%= notCovered.actions %></td>
                        <td><%= (notCovered.probability *100).toFixed(2)%></td>
                        <td><%= notCovered.occurence %></td>
                    </tr>
                    <% } %>
                </tbody>
            </table>
        <% } %>


    </body>
</html>