{% extends "base.html" %}
{% load humanize %}
{% load widget_tweaks %}
{% load static %}

{% block title %}
VulnerableCode Vulnerability Details - {{ vulnerability.vulnerability_id }}
{% endblock %}

{% block content %}

{% include "navbar.html" %}

<section class="section pt-0">
    {% include "vulnerability_search_box.html" %}
</section>

{% if vulnerability %}
    <section class="section pt-0">
        <div class="details-container">
            <article class="panel is-info panel-header-only">
                <div class="panel-heading py-2 is-size-6">
                    Vulnerability details:
                    <span class="tag is-white custom">
                        {{ vulnerability.vulnerability_id }}
                    </span>
                </div>
            </article>

            <div class="tabs is-boxed" id="tabs">
                <ul>
                    <li class="is-active" data-tab="essentials">
                        <a>
                            <span>Essentials</span>
                        </a>
                    </li>
                    <li data-tab="fixed-by">
                        <a>
                            <span>
                                Fixed by packages ({{ vulnerability.resolved_to|length }})
                            </span>
                        </a>
                    </li>
                    <li data-tab="affected-packages">
                        <a>
                            <span>
                                Affected packages ({{ vulnerability.vulnerable_to|length }})
                            </span>
                        </a>
                    </li>
                    <li data-tab="references">
                        <a>
                            <span>
                                References ({{ vulnerability.references.all|length }})
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div id="tab-content">
                <div class="tab-div is-active" data-content="essentials">
                    <div class="tab-nested-div">
                        <table class="table vcio-table width-100-pct width-100-pct mt-2">
                            <tbody>
                                <tr>
                                    <td class="two-col-left">Vulnerability ID</td>
                                    <td class="two-col-right">{{ vulnerability.vulnerability_id }}</td>
                                </tr>
                                <tr>
                                    <td class="two-col-left">Aliases</td>
                                    <td class="two-col-right">
                                        {% for alias in vulnerability.aliases.all %}
                                            {% if alias.url %}
                                                <a href={{ alias.url }} target="_blank">{{ alias }}<i class="fa fa-external-link fa_link_custom"></i></a>
                                            {% else %}
                                                {{ alias }}
                                            {% endif %}
                                            <br />
                                        {% endfor %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="two-col-left">Summary</td>
                                    <td class="two-col-right">{{ vulnerability.summary }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-6">
                        Severity ({{ severities|length }})
                    </div>
                    <div class="tab-nested-div">
                        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                            <tr>
                                <th> System </th>
                                <th> Score </th>
                                <th> Found at </th>
                            </tr>
                            {% for severity in severities %}
                            <tr>
                                <td>{{ severity.scoring_system }}</td>
                                <td>{{ severity.value }}</td>
                                {% if severity.reference.url %}
                                    <td><a href="{{ severity.reference.url }}" target="_blank">
                                    {{ severity.reference.url }}<i class="fa fa-external-link fa_link_custom"></i></a></td>
                                {% else %}
                                    <td>{{ severity.reference.reference_id }}</td>
                                {% endif %}
                            </tr>
                           {% empty %}
                            <tr>
                                <td colspan="3">
                                    There are no known severity scores.
                                </td>
                            </tr>
                            {% endfor %}
                        </table>
                    </div>


                    <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-6">
                        Fixed by packages ({{ vulnerability.resolved_to.all|length }})
                    </div>
                    <div class="tab-nested-div">
                        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                            {% for package in vulnerability.resolved_to.all|slice:":3" %}
                                <tr>
                                    <td>
                                        <a href="{{ package.get_absolute_url }}" target="_self">{{ package.purl }}</a>
                                        <br />
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td>
                                    There are no known fixed packages.
                                    </td>
                                </tr>
                            {% endfor %}
                            {% if vulnerability.resolved_to.all|length > 3 %}
                                <tr>
                                    <td>
                                    ... see <i>Fixed by packages</i> tab for more
                                    </td>
                                </tr>
                            {% endif %}
                        </table>
                    </div>

                    <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-6">
                        Affected packages ({{ vulnerability.vulnerable_to.all|length }})
                    </div>
                    <div class="tab-nested-div">
                        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                            {% for package in vulnerability.vulnerable_to.all|slice:":3" %}
                                <tr>
                                    <td>
                                    <a href="{{ package.get_absolute_url }}" target="_self">{{ package.purl }}</a>
                                    <br />
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td>
                                There are no known affected packages.
                                    </td>
                                </tr>
                            {% endfor %}
                            {% if vulnerability.vulnerable_to.all|length > 3 %}
                                <tr>
                                    <td>
                                ... see <i>Affected packages</i> tab for more
                                    </td>
                                </tr>
                            {% endif %}
                        </table>
                    </div>
                </div>

                <div class="tab-div content" data-content="references">
                    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
                        <thead>
                            <tr>
                                <th style="width: 250px;"> Reference id </th>
                                <th> URL </th>
                            </tr>
                        </thead>
                        {% for ref in vulnerability.references.all %}
                            <tr>
                                {% if ref.reference_id %}
                                    <td class="wrap-strings">{{ ref.reference_id }}</td>
                                {% else %}
                                    <td></td>
                                {% endif %}
                                <td class="wrap-strings"><a href="{{ ref.url }}" target="_blank">{{ ref.url }}<i class="fa fa-external-link fa_link_custom"></i></a></td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="2">
                                    There are no known references.
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>

                <div class="tab-div content" data-content="affected-packages">
                    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
                        <thead>
                            <tr>
                                <th><span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left" data-tooltip="The package url or purl is a URL string used to identify and locate a software package.">Package URL</span></th>
                                <th style="width: 225px;"><span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left" data-tooltip="This is the number of vulnerabilities that affect the package.">Affected by vulnerabilities</span></th>
                                <th style="width: 225px;"><span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left" data-tooltip="This is the number of vulnerabilities fixed by the package.">Fixing vulnerabilities</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for package in vulnerability.vulnerable_to.all %}
                                <tr>
                                    <td>
                                        <a href="{{ package.get_absolute_url }}?search={{ package.purl }}" target="_self">{{ package.purl }}</a>
                                    </td>
                                    <td>{{ package.vulnerable_to|length }}</td>
                                    <td>{{ package.resolved_to|length }}</td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="3">
                                        This vulnerability is not known to affect any packages.
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="tab-div content" data-content="fixed-by">
                    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
                        <thead>
                            <tr>
                                <th><span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left" data-tooltip="The package url or purl is a URL string used to identify and locate a software package.">Package URL</span></th>
                                <th style="width: 225px;"><span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left" data-tooltip="This is the number of vulnerabilities that affect the package.">Affected by vulnerabilities</span></th>
                                <th style="width: 225px;"><span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left" data-tooltip="This is the number of vulnerabilities fixed by the package.">Fixing vulnerabilities</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for package in vulnerability.resolved_to.all %}
                                <tr>
                                    <td>
                                        <a href="{{ package.get_absolute_url }}?search={{ package.purl }}" target="_self">{{ package.purl }}</a>
                                    </td>
                                    <td>{{ package.vulnerable_to|length }}</td>
                                    <td>{{ package.resolved_to|length }}</td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="3">
                                        This vulnerability is not known to be fixed by any packages.
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

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

<script src="{% static 'js/main.js' %}" crossorigin="anonymous"></script>

{% endblock %}
