{% load humanize %}
<div class="card" style="height: 95%">
  <div class="card-body">
    <h4 class="header-title mb-3"><span class="text-danger me-1"><i class="fas fa-bug"></i></span>Vulnerability Highlights</h4>
    <div class="inbox-widget table-responsive" data-simplebar style="max-height: 407px;">
      <table class="table table-borderless table-nowrap table-hover table-centered m-0">
        {% if not vulnerability_list %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          Not enough data!
        </div>
        {% else %}
        <thead class="table-light">
          <tr>
            <th style="width: 10%">Type</th>
            <th style="width: 35%">Vulnerability</th>
            <th style="width: 10%">Severity</th>
            <th style="width: 45%">Vulnerable URL</th>
          </tr>
        </thead>
        <tbody>
          {% for vulnerability in vulnerability_list %}
          <tr>
            <td><span class="badge badge-soft-primary">{{vulnerability.type}}</span></td>
            <td>
              {{vulnerability.name}}
              {% if vulnerability.cve_ids %}
              <br>
              {% for cve in vulnerability.cve_ids.all %}
                <span class="badge badge-soft-danger badge-link" data-toggle="tooltip" data-placement="top" title="CVE ID" onclick="get_and_render_cve_details('{{cve.name}}')">{{cve.name}}</span>
              {% endfor %}
              {% endif %}
              <br>
              <small class="text-muted">Discovered: {{vulnerability.discovered_date|naturaltime}}</small>
            </td>
            <td>
              {% if vulnerability.severity == 0 %}
              <span class='badge badge-soft-primary'>Info</span>
              {% elif vulnerability.severity == 1 %}
              <span class='badge badge-low'>Low</span>
              {% elif vulnerability.severity == 2 %}
              <span class='badge badge-soft-warning'>Medium</span>
              {% elif vulnerability.severity == 3 %}
              <span class='badge badge-soft-danger'>High</span>
              {% elif vulnerability.severity == 4 %}
              <span class='badge badge-critical'>Critical</span>
              {% elif vulnerability.severity == -1 %}
              <span class='badge badge-soft-info'>Unknown</span>
              {% endif %}
            </td>
            <td><a href="{{vulnerability.http_url}}" target="_blank" class="text-danger bs-tooltip" title="{{vulnerability.http_url}}">{{vulnerability.http_url|truncatechars:50}}</a></td>
          </tr>
          {% endfor %}
        </tbody>
        {% endif %}
      </table>
    </div>
  </div>
</div>