<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-X660N8G4GR"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'G-X660N8G4GR');
        </script>
                <!-- script to reload the current tab -->
    <script>
      $(document).ready(function(){
        $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
              localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        var activeTab = localStorage.getItem('activeTab');
        if(activeTab){
          $('#myTab a[href="' + activeTab + '"]').tab('show');
          }
        });
    </script>
</head>
<body>
        <title>SIFTer Results Page</title>
      <div class = "row" id = "fifty-margin">
        <div class = "col-sm"></div>
        <div class = "col-sm" id = "idk">
            <div class = "py-5" id = "info-header" style="text-align: center;">
                <h1>SIFTer</h1>
                <div id = "top-div-border"></div>
                <h2>Results Page</h2>
                <p  id = "custom-p-width">
                  Click through the tabs to view the results of each run. <br>
                  For any failures, please rerun the tests or check manually with the provided account info. <br>
                  If you have any questions regarding the SIFTer Tool, please reach out on Slack in the <a href = "https://slack.com/app_redirect?channel=sifter-help" target= "blank">#sifter-help</a> room.
                </p>
            </div>
        </div>
        <div class = "col-sm"></div>
    </div>
    <div class = "col-md-2"></div>   
<div class="container" id="stickyContainer">
  <ul class="nav nav-tabs" id="myTab">
    <li class="nav-item"><a data-toggle="tab" href="#home" class="nav-link active">New User Tests</a></li>
    <li><a data-toggle="tab" href="#menu1" class="nav-link">Existing User Tests</a></li>
    <li><a data-toggle="tab" href="#menu2" class="nav-link">Square Sync Onboarding</a></li>
   
  </ul>
</div>
  <!-- 3 tabs results content -->
  <div class="container">
  <div class="tab-content">
    <div id="home" class="tab-pane active margin-fifty">
        <div><%- newResults %></div>
    </div>
    <div id="menu1" class="tab-pane margin-fifty">
        <div><%- existingResults %></div>
    </div>
    <div id="menu2" class="tab-pane margin-fifty">
      <div><%- sqSyncResults %></div>
    </div>
  </div>
</div>
</div>

<div class="clear"></div>
</body>

<footer class = "my-5 pt-1 text-muted text-center text-small">
  <p>You can click here to return <a href='/'>home.</a> When finished with the tool, you may close out the opened terminal window.</p>
<h3 class="footer-logo">SIFTer by ECOM QA Engineering</h3>
</footer>
<button class = "btn btn-primary" onclick="myStopFunction()" id = "refresher" class = "twenty-five">
  Stop Refresh
</button>

</html>

<script type="text/javascript">
const refreshInterval = setInterval(refresher, 15000);
function refresher() {
    window.location.reload();
  }
function myStopFunction() {
  clearInterval(refreshInterval);
}
</script>
