<!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.0/css/bootstrap.min.css" integrity="sha512-F7WyTLiiiPqvu2pGumDR15med0MDkUIo5VTVyyfECR5DZmCnDhti9q5VID02ItWjq6fvDfMaBaDl2J3WdL1uxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <!-- DataTables -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" integrity="sha512-MLj0nMWVz+bhfzO2zCP7CT+5R1ykvE+4IQY8QaMsKGXVH+l2obxdEj8Wof12QUZrg/WFiXz2KOMCO8ttt7Xb9A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.css" integrity="sha512-9BpMklUzjlY3bZSYyxDqhwFfEIMX/ZiLlJeMq7IPwltELS0S0RkpWeTLq75xAhK0hfmmx9DZlrqFaHU6EIA5lw==" 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.4/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.0/css/bootstrap.min.css" />
                
        <!-- Font Awesome -->
        <link rel="stylesheet" href="resources/font-awesome-5.15.4/css/all.min.css"/>

        <!-- DataTables -->        
        <link rel="stylesheet" type="text/css" href="resources/DataTables-1.10.25/dataTables.bootstrap5.min.css"/>
        <link rel="stylesheet" type="text/css" href="resources/Buttons-1.7.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.4/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.10.25/js/jquery.dataTables.min.js" integrity="sha512-JUvQkAsH4m4rmWfjEyY0ztVWRdO5PFlhurnBFrSfEeQHApIElurCiJKNWZToCUkGKBL5jAm9OoUg8COdo6WuJw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js" integrity="sha512-NWNl2ZLgVBoi6lTcMsHgCQyrZVFnSmcaa3zRv0L3aoGXshwoxkGs3esa9zwQHsChGRL4aLDnJjJJeP6MjPX46Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/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/1.7.1/js/dataTables.buttons.js" integrity="sha512-b66ZqKUYdyjRUoDP9PdaMBfmRnh/4/WWJwSMbSeYIHIHVDDLatgT19dr3LrJSynrSZz3iriGP0REDdoRGudBgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.js" integrity="sha512-dMxFAsMZzznWEPJ9tvMkHw82SfCqxv3vmhSRKRvwLrSc/hBm8DnEJuXxOXJ6OfkYDDoWSGYyqIZH46Dt3uLL0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.js" integrity="sha512-XxgPvxsz8F5VamGQBslGeBNrX0QoflMtVo5wbLhhVbbKstFRAFTvqeLyK2jZ5FEmcXs7uOGcpn5Am/h037JsOQ==" 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.4/js/dataTables.scroller.js" integrity="sha512-c69CRui3p8wciU01mqJ1wutk52dodxVLg9s/3d2NmSKx5x5lL3tPLPa4nuygAVqgOGK+21FJRb4Uxuwt9wZbeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

            <!-- Chart.js -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" 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.0/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="resources/DataTables-1.10.25/jquery.dataTables.min.js"></script>
            <script type="text/javascript" src="resources/DataTables-1.10.25/dataTables.bootstrap5.min.js"></script>
            <script type="text/javascript" src="resources/Buttons-1.7.1/dataTables.buttons.js"></script>
            <script type="text/javascript" src="resources/Buttons-1.7.1/buttons.bootstrap5.js"></script>
            <script type="text/javascript" src="resources/Buttons-1.7.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.4/dataTables.scroller.js"></script>

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