<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Multiple Cucumber HTML Reporter</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
     integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

    <!-- DataTables -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.bootstrap4.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.bootstrap4.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.3/css/scroller.bootstrap4.css" />
    <!-- Custom Theme Style -->
    <style type="text/css">
        <%=styles %>
    </style>
</head>

<body>
    <nav class="navbar">
        <div class="container-fluid p-0">
            <table class="features-page-header table table-bordered table-fixed text-center w-100">
                <thead class="bg-primary">
                    <tr>
                        <th class="text-light">Project</th>
                        <th class="text-light">Date</th>
                        <th class="text-light">Time</th>
                    </tr>
                </thead>
                <tr>
                    <td>
                        <span><%=projectName%></span>
                    </td>
                    <td>
                        <%=suite.results.overview.executionDate%>
                    </td>
                    <td>
                        <%=suite.results.overview.executionTime%>
                    </td>
                </tr>
            </table>
        </div>
    </nav>
    <div class="container-fluid p-0">
        <div class="row d-flex flex-row p-0 mr-0 mb-4 ml-3 mr-3">
            <%= featuresOverviewChart %>
        </div>

        <div class="flex flex-column row border p-0 mr-0 mb-4 ml-3 mr-3">
            <div class="flex flex-row border-bottom d-inline-flex pl-1" data-toggle="collapse"
                data-target="#features-overview">
                <h2 class="d-flex flex-column align-text-bottom ml-2 mr-auto mb-0 mt-2"> Features Overview</h2>
                <li class="d-flex align-items-center mr-2">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-down"></i>
                    </a>
                </li>
            </div>
        </div>

        <div id="features-overview" class="collapse show container-fluid">
            <%= featuresOverview %>
        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.bootstrap4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.js"></script>

    <!-- Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
        integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>

    <!-- Custom -->

    <%= featuresOverviewScripts %>
    <!-- TODO: Update project creator with my information -->
    <div class="created-by">
        <p>Created by wswebcreation. Find me on:</p>
        <a href="http://www.wswebcreation.nl/" target="_blank">
            <i class="fa fa-rss-square fa-2x"></i>
        </a>
        <a href="https://github.com/wswebcreation/" target="_blank">
            <i class="fa fa-github-square fa-2x"></i>
        </a>
        <a href="http://nl.linkedin.com/in/wimselles" target="_blank">
            <i class="fa fa-linkedin-square fa-2x"></i>
        </a>
        <a href="http://stackoverflow.com/users/5911978/wswebcreation" target="_blank">
            <i class="fa fa-stack-overflow fa-2x"></i>
        </a>
    </div>
</body>

</html>