{% extends "base_generic.html" %}
{% load crispy_forms_tags bleach_tags custom_tags static %}

{% block pagetitle %}Findings Library{% endblock %}


{% block content %}
  <div class="library-page finding-library-page d-grid gap-4">
    <header class="library-page-heading">
      <div class="library-page-heading-main">
        <div class="library-page-title-row">
          <h2>Findings Library</h2>
          <span class="library-result-count">{{ filter.qs|length }} finding{{ filter.qs|length|pluralize }}</span>
        </div>
        <p>Search reusable findings, review report-linked results, or add a new finding to the library.</p>
      </div>
      <div class="library-page-actions">
        <form action="{% url 'reporting:finding_create' %}" method="POST" class="mb-0">
          {% csrf_token %}
          <button type="submit" class="btn btn-primary icon add-icon">Create Finding</button>
        </form>
        {% if filter.qs|length > 0 %}
          <button id="resetSortBtn" type="button"
                  class="btn btn-outline-secondary icon sync-icon">Reset Sort</button>
        {% endif %}
      </div>
    </header>

    <div class="filter-form library-filters finding-library-filters">
      {% crispy filter.form filter.helper %}
    </div>

    <section class="library-results finding-library-results" aria-label="Findings">
      {% if filter.qs|length == 0 %}
        <div class="empty-state m-3">
          {% if request.GET %}
            <p class="empty-state-title">No matching findings</p>
            <p class="empty-state-description">Try broadening your filters or reset them to view the finding library.</p>
            <a class="btn btn-outline-secondary btn-sm mt-3" href="{% url 'reporting:findings' %}">Reset filters</a>
          {% else %}
            <p class="empty-state-title">No findings yet</p>
            <p class="empty-state-description">Create the first reusable finding for future reports.</p>
          {% endif %}
        </div>
      {% else %}
        <div class="library-guidance" role="note">
          <i class="fas {% if searching_report_findings %}fa-file-alt{% else %}fa-bullseye{% endif %}" aria-hidden="true"></i>
          {% if searching_report_findings %}
            <p>These results are attached to reports rather than stored as reusable library findings.</p>
          {% else %}
            <div class="working-report-guidance-copy">
              <span>Adding to</span>
              <strong data-working-report-title>
                {% if active_engagement %}{{ active_engagement.report.title }}{% else %}No working report selected{% endif %}
              </strong>
              <small data-working-report-guidance-detail>
                {% if active_engagement %}
                  Quick-adds will create a copy in this report.
                {% else %}
                  Choose a report before using a quick-add action.
                {% endif %}
              </small>
            </div>
            <button type="button"
                    class="btn btn-sm btn-outline-secondary working-report-guidance-action"
                    data-bs-toggle="modal"
                    data-bs-target="#workingContextModal"
                    data-working-context-launcher="all">
              {% if active_engagement %}Change{% else %}Choose report{% endif %}
            </button>
          {% endif %}
        </div>
        <div class="library-column-controls">
          {% include "snippets/table-column-show-hide-ui.html" with column_show_hide_id="column-show-hide-ui" only %}
        </div>
        <div id="findings_table" class="table-responsive data-table-frame library-table-frame">
          <table id="findingsTable"
                 class="tablesorter table table-hover column-show-hide-table library-table library-table-wide finding-library-table"
                 data-table-name="findings" data-controls-el="column-show-hide-ui">
            <thead>
              <tr>
                <th class="sortable align-middle text-start" data-internal-name="severity">Severity</th>
                <th class="sortable align-middle text-start" data-internal-name="type">Type</th>
                <th class="sortable align-middle text-start" data-no-hide>Title</th>
                {% if searching_report_findings %}
                  <th class="sortable align-middle text-start" data-internal-name="report">Report</th>
                {% endif %}
                <th class="sortable align-middle text-start" data-hide-default data-internal-name="cvss_vector">CVSS Vector</th>
                <th class="sortable align-middle text-start sorter-false" data-hide-default data-internal-name="tags">Tags</th>
                <th class="sorter-false align-middle text-end" data-no-hide>Actions</th>
              </tr>
            </thead>
            <tbody class="list">
              {% for finding in filter.qs %}
                <tr>
                  <td class="align-middle text-start" data-label="Severity">
                    <span class="visually-hidden">{{ finding.severity.weight }}{{ finding.cvss_score }}</span>
                    <span class="library-tag finding-severity-badge finding-severity-{{ finding.severity.severity|slugify }}">
                      <i class="fas fa-shield-alt" aria-hidden="true"></i>
                      {{ finding.severity.severity }}{% if finding.cvss_score %} · {{ finding.cvss_score }}{% endif %}
                    </span>
                  </td>
                  <td class="align-middle text-start" data-label="Type">
                    <span class="library-tag library-tag-neutral">
                      <i class="fas
                        {% if finding.finding_type.finding_type == 'Cloud' %}fa-cloud
                        {% elif finding.finding_type.finding_type == 'Host' %}fa-desktop
                        {% elif finding.finding_type.finding_type == 'Mobile' %}fa-mobile-alt
                        {% elif finding.finding_type.finding_type == 'Network' %}fa-network-wired
                        {% elif finding.finding_type.finding_type == 'Physical' %}fa-building
                        {% elif finding.finding_type.finding_type == 'Web' %}fa-code
                        {% elif finding.finding_type.finding_type == 'Wireless' %}fa-wifi
                        {% else %}fa-bug{% endif %}" aria-hidden="true"></i>
                      {{ finding.finding_type.finding_type|bleach }}
                    </span>
                  </td>
                  <td class="align-middle text-start finding-title-cell library-primary-cell" data-label="Title">
                    <a class="table-primary-link library-primary-link" href="{{ finding.get_absolute_url }}">
                      <span>{{ finding.display_title }}</span>
                      <i class="fas fa-arrow-right" aria-hidden="true"></i>
                    </a>
                  </td>
                  {% if searching_report_findings %}
                    <td class="align-middle text-start" data-label="Report">
                      <a class="table-primary-link" href="{{ finding.report.get_absolute_url }}">{{ finding.report.title }}</a>
                    </td>
                  {% endif %}
                  <td class="align-middle text-start" data-label="CVSS Vector">
                    {% if finding.cvss_vector %}<code class="finding-cvss-vector">{{ finding.cvss_vector }}</code>{% else %}<span class="text-muted">Not set</span>{% endif %}
                  </td>
                  <td class="align-middle text-start" data-label="Tags">
                    {% for tag in finding.tags.all %}
                      <span class="library-tag library-tag-neutral mb-1">{{ tag.name }}</span>
                    {% endfor %}
                  </td>
                  <td class="align-middle text-end" data-label="Actions">
                    <div class="library-row-actions">
                      <button type="button" class="report-row-action"
                              title="Preview finding" aria-label="Preview {{ finding.display_title }}"
                              onclick="openModal('#finding_detail_{{ finding.id }}')">
                        <i class="fas fa-eye" aria-hidden="true"></i>
                      </button>
                      {% if not searching_report_findings %}
                        <button type="button"
                                class="report-row-action js-quick-add"
                                data-quick-add-kind="finding"
                                data-quick-add-id="{{ finding.id }}"
                                data-quick-add-label="{{ finding.display_title }}"
                                data-quick-add-csrftoken="{{ csrf_token }}"
                                data-quick-add-url="{% url 'reporting:ajax_assign_finding' finding.id %}"
                                title="{% if active_engagement %}Add to {{ active_engagement.report.title }}{% else %}Choose a working report to add this finding{% endif %}"
                                aria-label="{% if active_engagement %}Add {{ finding.display_title }} to {{ active_engagement.report.title }}{% else %}Choose a working report to add {{ finding.display_title }}{% endif %}">
                          <i class="fas fa-plus" aria-hidden="true"></i>
                        </button>
                      {% endif %}
                      <a class="report-row-action" href="{{ finding.get_edit_url }}"
                         title="Edit finding" aria-label="Edit {{ finding.display_title }}">
                        <i class="fas fa-pen" aria-hidden="true"></i>
                      </a>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% endif %}
    </section>
  </div>
{% endblock %}

