<!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>New Session</h2>
        <form name="sessionForm" action="/dashboard/session/start" method="post" id="createSessionWithEmptyAI">
          <div class="form-group row" >
            <label for="webSiteId" class="col-sm-2 col-form-label">WebSite</label>
            <div class="col-sm-10">
              <select name="webSiteId" id="webSiteId" class="form-control" form="createSessionWithEmptyAI">
                <% JSON.parse(webSiteList).forEach(function(webSite) { %>
                  <%if (webSite.name === defaultWebSiteName) { %>
                      <option value="<%=webSite.id %>" selected="selected"> <%=webSite.name %> </option>
                    <% } else{ %>
                      <option value="<%=webSite.id %>"> <%=webSite.name %> </option>
                  <% } %>
                <%})%>
              </select>
            </div>
          </div>

          <div class="form-group row">
            <label for="baseURL" class="col-sm-2 col-form-label">Exploration starting URL</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" form="createSessionWithEmptyAI" name="baseURL" id="baseURL" urls="<%=webSiteURLList%>" >
              <small id="urlHelper" class="form-text text-muted">The testers' starting point.</small>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Create</button>
        </form>
      </div>
    </div>
  </body>
  <script>

    let input = document.getElementById('webSiteId');
    let text = document.getElementById('baseURL');
    text.value = JSON.parse(text.getAttribute("urls"))[input.selectedIndex];
    input.onclick = (e) => {
      text.value = JSON.parse(text.getAttribute("urls"))[input.selectedIndex];
    };

  </script>
</html>
