<!-- Main Information Dashboard  -->
<div class="row m-b-20">

    <!-- Left Col -->
    <div class="col-12 col-md-4 m-t-20">
        <!-- left-card / Card to show total scanned files and vulnurable 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 badge-pill badge-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 badge-pill badge-primary">{{ products_with_cve }}</span></h6>
                    </div>
                </div>
            </div>

            <!-- Card Body -->
            <div class="card-body">
                <!-- SVG Graph That display total packages with known Vulnarability -->
                {{ graph_products }}
            </div>

        </div>

    </div>

    <!-- Right Col -->
    <div class="col-12 col-md-8 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>

            <div class="card-body">
                {{ graph_cves }}
            </div>
        </div>

    </div>

</div>