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

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

{% block content %}
<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="affected-fixed-by">
                    <a>
                        <span>
                            Affected/Fixed by packages ({{ affected_packages|length }}/{{ fixed_by_packages|length }})
                        </span>
                    </a>
                </li>
                <li data-tab="references">
                    <a>
                        <span>
                            References ({{ references|length }})
                        </span>
                    </a>
                </li>
                <li data-tab="severities-vectors">
                        <a>
                            <span>
                                Severities vectors ({{ severity_vectors|length }})
                            </span>
                        </a>
                    </li>

                {% if vulnerability.exploits %}
                    <li data-tab="exploits">
                        <a>
                            <span>
                                Exploits ({{ vulnerability.exploits.count }})
                            </span>
                        </a>
                    </li>
                {% endif %}

                <li data-tab="epss">
                        <a>
                            <span>
                                EPSS
                            </span>
                        </a>
                </li>

                <li data-tab="history">
                    <a>
                        <span>
                            History ({{ history|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 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 aliases %}
                                    {% 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 wrap-strings">{{ vulnerability.summary }}
                                </td>
                            </tr>
                            {% if severity_score_range %}
                            <tr>
                                <td class="two-col-left">Severity score range</td>
                                <td class="two-col-right">{{ severity_score_range }}
                                </td>
                                {% endif %}
                            </tr>
                            <tr>
                                <td class="two-col-left">Status</td>
                                <td class="two-col-right">{{ status }}</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 style="width: 160px;"> System </th>
                            <th style="width: 100px;"> Score </th>
                            <th> Found at </th>
                        </tr>
                        {% for severity in severities %}
                        <tr>
                            <td class="wrap-strings">{{ severity.scoring_system }}</td>
                            <td class="wrap-strings">{{ severity.value }}</td>
                            <td class="wrap-strings"><a href="{{ severity.url }}" target="_blank">
                                    {{ severity.url }}<i class="fa fa-external-link fa_link_custom"></i></a>
                            </td>
                        </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">
                    Affected/Fixed by packages ({{ affected_packages|length }}/{{ fixed_by_packages|length }})
                </div>
                <div class="tab-nested-div">
                    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                        <thead>
                            <tr>
                                <th style="width: 50%;">Affected</th>
                                <th>Fixed by</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for package in affected_packages|slice:":3" %}
                            <tr>
                                <td>
                                    <a href="{{ package.get_absolute_url }}?search={{ package.purl }}" target="_self">{{ package.purl }}</a>
                                </td>
                                <td>
                                    {% for match in all_affected_fixed_by_matches %}
                                        {% if match.affected_package == package %}
                                            {% if match.matched_fixed_by_packages|length > 0 %}
                                                {% for pkg in match.matched_fixed_by_packages %}
                                                    <a href="/packages/{{ pkg }}?search={{ pkg }}" target="_self">{{ pkg }}</a>
                                                    <br />
                                                {% endfor %}
                                            {% else %}
                                                <span class="emphasis-vulnerable">There are no reported fixed by versions.</span>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="2">
                                    This vulnerability is not known to affect any packages.
                                </td>
                            </tr>
                            {% endfor %}
                            {% if affected_packages|length > 3 %}
                            <tr>
                                <td colspan="2">
                                    See <a href="#" onclick="goToTab('affected-fixed-by')"><i>Affected/Fixed by packages</i></a> tab for more
                                </td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>

                <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-6">
                    Weaknesses ({{ weaknesses|length }})
                </div>
                <div class="tab-nested-div">
                    <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                        {% for weakness in weaknesses %}
                        <tr>
                            <td class="wrap-strings">CWE-{{ weakness.cwe_id }}</td>
                            <td class="wrap-strings">
                                <a href="https://cwe.mitre.org/data/definitions/{{ weakness.cwe_id }}.html"
                                    target="_blank"
                                    title="CWE-{{ weakness.cwe_id }} : description: {{weakness.description}}">
                                    {{ weakness.name }} <i class="fa fa-external-link fa_link_custom"></i>
                                </a>
                            </td>

                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="3">
                                There are no known CWE.
                            </td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>

            <div class="tab-div content" data-content="affected-fixed-by">
                <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
                    <thead>
                        <tr>
                            <th style="width: 50%;">Affected</th>
                            <th>Fixed by</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for package in affected_packages %}
                        <tr>
                            <td>
                                <a href="{{ package.get_absolute_url }}?search={{ package.purl }}" target="_self">{{ package.purl }}</a>
                            </td>
                            <td>

                                {% for match in all_affected_fixed_by_matches %}
                                    {% if match.affected_package == package %}
                                        {% if match.matched_fixed_by_packages|length > 0 %}
                                            {% for pkg in match.matched_fixed_by_packages %}
                                                <a href="/packages/{{ pkg }}?search={{ pkg }}" target="_self">{{ pkg }}</a>
                                                <br />
                                            {% endfor %}
                                        {% else %}
                                            <span class="emphasis-vulnerable">There are no reported fixed by versions.</span>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}

                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="2">
                                This vulnerability is not known to affect any packages.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </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 style="width: 250px;"> Reference type </th>
                            <th> URL </th>
                        </tr>
                    </thead>
                    {% for ref in references %}
                    <tr>
                        {% if ref.reference_id %}
                        <td class="wrap-strings">{{ ref.reference_id }}</td>
                        {% else %}
                        <td></td>
                        {% endif %}

                        {% if ref.reference_type %}
                        <td class="wrap-strings">{{ ref.get_reference_type_display }}</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="severities-vectors">
                    {% for severity_vector in severity_vectors %}
                        {% if severity_vector.version == '2.0'  %}
                            Vector: {{ severity_vector.vectorString }}
                            <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                              <tr>
                                <th>Exploitability (E)</th>
                                <th>Access Vector (AV)</th>
                                <th>Access Complexity (AC)</th>
                                <th>Authentication (Au)</th>
                                <th>Confidentiality Impact (C)</th>
                                <th>Integrity Impact (I)</th>
                                <th>Availability Impact (A)</th>
                              </tr>
                              <tr>
                                <td>{{ severity_vector.exploitability|cvss_printer:"high,functional,unproven,proof_of_concept,not_defined" }}</td>
                                <td>{{ severity_vector.accessVector|cvss_printer:"local,adjacent_network,network" }}</td>
                                <td>{{ severity_vector.accessComplexity|cvss_printer:"high,medium,low" }}</td>
                                <td>{{ severity_vector.authentication|cvss_printer:"multiple,single,none" }}</td>
                                <td>{{ severity_vector.confidentialityImpact|cvss_printer:"none,partial,complete" }}</td>
                                <td>{{ severity_vector.integrityImpact|cvss_printer:"none,partial,complete" }}</td>
                                <td>{{ severity_vector.availabilityImpact|cvss_printer:"none,partial,complete" }}</td>
                              </tr>
                            </table>
                        {% elif severity_vector.version == '3.1' or severity_vector.version == '3.0'%}
                            Vector: {{ severity_vector.vectorString }}
                            <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                                  <tr>
                                    <th>Attack Vector (AV)</th>
                                    <th>Attack Complexity (AC)</th>
                                    <th>Privileges Required (PR)</th>
                                    <th>User Interaction (UI)</th>
                                    <th>Scope (S)</th>
                                    <th>Confidentiality Impact (C)</th>
                                    <th>Integrity Impact (I)</th>
                                    <th>Availability Impact (A)</th>
                                  </tr>
                                  <tr>
                                    <td>{{ severity_vector.attackVector|cvss_printer:"network,adjacent_network,local,physical"}}</td>
                                    <td>{{ severity_vector.attackComplexity|cvss_printer:"low,high" }}</td>
                                    <td>{{ severity_vector.privilegesRequired|cvss_printer:"none,low,high" }}</td>
                                    <td>{{ severity_vector.userInteraction|cvss_printer:"none,required"}}</td>
                                    <td>{{ severity_vector.scope|cvss_printer:"unchanged,changed" }}</td>
                                    <td>{{ severity_vector.confidentialityImpact|cvss_printer:"high,low,none" }}</td>
                                    <td>{{ severity_vector.integrityImpact|cvss_printer:"high,low,none" }}</td>
                                    <td>{{ severity_vector.availabilityImpact|cvss_printer:"high,low,none" }}</td>
                                  </tr>
                                </table>
                        {% elif severity_vector.version == '4' %}
                            Vector: {{ severity_vector.vectorString }}
                            <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth gray-header-border">
                                  <tr>
                                    <th>Attack Vector (AV)</th>
                                    <th>Attack Complexity (AC)</th>
                                    <th>Attack Requirements (AT)</th>
                                    <th>Privileges Required (PR)</th>
                                    <th>User Interaction (UI)</th>
                                      
                                    <th>Vulnerable System Impact Confidentiality (VC)</th>
                                    <th>Vulnerable System Impact Integrity (VI)</th>
                                    <th>Vulnerable System Impact Availability (VA)</th>
                                      
                                    <th>Subsequent System Impact Confidentiality (SC)</th>
                                    <th>Subsequent System Impact Integrity (SI)</th>
                                    <th>Subsequent System Impact Availability (SA)</th>
                                  </tr>
                                  <tr>
                                    <td>{{ severity_vector.attackVector|cvss_printer:"network,adjacent,local,physical"}}</td>
                                    <td>{{ severity_vector.attackComplexity|cvss_printer:"low,high" }}</td>
                                    <td>{{ severity_vector.attackRequirement|cvss_printer:"none,present" }}</td>
                                    <td>{{ severity_vector.privilegesRequired|cvss_printer:"none,low,high" }}</td>
                                    <td>{{ severity_vector.userInteraction|cvss_printer:"none,passive,active"}}</td>
                                      
                                    <td>{{ severity_vector.vulnerableSystemImpactConfidentiality|cvss_printer:"high,low,none" }}</td>
                                    <td>{{ severity_vector.vulnerableSystemImpactIntegrity|cvss_printer:"high,low,none" }}</td>
                                    <td>{{ severity_vector.vulnerableSystemImpactAvailability|cvss_printer:"high,low,none" }}</td>
                                      
                                    <td>{{ severity_vector.subsequentSystemImpactConfidentiality|cvss_printer:"high,low,none" }}</td>
                                    <td>{{ severity_vector.subsequentSystemImpactIntegrity|cvss_printer:"high,low,none" }}</td>
                                    <td>{{ severity_vector.subsequentSystemImpactAvailability|cvss_printer:"high,low,none" }}</td>
                                  </tr>
                                </table>
                        {% elif severity_vector.version == 'ssvc' %}
                            <hr/>
                            Vector: {{ severity_vector.vectorString }}
                            <hr/>
                        {% endif %}
                        {% empty %}
                            <tr>
                                <td>
                                    There are no known vectors.
                                </td>
                            </tr>
                        {% endfor %}
                </div>


            <div class="tab-div content" data-content="exploits">
                {% for exploit in vulnerability.exploits.all %}
                    <table class="table is-bordered is-striped is-fullwidth gray-header-border">
                            <tr>
                                <th class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                    data-tooltip="The source of the exploit information, such as CISA KEV, Exploit-DB, Metasploit, Packet Storm, or others."> Data source </th>
                                <th> {{ exploit.data_source }} </th>
                            </tr>

                            <tbody>
                                {% if exploit.date_added %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="The date the vulnerability was added to an exploit catalog.">
                                                Date added
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.date_added }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.description %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="Description of the vulnerability in an exploit catalog, often a refinement of the original CVE description">
                                                Description
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.description }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.required_action %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="The required action to address the vulnerability,
                                                typically to apply vendor updates or apply vendor mitigations or to discontinue use.">
                                                Required action
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.required_action }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.due_date %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="The date the required action is due in the format YYYY-MM-DD,
                                                 which applies to all USA federal civilian executive branch (FCEB) agencies,
                                                  but all organizations are strongly encouraged to execute the required action.">
                                                Due date
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.due_date }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.notes %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="Additional notes and resources about the vulnerability,
                                                 often a URL to vendor instructions.">
                                                Note
                                            </span>
                                        </td>
                                        <td class="two-col-right"><pre class="has-text-black">{{ exploit.notes }}</pre></td>
                                    </tr>
                                {% endif %}
                                {% if exploit.known_ransomware_campaign_use is not None %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="'Known' if this vulnerability is known to have been leveraged as part of a ransomware campaign; or 'Unknown' if CISA lacks confirmation that the vulnerability has been utilized for ransomware.">
                                                Ransomware campaign use
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.known_ransomware_campaign_use|yesno:"Known,Unknown" }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.source_date_published %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                    data-tooltip="The date that the exploit was published or disclosed.">
                                                    Source publication date
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.source_date_published }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.exploit_type %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                        data-tooltip="The type of the exploit as provided by the original upstream data source.">
                                                        Exploit type
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.exploit_type }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.platform %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                    data-tooltip="The platform associated with the exploit as provided by the original upstream data source.">
                                                    Platform
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.platform }}</td>
                                    </tr>
                                {% endif %}
                                {% if exploit.source_date_updated %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span
                                            class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                            data-tooltip="The date the exploit was updated in the original upstream data source.">
                                            Source update date
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.source_date_updated }}</td>
                                    </tr>
                                {% endif %}

                                {% if exploit.source_url %}
                                    <tr>
                                        <td class="two-col-left">
                                            <span
                                            class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                            data-tooltip="The URL to the exploit as provided in the original upstream data source.">
                                            Source URL
                                            </span>
                                        </td>
                                        <td class="two-col-right">{{ exploit.source_url }}</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                    </table>
                {% empty %}
                    <tr>
                        <td colspan="2">
                            No exploits are available.
                        </td>
                    </tr>
                {% endfor %}
            </div>

        
            {% for severity in severities %}
                {% if severity.scoring_system == 'epss' %}
                    <div class="tab-div content" data-content="epss">
                    <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-1">
                        Exploit Prediction Scoring System
                    </div>
                    <table class="table vcio-table width-100-pct mt-2">
                            <tbody>
                                <tr>
                                    <td class="two-col-left">
                                        <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="the percentile of the current score, the proportion of all scored vulnerabilities with the same or a lower EPSS score">
                                                Percentile
                                        </span>
                                    </td>
                                    <td class="two-col-right">{{ severity.scoring_elements }}</td>
                                </tr>

                                <tr>
                                    <td class="two-col-left">
                                        <span class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                                data-tooltip="the EPSS score representing the probability [0-1] of exploitation in the wild in the next 30 days (following score publication)">
                                                EPSS score
                                        </span>
                                    </td>
                                    <td class="two-col-right">{{ severity.value }}</td>
                                </tr>

                            {% if  severity.published_at %}
                                <tr>
                                    <td class="two-col-left">
                                        <span
                                        class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                        data-tooltip="When was the time we fetched epss">
                                        Published at
                                        </span>
                                    </td>
                                    <td class="two-col-right">{{ severity.published_at }}</td>
                                </tr>
                            {% endif %}

                            </tbody>
                    </table>
                </div>
                {% endif %}
            {% empty %}
                 <div class="tab-div content" data-content="epss">
                      <tr>
                            <td>
                               There are no EPSS available.
                            </td>
                      </tr>
                 </div>
            {% endfor %}

            <div class="tab-div content" data-content="history">
                <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 date that the vulnerability was imported (collected) or improved.">
                                    Date </span>
                            </th>
                            <th>
                                <span
                                    class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                    data-tooltip="The process that created or updated the vulnerability."> Actor </span>
                            </th>
                            <th> <span
                                    class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                    data-tooltip="Imported or Improved"> Action </span> </th>
                            <th> <span
                                    class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                    data-tooltip="The public service that published the advisory or related information."> Source </span> </th>
                            <th> <span
                                    class="has-tooltip-multiline has-tooltip-black has-tooltip-arrow has-tooltip-text-left"
                                    data-tooltip="The version of VulnerableCode that performed the action. ">
                                    VulnerableCode Version
                                </span> </th>
                        </tr>
                    </thead>
                    {% for log in history %}
                    <tr>
                        <td class="is-break-word wrap-strings">{{ log.get_iso_time }}</td>
                        <td class="is-break-word wrap-strings">{{ log.actor_name }}</td>
                        <td class="is-break-word wrap-strings">{{ log.get_action_type_label }}</td>
                        <td class="is-break-word wrap-strings"> <a href="{{ log.source_url }}" target="_blank">{{log.source_url }}</a></td>
                        <td class="is-break-word wrap-strings"> {{ log.software_version }} </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5">
                            There are no relevant records.
                        </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
</section>
{% endif %}

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

<script>
    function goToTab(tabName) {
        const activeLink = document.querySelector('div.tabs.is-boxed li.is-active');
        const activeTabContent = document.querySelector('div.tab-div.is-active');

        activeLink.classList.remove('is-active');
        activeTabContent.classList.remove('is-active');

        const target_id = document.querySelector(`[data-tab='${tabName}']`);
        const targetTabContent = document.querySelector(`[data-content='${tabName}']`);

        target_id.classList.add('is-active');
        targetTabContent.classList.add('is-active');
    }
</script>


{% endblock %}