{% block morescripts %}
  <script type="application/javascript" src="{% static 'js/table-columns.js' %}"></script>
  {{ autocomplete_data|json_script:"finding-autocomplete-data" }}

  {%  comment %} jQuery Tablesorter Script {% endcomment %}
  <script>
    $(document).ready(function () {
      $('#findingsTable').tablesorter(
        {
          cssAsc: 'down',
          cssDesc: 'up',
          cssNone: 'none',
          widgets: ['saveSort'],
          widgetOptions: {
            saveSort: true,
            storage_page: 'findingLibraryTable'
          }
        }
      );

      $('.tablesorter').trigger('update');

      $('#resetSortBtn').click(function() {
        $('#findingsTable')
          .trigger('saveSortReset')
          .trigger('sortReset');
        return false;
      });
    });

    $(document).ready(function () {
      const $not_cloned = $('#id_not_cloned');
      const $on_reports = $('#id_on_reports');
      {%  comment %} When ``id_not_cloned`` is checked, ensure ``id_on_reports`` is also checked {% endcomment %}
      $not_cloned.change(function () {
        if ($(this).is(':checked')) {
          $on_reports.prop('checked', true);
        }
      });

      {%  comment %} When ``id_on_reports`` is unchecked, ensure ``id_not_cloned`` is unchecked {% endcomment %}
      $on_reports.change(function () {
        if (!$(this).is(':checked')) {
          $not_cloned.prop('checked', false);
        }
      });
    });

    $(document).ready(function () {
      {%  comment %} Apply tooltips only to labels within tooltip-label-only containers {% endcomment %}
      $('.tooltip-label-only').each(function () {
        var label = $(this).find('label');
        var tooltipText = $(this).attr('data-tooltip-text');

        label.attr({
          'data-bs-toggle': 'tooltip',
          'data-bs-placement': 'top',
          'title': tooltipText
        });
      });

      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (tooltip) {
        bootstrap.Tooltip.getOrCreateInstance(tooltip);
      });
    });

    {%  comment %} Enable autocomplete for the filter form {% endcomment %}
    $(function () {
      const autocompleteData = JSON.parse(document.getElementById('finding-autocomplete-data').textContent);
      $('#id_title').autocomplete({
        source: autocompleteData.titles
      });
      $('#id_tags').autocomplete({
        source: autocompleteData.tags
      });
    });

    {%  comment %} Submit Filter when Clicking Bootstrap Icon {% endcomment %}
    $('.input-group-text').on('click', function (event) {
      $('.input-group-text').closest('form').submit();
    });
  </script>

  {% comment %} Insert modals for additional finding details {% endcomment %}
  {% for finding in filter.qs %}
    {% include "snippets/finding_detail_modal.html" with finding=finding %}
  {% endfor %}
{% endblock %}