<!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><%suite.reportTitle%></title>

    <%if(config.useCDN){%>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0-beta1/css/bootstrap.min.css" integrity="sha512-o/MhoRPVLExxZjCFVBsm17Pkztkzmh7Dp8k7/3JrtNCHh0AQ489kwpfA3dPSHzKDe8YCuEhxXq3Y71eb/o6amg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <!-- DataTables -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css" integrity="sha512-DYpTY0Ub8eZR1nPIgYG0eNVCWim5dFXr834XUOfrVw/5NNRUrPMl8mpNyHvt+CUjG3TyfV898AYXg9eOS+ekmw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.css" integrity="sha512-BcAQOSwEGyBcmArrF4tzFYpXtPy/SuNcJ/wPi45oqnX0z9ikw+4/QysnMBIndNEU7ucKf+eQMJtAaHoVVbcMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap5.css" integrity="sha512-bwdtRzbg3cj2/ia8HYiaFvb5ZuSXEG9jtiDuuOLSdO04CzR0QG56JxBuGW3u1dyQ4TruiK2iWt4AKCnj1l9kaA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.7/css/scroller.bootstrap5.css" integrity="sha512-dgWXhovC3r7M0LORvWoTJJTWgxN1LAkt6YsVAjiaa/G4THaHWPPSaJu3Me01+s38MA0YqXQ2ReX02jUnu/KgGw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <% }else{ %>
        <!-- Bootstrap -->  
        <link rel="stylesheet" type="text/css" href="resources/twitter-bootstrap-5.2.0-beta1/css/bootstrap.min.css" />
                
        <!-- Font Awesome -->
        <link rel="stylesheet" href="resources/font-awesome-6.1.1/css/all.min.css"/>

        <!-- DataTables -->        
        <link rel="stylesheet" type="text/css" href="resources/DataTables-1.12.1/dataTables.bootstrap5.min.css"/>
        <link rel="stylesheet" type="text/css" href="resources/Buttons-2.2.3/buttons.bootstrap5.css"/>
        <link rel="stylesheet" type="text/css" href="resources/Responsive-2.3.0/responsive.bootstrap5.css"/>
        <link rel="stylesheet" type="text/css" href="resources/Scroller-2.0.7/scroller.bootstrap5.css"/>
    <%}%>
    <!-- Custom Theme Style -->
    <style type="text/css">
        <%=styles %>
        <%=customStyle%>
    </style>
</head>

<body>
    <div class="features-overview-report">
        <nav class="navbar border ms-4 me-4 mt-2 mb-2">
            <div class="container-fluid p-0 m-3">
                <h1><%=suite.reportTitle%></h1>
            </div>
        </nav>
        <div class="container-fluid p-0">
            <div class="row d-flex flex-row p-0 mb-4 ms-3 me-3">
                <%= featuresOverviewChart %>
            </div>

            <div class="border p-0 mb-4 ms-4 me-4 ps-2 pe-2 pb-1">
                <div class="graph-title flex flex-column row ms-2 me-2 pb-4">
                    <div class="flex flex-row border-bottom d-inline-flex" data-bs-toggle="collapse"
                        data-bs-target="#features-overview">
                        <h2 class="d-flex flex-column align-text-bottom mb-2 mt-2"> Features Overview</h2>
                        <li class="d-flex align-items-center me-2 ms-auto">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </li>
                    </div>
                </div>

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

        <%if(config.useCDN){%>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" integrity="sha512-MOsicOaJyNWPgwMOE1q4sTPZK6KuUQTMBhkmzb0tFVSRxgx3VnGTwIyRme/IhBJQdWJkfTcIKozchO11ILrmSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0-beta1/js/bootstrap.min.js" integrity="sha512-Hqe3s+yLpqaBbXM6VA0cnj/T56ii5YjNrMT9v+us11Q81L0wzUG0jEMNECtugqNu2Uq5MSttCg0p4KK0kCPVaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js" integrity="sha512-nfoMMJ2SPcUdaoGdaRVA1XZpBVyDGhKQ/DCedW2k93MTRphPVXgaDoYV1M/AJQLCiw/cl2Nbf9pbISGqIEQRmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.js" integrity="sha512-1fie3NgPkHrB/HGz+9NbPURndMZ21tJTFMEJAxQUF8wpNd6WUMOpYIaYcYZryXP0yrFGY6fXz192aBMzeD09YQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.js" integrity="sha512-2R+pC6t5PsS50FELxdB0s5ko3QjRmxm1oLT3QnFMmsJ0mkrZnK8v6QCKNNOe9XUNMhvaLqZ1Boo1q3uFQcNV2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap5.js" integrity="sha512-ZA1gDCJI+Hul95Y1tSRi3D/GfWRRX11oJH+QqtjnpzJLBDmU9DsO2db5oL3Gn7LezkSL/XWCL5v04ZiCy/RpKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.js" integrity="sha512-trzF0W6wNDinG5oG51EAVM+4IGQEQ9rvDGEGP4/8XioQ+yuuA4aDoGZ8nV5P8wDQylWSbiRBdJbvmEFjaOaB4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.7/js/dataTables.scroller.js" integrity="sha512-0DTQ0w3+2mYGA7lQwNB4+he2dw8hWvXgEFlDGfXK/mCybEBXE+UIP9rlH3IzN+WfRLSZm/8pSe5X5nu+ZCJoJw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

            <!-- Chart.js -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js" integrity="sha512-sW/w8s4RWTdFFSduOTGtk4isV1+190E/GghVffMA9XczdJ2MDzSzLEubKAs5h0wzgSJOQTRYyaz73L3d6RtJSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <% }else{ %>
            <script type="text/javascript" src="resources/jquery-3.6.0/jquery.js"></script>
            <script type="text/javascript" src="resources/twitter-bootstrap-5.2.0-beta1/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="resources/DataTables-1.12.1/jquery.dataTables.min.js"></script>
            <script type="text/javascript" src="resources/DataTables-1.12.1/dataTables.bootstrap5.min.js"></script>
            <script type="text/javascript" src="resources/Buttons-2.2.3/dataTables.buttons.js"></script>
            <script type="text/javascript" src="resources/Buttons-2.2.3/buttons.bootstrap5.js"></script>
            <script type="text/javascript" src="resources/Buttons-2.2.3/buttons.colVis.js"></script>
            <script type="text/javascript" src="resources/Responsive-2.3.0/dataTables.responsive.js"></script>
            <script type="text/javascript" src="resources/Scroller-2.0.7/dataTables.scroller.js"></script>

            <!-- Chart.js -->
            <script src="resources/Chart.js-3.8.0/chart.min.js"></script>
            <script src="resources/chartjs-plugin-datalabels-2.0.0/chartjs-plugin-datalabels.min.js"></script>
        <%}%>     
        <!-- Custom -->

        <%= featuresOverviewScripts %>
        <div class="created-by text-center">
            <p>Created by yon cuadrado. Find me on:</p>
            <a href="https://github.com/yon-cuadrado" target="_blank">
                <i class="fab fa-github fa-2x ms-2"></i>
            </a>
            <a href="https://www.linkedin.com/in/yon-cuadrado-blanco/" target="_blank">
                <i class="fab fa-linkedin fa-2x"></i>
            </a>
        </div>
    </div>
</body>
</html>
