<!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>
                <h2>List of Session's Explorations</h2>
                <p>The session has <%=session.explorationList.length%> explorations.</p>
                <table class="table table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <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>
                                <th scope="row">
                                    <%= exploration.testerName %>
                                </th>
                                <td>
                                    <% exploration.interactionList.forEach((interaction, intIndex) => { %>
                                        <% 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="kind"><%= interaction.kind %></span>
                                            <% if (interaction.value !== undefined) { %>
                                                <span class="value"><%= interaction.value %></span>
                                            <%}%>
                                        </span>
                                        <% if (screenshot.screenshotList.find(sc => sc.explorationNumber == explIndex && sc.interactionIndex == intIndex)) { %>
                                            </a>
                                        <% } %>
                                    <%})%>
                                </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>
    </body>
</html>