<!DOCTYPE html>
<html lang="en">
    <head>
        <% include ../partials/head %>
    </head>
    <body>
        <% include ../partials/nav %>
        <div class="container" id="ngramView"">
            <div class="jumbotron">
                <h1 class="display-4">AIFEX </h1>
                <p class="lead">Improve the quality, efficiency and diversity of your exploratory test sessions</p>
                <hr class="my-4"></hr>
                <% if (Object.values(ngramsData).length === 0) { %>
                    <div class="alert alert-success" role="alert">
                        <h4 class="alert-heading">Ngram Analysis</h4>
                        <p>The model <%= modelId %> does not contain any Ngram.</p>
                        <hr>
                        <p class="mb-0">Refresh this page to check if any Ngrams have been added to the model.</p>
                    </div>
                <% }  else { %>
                    <% for (let n in ngramsData) { %>
                        <h3><%= n %>-grams%></h3>

                        <table id="coverageTable" class="table table-striped table-bordered>
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col" align="center">Actions</th>
                                    <th scope="col" align="center">Occurences</th>
                                    <th scope="col" align="center">Comments</th>

                                </tr>
                            </thead>
                            <tbody >
                                <% for (let ngram of ngramsData[n]) { %>
                                    <tr>
                                        <td><%= ngram.key %></td>
                                        <td><%= ngram.occurence %></td>
                                        <td><% for (successor of ngram.successorNoteSet) { %>
                                            <%= `${successor.key} (${successor.occurence})` %>
                                            <% } %>
                                        </td>
                                    </tr>
                                    <% } %>
                            </tbody >
                        </table>
                    <% } %>
                <% } %>
            </div>
        </div>
    </body>
    
</html>