<a onclick="resizeGraph(this)" class="list-group-item list-group-item-action" data-toggle="modal"
    data-target="#modal{{ fix_id }}">

    <div class="row">
        <div class="col-sm-5 ">
            {{ vendor }}
        </div>
        <div class="col-sm-3">
            {{ name }}
        </div>
        <div class="col-sm-2">
            {{ version }}
        </div>

        <div class="col-sm-2">
            <span class="badge badge-pill badge-primary">{{ cve_count }}</span>
            <div class="float-right">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-right" fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                </svg>
            </div>

        </div>

    </div>

</a>
<div id="modal{{ fix_id }}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"> Vendor: <span
                        class="badge badge-info badge-pill">{{ vendor }}</span> Product: <span
                        class="badge badge-info badge-pill">{{ name }}</span> Version: <span
                        class="badge badge-info badge-pill">{{ version }}</span> CVE Count: <span
                        class="badge badge-info badge-pill">{{ cve_count }}</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row p-b-20 m-b-20">
                    <!-- List CVES -->
                    <div class="col-12 col-md-7 col-lg-8" id="accord{{ fix_id }}">
                        <div class="row">
                            <div class="col-12 m-t-10 m-b-5">
                                <h5>Filter by Remarks</h5>
                                <div id="list-cve{{fix_id}}" class="list-group list-group-horizontal">
                                    <a class="list-group-item list-group-item-action active d-flex justify-content-between align-items-center"
                                        href="#remark-new{{ fix_id }}">
                                        New
                                        <span class="badge badge-primary badge-pill">{{ new_cve_count }}</span>
                                    </a>
                                    <a class="list-group-item list-group-item-action"
                                        href="#remark-confirmed{{fix_id}}">Confirmed</a>
                                    <a class="list-group-item list-group-item-action"
                                        href="#remark-mitigated{{fix_id}}">Mitigated</a>
                                    <a class="list-group-item list-group-item-action"
                                        href="#remark-unexplored{{fix_id}}">Unexplored</a>
                                    <a class="list-group-item list-group-item-action"
                                        href="#remark-ignored{{fix_id}}">Ignored</a>
                                </div>
                            </div>
                            <div class="col-12 m-t-5 m-b-10">
                                <div data-spy="scroll" data-target="#list-cve{{fix_id}}" data-offset="0"
                                    class="overflow-auto scrollspy-example z-depth-1" style="height: 52vh;">
                                    <ul class="list-group" id="listCVE{{fix_id}}">
                                        <span id="remark-new{{fix_id}}"></span>
                                        <div class="list-group-item list-group-item-secondary sticky-top">
                                            <div class="row">
                                                <div class="col-sm ">
                                                    <h6><strong>CVE Number</strong></h6>
                                                </div>
                                                <div class="col-sm">
                                                    <h6><strong>Severity</strong></h6>

                                                </div>
                                            </div>
                                        </div>
                                        {{ new_cves }}
                                        {% if confirmed_cves %}
                                        <span id="remark-confirmed{{ fix_id}}"></span>
                                        {{ confirmed_cves }}
                                        {%endif%}
                                        {% if mitigated_cves %}
                                        <span id="remark-mitigated{{ fix_id}}"></span>
                                        {{ mitigated_cves }}
                                        {%endif%}

                                        {% if unexplored_cves %}
                                        <span id="remark-unexplored{{ fix_id}}"></span>
                                        {{ unexplored_cves }}
                                        {%endif%}

                                        {% if ignored_cves %}
                                        <span id="remark-ignored{{ fix_id}}"></span>
                                        {{ ignored_cves }}
                                        {%endif%}
                                    </ul>
                                </div>
                            </div>

                        </div>

                    </div>

                    <!-- Analysis Chart for each product version -->
                    <div class="col-12 col-md-5 col-lg-4">
                        <div class="card analysis">
                            <div class="card-header text-center list-group-item-secondary">
                                <h6>Severity Analysis of {{ name }} {{ version }}</h6>
                            </div>

                            <div class="card-body">
                                {{ severity_analysis }}
                            </div>
                        </div>
                    </div>
                </div>
                {% if paths %}
                <div class="row m-b-10">
                    <div class="col-12">
                        <ul class="list-group">
                            <li class="list-group-item  list-group-item-secondary  d-flex justify-content-between align-items-center">
                                <h6><strong> Filesystem Paths containing {{ name }}-{{version}}</strong></h6>
                                <span class="badge badge-info badge-pill">Count: {{ len_paths }}</span>
                            </li>
                            {% for path in paths %}
                            <li class="list-group-item">
                                <h6>{{ path }}</h6>
                            </li>
                            {% endfor%}
                        </ul>
                    </div>

                </div>
                {% endif %}
            </div>

        </div>
    </div>


</div>