<!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.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <!-- DataTables -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css" integrity="sha512-zW//JOkolxm+lhiyh4aXndyG6cY6i6QGwjN+vrDrBhY/5Haxa9oRqTMBXHkF6SL+t3ocOa3PbiZkwpDjlqCyfg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap5.css" integrity="sha512-lskw1/tQpm0fzvEAWzOraaU4KZE4/eoDrdFg6d23wQ9GNib0FRh1m0idcp31VG2lYVvWDKZNI7kW5brP+83hpA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.css" integrity="sha512-+uhWySFDYLamtR3Tj/XOQyn1aVNrfbVvx5LrzDEgZZpsv0sRf3sgqleirl4D6B53RM9ph7vtsAlmg22osG925g==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.5/css/scroller.bootstrap5.css" integrity="sha512-KVh2x7z4SFDsUD4L5oDnhoUcEHjUgG9uqQUgkYjNR2SMKh9Vof+kOJ7nYSGOYbzeuHP3JxFUVOSrwJEWdOuT/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <% }else{ %>
        <!-- Bootstrap -->  
        <link rel="stylesheet" type="text/css" href="resources/twitter-bootstrap-5.1.3/css/bootstrap.min.css" />
                
        <!-- Font Awesome -->
        <link rel="stylesheet" href="resources/font-awesome-6.0.0-beta2/css/all.min.css"/>

        <!-- DataTables -->        
        <link rel="stylesheet" type="text/css" href="resources/DataTables-1.11.3/dataTables.bootstrap5.min.css"/>
        <link rel="stylesheet" type="text/css" href="resources/Buttons-2.0.1/buttons.bootstrap5.css"/>
        <link rel="stylesheet" type="text/css" href="resources/Responsive-2.2.9/responsive.bootstrap5.css"/>
        <link rel="stylesheet" type="text/css" href="resources/Scroller-2.0.5/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.11.3/js/jquery.dataTables.min.js" integrity="sha512-v06MTH6dVBNBxtfuoTGYC0/UegZpDD/yWP7qJTdO7ysX619MpBZl+2hxg3n6tWKqAlsoKlhxQlVL9furav17vg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/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.0.1/js/dataTables.buttons.js" integrity="sha512-45/xGzeU0BUbTPwmNnCavPYwWmpVHBjoqEWsTAzBdLoOH/4l0cmtj2UcU27hc+PAgSEnM9vsn6QXGSKInXVF8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.js" integrity="sha512-JCBUKi/s1TyQ/2dylx75Z/NTSemc0jzPmRTdYBlRaotauy5Ykx+mOZm7hTHMbFlmFR3xtiWZaf8CAZ56usMteA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap5.js" integrity="sha512-QVpyqmJjdzsOHx4hJFlqgxn38oeEuag8GAO96MJEzWejbnWAaMcQHAYHhlHj2vOvOHUM/X2dljsXWBATR7evTw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.js" integrity="sha512-AUlHc4SqtBqYIkzU34yYReDQUnNikULI8PwC4/7ID5ShU2oaOjfyhs2I/K8i0eBLmsAedg8v5/VAeKYKHGgFEw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.5/js/dataTables.scroller.js" integrity="sha512-r1Ub1qr6/BXhDdiMyHLswlbhejphEcxL7rD/ZZ6n4Cmp4A+j55UKTSpZ9l76WEXv571VF3ns53bfMjdC9kQBgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

            <!-- Chart.js -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js" integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ==" 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.1.3/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="resources/DataTables-1.11.3/jquery.dataTables.min.js"></script>
            <script type="text/javascript" src="resources/DataTables-1.11.3/dataTables.bootstrap5.min.js"></script>
            <script type="text/javascript" src="resources/Buttons-2.0.1/dataTables.buttons.js"></script>
            <script type="text/javascript" src="resources/Buttons-2.0.1/buttons.bootstrap5.js"></script>
            <script type="text/javascript" src="resources/Buttons-2.0.1/buttons.colVis.js"></script>
            <script type="text/javascript" src="resources/Responsive-2.2.9/dataTables.responsive.js"></script>
            <script type="text/javascript" src="resources/Scroller-2.0.5/dataTables.scroller.js"></script>

            <!-- Chart.js -->
            <script src="resources/Chart.js-3.6.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>