<!-- Main Information Dashboard -->
<div class="row m-b-20">
    <div class="col-12 col-md-4 m-t-20">
        <!-- Graph to show Total CVE's in each product -->
        <div class="card text-color-main shadow-lg bg-white rounded">
            <div class="card-header bg-header-dash">
                <h6>CVE Summary</h6>
            </div>

            <div class="card-body">
                <table id="cveSummary" class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Severity</th>
                            <th scope="col">Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-danger">
                            <th scope="row">CRITICAL</th>
                            <td>{{ cve_severity["CRITICAL"] }}</td>
                        </tr>
                        <tr class="table-primary">
                            <th scope="row">HIGH</th>
                            <td>{{ cve_severity["HIGH"] }}</td>
                        </tr>
                        <tr class="table-warning">
                            <th scope="row">MEDIUM</th>
                            <td>{{ cve_severity["MEDIUM"] }}</td>
                        </tr>
                        <tr class="table-success">
                            <th scope="row">LOW</th>
                            <td>{{ cve_severity["LOW"] }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-4 m-t-20">
        <!-- Graph to show Total CVE's in each product -->
        <div class="card text-color-main shadow-lg bg-white rounded">
            <div class="card-header bg-header-dash">
                <h6>CVE Remarks</h6>
            </div>

            <div class="card-body">
                <table id="cveRemarks" class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Remark</th>
                            <th scope="col">Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">NEW</th>
                            <td>{{ cve_remarks["NEW"] }}</td>
                        </tr>
                        <tr>
                            <th scope="row">CONFIRMED</th>
                            <td>{{ cve_remarks["CONFIRMED"] }}</td>
                        </tr>
                        <tr>
                            <th scope="row">MITIGATED</th>
                            <td>{{ cve_remarks["MITIGATED"] }}</td>
                        </tr>
                        <tr>
                            <th scope="row">UNEXPLORED</th>
                            <td>{{ cve_remarks["UNEXPLORED"] }}</td>
                        </tr>
                        <tr>
                            <th scope="row">IGNORED</th>
                            <td>{{ cve_remarks["IGNORED"] }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-4 m-t-20">
        <!-- left-card / Card to show total scanned files and vulnerable products -->
        <div class="card text-color-main shadow-lg bg-white rounded">
            <!-- Card Header -->
            <div class="card-header text-color-main text-center bg-header-dash">
                <div class="row justify-content-sm-centre">
                    <div class="col-6">
                        <!-- If CSV or JSON input total scanned file is products_with_cve + products_without_cve -->
                        <h6>
                            Scanned Files:
                            <span class="badge rounded-pill bg-primary"
                                >{{ total_files if directory | length != 0 else
                                (products_with_cve + products_without_cve) }}</span
                            >
                        </h6>
                    </div>
                    <div class="col-6">
                        <h6>
                            Vulnerable Files:
                            <span class="badge rounded-pill bg-primary"
                                >{{ products_with_cve }}</span
                            >
                        </h6>
                    </div>
                </div>
            </div>

            <!-- Card Body -->
            <div class="card-body">
                <!-- SVG Graph That display total packages with known vulnerability -->
                {{ graph_products }}
            </div>
        </div>
    </div>
</div>
<div class="row m-b-20">
    <div class="col-12 col-md-12 m-t-20">
        <!-- Graph to show Total CVE's in each product -->
        <div class="card text-color-main shadow-lg bg-white rounded">
            <div class="card-header bg-header-dash">
                <h6>Product CVEs</h6>
            </div>

            <!-- Card Body -->
            <div class="card-body">
                <!-- SVG Graph -->
                {{ graph_cves }}
            </div>
        </div>
    </div>
</div>
