vulnerability_details.html

{% 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="severities">
                    <a>
                        <span>
                            Severities ({{ severities|length }})
                        </span>
                    </a>
                </li>
                <li data-tab="references">
                    <a>
                        <span>
                            References ({{ references|length }})
                        </span>
                    </a>
                </li>
                <li data-tab="severities-vectors">
                    <a>
                        <span>
                            Severity details ({{ 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>

                            <tr>
                                <td class="two-col-left"
                                    data-tooltip="Exploitability indicates the likelihood that a vulnerability in a software package 
                                    could be used by malicious actors to compromise systems,
                                    applications, or networks. This metric is determined automatically based on the discovery of known exploits.">
                                    Exploitability</td>
                                <td class="two-col-right wrap-strings">
                                    {{ vulnerability.exploitability }}
                                </td>
                            </tr>

                            <tr>
                                <td class="two-col-left"
                                    data-tooltip="Weighted severity is the highest value calculated by multiplying each severity by its corresponding weight, divided by 10."
                                >Weighted Severity</td>
                                <td class="two-col-right wrap-strings">
                                    {{ vulnerability.weighted_severity }}
                                </td>
                            </tr>

                            <tr>
                                <td class="two-col-left"
                                    data-tooltip="Risk expressed as a number ranging from 0 to 10. It is calculated by multiplying
                                    the weighted severity and exploitability values, capped at a maximum of 10.
                                    "
                                >Risk</td>
                                <td class="two-col-right wrap-strings">
                                    {{ vulnerability.risk_score }}
                                </td>
                            </tr>
                            {% if epss_data %}
                            <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 represents the probability [0-1] of exploitation in the wild in the next 30 days. Percentile indicates the proportion of all scored vulnerabilities with the same or a lower score.">
                                        EPSS Score
                                    </span>
                                </td>
                                <td class="two-col-right wrap-strings">
                                    {{ epss_data.score }}
                                    <span class="has-text-grey ml-2">({{ epss_data.percentile }} percentile)</span>
                                </td>
                            </tr>
                            {% endif %}
                            <tr>
                                <td class="two-col-left"
                                    data-tooltip="Risk expressed as a number ranging from 0 to 10. It is calculated by multiplying
                                    the weighted severity and exploitability values, capped at a maximum of 10.
                                    "
                                >Affected and Fixed Packages</td>
                                <td class="two-col-right wrap-strings">
                                    <a href="{{ vulnerability.vulnerability_id }}/packages">
                                        Package Details
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <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>

            <!-- New Severities Tab -->
            <div class="tab-div content" data-content="severities">
                <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="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="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>
        
            <div class="tab-div content" data-content="severities-vectors">
                {% for severity_vector in severity_vectors %}
                    {% if severity_vector.vector.version == '2.0'  %}
                        Vector: {{ severity_vector.vector.vectorString }} Found at <a href="{{ severity_vector.origin }}" target="_blank">{{ severity_vector.origin }}</a>
                        <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.vector.exploitability|cvss_printer:"high,functional,unproven,proof_of_concept,not_defined" }}</td>
                            <td>{{ severity_vector.vector.accessVector|cvss_printer:"local,adjacent_network,network" }}</td>
                            <td>{{ severity_vector.vector.accessComplexity|cvss_printer:"high,medium,low" }}</td>
                            <td>{{ severity_vector.vector.authentication|cvss_printer:"multiple,single,none" }}</td>
                            <td>{{ severity_vector.vector.confidentialityImpact|cvss_printer:"none,partial,complete" }}</td>
                            <td>{{ severity_vector.vector.integrityImpact|cvss_printer:"none,partial,complete" }}</td>
                            <td>{{ severity_vector.vector.availabilityImpact|cvss_printer:"none,partial,complete" }}</td>
                          </tr>
                        </table>
                    {% elif severity_vector.vector.version == '3.1' or severity_vector.vector.version == '3.0'%}
                        Vector: {{ severity_vector.vector.vectorString }} Found at <a href="{{ severity_vector.origin }}" target="_blank">{{ severity_vector.origin }}</a>
                        <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.vector.attackVector|cvss_printer:"network,adjacent_network,local,physical"}}</td>
                                <td>{{ severity_vector.vector.attackComplexity|cvss_printer:"low,high" }}</td>
                                <td>{{ severity_vector.vector.privilegesRequired|cvss_printer:"none,low,high" }}</td>
                                <td>{{ severity_vector.vector.userInteraction|cvss_printer:"none,required"}}</td>
                                <td>{{ severity_vector.vector.scope|cvss_printer:"unchanged,changed" }}</td>
                                <td>{{ severity_vector.vector.confidentialityImpact|cvss_printer:"high,low,none" }}</td>
                                <td>{{ severity_vector.vector.integrityImpact|cvss_printer:"high,low,none" }}</td>
                                <td>{{ severity_vector.vector.availabilityImpact|cvss_printer:"high,low,none" }}</td>
                              </tr>
                            </table>
                    {% elif severity_vector.vector.version == '4' %}
                        Vector: {{ severity_vector.vector.vectorString }} Found at <a href="{{ severity_vector.origin }}" target="_blank">{{ severity_vector.origin }}</a>
                        <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.vector.attackVector|cvss_printer:"network,adjacent,local,physical"}}</td>
                                <td>{{ severity_vector.vector.attackComplexity|cvss_printer:"low,high" }}</td>
                                <td>{{ severity_vector.vector.attackRequirement|cvss_printer:"none,present" }}</td>
                                <td>{{ severity_vector.vector.privilegesRequired|cvss_printer:"none,low,high" }}</td>
                                <td>{{ severity_vector.vector.userInteraction|cvss_printer:"none,passive,active"}}</td>

                                <td>{{ severity_vector.vector.vulnerableSystemImpactConfidentiality|cvss_printer:"high,low,none" }}</td>
                                <td>{{ severity_vector.vector.vulnerableSystemImpactIntegrity|cvss_printer:"high,low,none" }}</td>
                                <td>{{ severity_vector.vector.vulnerableSystemImpactAvailability|cvss_printer:"high,low,none" }}</td>

                                <td>{{ severity_vector.vector.subsequentSystemImpactConfidentiality|cvss_printer:"high,low,none" }}</td>
                                <td>{{ severity_vector.vector.subsequentSystemImpactIntegrity|cvss_printer:"high,low,none" }}</td>
                                <td>{{ severity_vector.vector.subsequentSystemImpactAvailability|cvss_printer:"high,low,none" }}</td>
                              </tr>
                            </table>
                    {% elif severity_vector.vector.version == 'ssvc' %}
                        <hr/>
                        Vector: {{ severity_vector.vector.vectorString }} Found at <a href="{{ severity_vector.origin }}" target="_blank">{{ severity_vector.origin }}</a>
                        <hr/>
                    {% endif %}
                    {% empty %}
                        <tr>
                            <td>
                                There are no known vectors.
                            </td>
                        </tr>
                    {% endfor %}
            </div>


            <div class="tab-div content" data-content="epss">
                {% if epss_data %}
                    <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-1">
                        Exploit Prediction Scoring System (EPSS)
                    </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">{{ epss_data.percentile }}</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 represents the probability [0-1] of exploitation in the wild in the next 30 days.">
                                          EPSS Score
                                    </span>
                                </td>
                                <td class="two-col-right">{{ epss_data.score }}</td>
                            </tr>
                            {% if epss_data.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="Date when the EPSS score was published.">
                                          Published At
                                    </span>
                                </td>
                                <td class="two-col-right">{{ epss_data.published_at }}</td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>

                    <div class="has-text-weight-bold tab-nested-div ml-1 mb-1 mt-4">
                        EPSS Score Trend
                    </div>
                    <div style="max-width: 800px; margin-top: 1rem;">
                        <canvas id="epssChart"></canvas>
                    </div>
                    <script id="epss-history-data" type="application/json">{{ epss_history_json }}</script>
                {% else %}
                    <p>No EPSS data available for this vulnerability.</p>
                {% endif %}
            </div>

        <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 src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" crossorigin="anonymous"></script>
<script>
    (function () {
        var canvas = document.getElementById('epssChart');
        if (!canvas) return;

        var raw = document.getElementById('epss-history-data');
        if (!raw) return;

        var history = JSON.parse(raw.textContent || '[]');
        if (history.length === 0) return;

        new Chart(canvas, {
            type: 'line',
            data: {
                labels: history.map(function (e) { return e.date; }),
                datasets: [{
                    label: 'EPSS Score',
                    data: history.map(function (e) { return e.score; }),
                    borderColor: '#3273dc',
                    backgroundColor: 'rgba(50, 115, 220, 0.08)',
                    pointRadius: history.length > 60 ? 2 : 4,
                    tension: 0.1,
                    fill: true,
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        min: 0,
                        max: 1,
                        title: { display: true, text: 'EPSS Score (0–1)' }
                    },
                    x: {
                        title: { display: true, text: 'Date' }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: {
                            afterLabel: function (ctx) {
                                var p = history[ctx.dataIndex].percentile;
                                return p != null ? 'Percentile: ' + p : '';
                            }
                        }
                    }
                }
            }
        });
    })();
</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 %}