<!DOCTYPE html>
<html lang="en">
    <head>
        <% include ../partials/head %>
    </head>
    <body>
        <% include ../partials/nav %>
        <div class="container">
            <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>
                <h3>Join the session </h3>
                <p>If you want to join the session and perform several exporations.</p>
                <ul>
                    <li>Install the extension <a href="/documentation-extension" target="_blank"><i class="fas fa-question-circle"></i></a></li>
                    <li>Open the extension and enter this key <input type="text" id="sessionId" value="<%=session.id %>$<%=model.id %>" readonly> </input><button id="copy" class="btn btn-primary">copy</button></li>
                    <li>Invite your collaborators to join the session, just give them the URL of this page.</li>
                </ul>
                
                <h3>Summary</h3>

                <table id="session-list" class="table table-striped table-bordered">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col" align="center">Target WebSite</th>
                        <th scope="col" align="center">Number of Explorations</th>
                        <th scope="col" align="center">AI Model</th>
                        <th scope="col" align="center">Create Test Files</th>
                    </tr>
                    </thead>
                
                    <tbody>
                        <tr>
                        <td><%=session.webSite.name%></td>
                        <td><%= session.explorationList.length %></td>
                        <td><a href="/dashboard/session/<%=connectionCode %>/ngram"><i class="fas fa-brain"></i></a></td>
                        <td><a href="/dashboard/session/<%=connectionCode %>/print"><i class="fas fa-file"></i></a></td>
                        </tr>
                    </tbody>
                </table>

                <h3>Details</h3>
                <table id="session-details" class="table table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col" align="center">#</th>
                            <th scope="col" align="center">Date</th>
                            <th scope="col" align="center">Tester</th>
                            <th scope="col" align="center">Exploration</th>
                            <th scope="col" align="center">Video</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% session.explorationList.forEach((exploration, explIndex) => { %>
                            <tr>
                                <td>
                                    <%= explIndex %>
                                </td>
                                <td>
                                    <%= (new Date(exploration.startDate)).toUTCString() %>
                                </td>
                                <td scope="row">
                                    <%= exploration.testerName %>
                                </td>
                                <td>
                                    <% exploration.interactionList.forEach((interaction, intIndex) => { %>
                                        <p>
                                        <% if (screenshot.screenshotList.find(sc => sc.explorationNumber == explIndex && sc.interactionIndex == intIndex)) { %>
                                            <a href="/static/screenshot/<%=session.id%>_<%=explIndex%>_<%=intIndex%>.jpg">
                                        <% } %>
                                       
                                        <span class="<%= interaction.concreteType%>">
                                            <span class="actionIndex"> [ <%= intIndex %> ] - </span>
                                            <span class="kind"><%= interaction.kind %></span>
                                            <% if (interaction.value !== undefined) { %>
                                                <span class="value"><%= interaction.value %></span>
                                            <%}%>
                                            <span class="date">(time : <%= (new Date(interaction.date)).getTime() - (new Date(exploration.startDate)).getTime()  %> ms)</span>
                                        </span>
                                        <% if (screenshot.screenshotList.find(sc => sc.explorationNumber == explIndex && sc.interactionIndex == intIndex)) { %>
                                            </a>
                                        <% } %>
                                        </p>
                                    <%})%>
                                </td>
                                <td>
                                    <% if (video.videoList.find(vi => vi.explorationNumber == explIndex)) { %>
                                        <a href="/static/video/<%=session.id%>_<%=explIndex%>.webm"><i class="fas fa-video" style="color:red"></i></a>
                                    <% } else { %>
                                        <i class="fas fa-video-slash"></i>
                                    <% } %>
                                </td>
                            </tr> 
                        <%})%>
                    </tbody>
                </table>
                
            </div>
        </div>
    </div>
        
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <script defer>
        function copy() {
            var copyText = document.getElementById("sessionId");
            copyText.select();
            document.execCommand("copy");
        }
        document.getElementById("copy").addEventListener("click", copy);
    </script>
    
    </body>
</html>