<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../assets/vulnerabilities.css" rel="stylesheet">
</head>
<body>
<h1><a href="{{vulnerability.source.url}}" target="_blank"
       class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4">{{ vulnerability.id }}</a>
</h1>
<div class="flex flex-col">
    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="py-4 inline-block min-w-full sm:px-6 lg:px-8">
            <div class="overflow-hidden">
                <table class="min-w-full text-left ">
                    <thead class="border-b bg-gray-50">
                    <tr class="border-b bg-slate-500">
                        <th scope="col" class="text-sm font-medium text-white px-6 py-4" colspan="5">Vulnerable Component Details</th>
                    </tr>
                    <tr>
                        <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4" >Type</th>
                        <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4" >Namespace</th>
                        <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4" >Name</th>
                        <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4" >Version</th>
                        <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4" >Package URL</th>
                    </tr>
                    </thead>
                    {% for component in components -%}
                    <tbody>
                    <tr class="bg-white border-b">
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{{ component.type }}</td>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{{ component.namespace }}</td>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{{ component.name }}</td>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{{ component.version }}</td>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">{{ component.purl }}</td>
                    </tr>
                    </tbody>
                    {% endfor -%}

                    <thead class="border-b bg-gray-50">
                    <tr class="border-b bg-slate-500">
                        <th scope="col"  class="text-sm font-medium text-white px-6 py-4"  colspan="5">Vulnerability Details</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">ID</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                            <a href="{{vulnerability.source.url}}" target="_blank" class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4">{{ vulnerability.id }}</a>
                        </td>
                    </tr>
                    {% if vulnerability.advisories | featured_link -%}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">Featured Link</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><a
                                href="{{vulnerability.advisories | featured_link}}" target="_blank"
                                class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4">{{
                            vulnerability.advisories | featured_link }}</a></td>
                    </tr>
                    {% endif -%}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">Description</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-wrap" colspan="5">{{
                            vulnerability.description }}
                        </td>
                    </tr>
                    {%- if vulnerability.recommendation %}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">Recommendation</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-wrap" colspan="4">{{
                            vulnerability.recommendation }}
                        </td>
                    </tr>
                    {%endif -%}
                    {% if vulnerability.ratings -%}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">Ratings</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-wrap" colspan="3">
                            <table>
                                <thead class="border-b bg-gray-50">
                                <tr>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">Severity</th>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">Score</th>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">Method</th>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">Vector</th>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">Source</th>
                                </tr>
                                </thead>
                                {% for r in vulnerability.ratings -%}
                                <tbody>
                                <tr>
                                    <td class="text-sm font-medium text-gray-900 px-6 py-4">
                                        <div class="{{ severity_classes[r.severity] }}" role="alert">
                                            {{- r.severity -}}
                                        </div>
                                    </td>
                                    <td class="text-sm font-medium text-gray-900 px-6 py-4">{{r.score}}</td>
                                    <td class="text-sm font-medium text-gray-900 px-6 py-4">{{r.method}}</td>
                                    <td class="text-sm font-medium text-gray-900 px-6 py-4">{{r.vector}}</td>
                                    <td class="text-sm font-medium text-gray-900 px-6 py-4">
                                        {%- if r.source -%}
                                            {{r.source.name}}
                                        {%- endif -%}
                                    </td>
                                </tr>
                                </tbody>
                                {% endfor %}
                            </table>
                        </td>
                    </tr>
                    {%- endif %}

                    {% if vulnerability.references -%}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4" colspan="1">Related Vulnerabilities</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-wrap" colspan="4">
                            <ul>
                                {% for ref in vulnerability.references -%}
                                <li>
                                    <a href="{{ref.source.url}}"
                                       class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4"
                                       target="_blank">{{ ref.id }}</a>
                                </li>
                                {%- endfor %}
                            </ul>
                        </td>
                    </tr>
                    {% endif -%}

                    {% if vulnerability.tools and vulnerability.tools.components -%}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">Found By</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-wrap" colspan="4">
                            {%- for tool in vulnerability.tools.components -%}
                            {{- tool.supplier.name }} {{ tool.name }}{{ "<br>" if not loop.last else "" -}}
                            {% endfor -%}
                        </td>
                    </tr>
                    {% endif -%}

                    {% if vulnerability.advisories -%}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">References / Advisories</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-wrap" colspan="4">
                            <ul>
                                {% for adv in vulnerability.advisories -%}
                                <li>
                                    <a href="{{adv.url}}" target="_blank"
                                       class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4">{{adv.url}}</a>
                                </li>
                                {% endfor -%}
                            </ul>
                        </td>
                    </tr>
                    {% endif -%}

                    {% if vulnerability.cwes -%}
                    <tr class="bg-white border-b">
                        <th scope="row" class="text-sm font-medium text-gray-900 px-6 py-4">Weakness Enumeration</th>
                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-wrap" colspan="4">
                            <ul>
                                {% for cwe in vulnerability.cwes -%}
                                <li>
                                    <a href="http://cwe.mitre.org/data/definitions/{{cwe}}.html"
                                       target="_blank"
                                       class="text-blue-600 hover:text-blue-700 transition duration-300 ease-in-out mb-4">CWE-{{cwe}}</a>
                                </li>
                                {% endfor -%}
                            </ul>
                        </td>
                    </tr>
                    {%endif -%}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
