{% extends "base_generic.html" %}
{% load crispy_forms_tags report_tags bleach_tags custom_tags extra_fields determine_primary settings_tags static %}

{% block pagetitle %}{{ report.title }}{% endblock %}


{% block content %}
  <header class="detail-page-heading report-detail-heading">
    <div class="detail-page-heading-main report-detail-heading-main">
      <span class="detail-eyebrow">Report</span>
      <h2 class="mb-0">{{ report.title }}</h2>
      <div class="detail-tag-list report-detail-tags" aria-label="Report status and tags">
        <span id="js-report-header-status"
              class="report-status-tag {% if report.complete %}report-status-tag-positive{% else %}report-status-tag-neutral{% endif %}">
          <i class="fas {% if report.complete %}fa-check-circle{% else %}fa-pencil-alt{% endif %}" aria-hidden="true"></i>
          <span class="report-header-status-text">{% if report.complete %}Complete{% else %}Draft{% endif %}</span>
        </span>
        <span id="js-report-header-delivery"
              class="report-status-tag {% if report.delivered %}report-status-tag-positive{% else %}{% with report.project.end_date|add_days:report_config.target_delivery_date as delivery_date %}{% with delivery_date|days_left as delivery_days_left %}{% if delivery_days_left < 0 %}report-status-tag-overdue{% elif delivery_days_left <= 1 %}report-status-tag-imminent{% elif delivery_days_left <= 5 %}report-status-tag-due-soon{% else %}report-status-tag-neutral{% endif %}{% endwith %}{% endwith %}{% endif %}">
          <i class="fas {% if report.delivered %}fa-paper-plane{% else %}fa-clock{% endif %}" aria-hidden="true"></i>
          <span class="report-header-status-text">{% if report.delivered %}Delivered{% else %}Not Delivered{% endif %}</span>
        </span>
        {% for tag in report.tags.names %}
          <span class="library-tag library-tag-neutral">{{ tag|bleach }}</span>
        {% endfor %}
      </div>
    </div>

    <div class="dropdown detail-page-heading-actions">
      <button id="report-actions-button"
              type="button"
              class="btn btn-outline-primary btn-sm dropdown-toggle"
              data-bs-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false">
        <span>Actions</span>
      </button>
      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="report-actions-button">
        <button type="button"
                class="dropdown-item js-activate-report{% if active_engagement.report.id == report.id %} selected-report{% endif %}"
                activate-report-csrftoken="{{ csrf_token }}"
                activate-report-url="{% url 'reporting:ajax_activate_report' report.id %}"
                activate-report-id="{{ report.id }}"
                data-report-title="{{ report.title }}"
                data-working-report-unselected-label="Set as working report">
          <i class="fas {% if active_engagement.report.id == report.id %}fa-bullseye{% else %}fa-crosshairs{% endif %}" aria-hidden="true"></i>
          <span data-working-report-action-label>
            {% if active_engagement.report.id == report.id %}Working report{% else %}Set as working report{% endif %}
          </span>
        </button>
        <button type="button"
                class="dropdown-item js-work-pin"
                data-work-type="report"
                data-work-id="{{ report.id }}">
          <i class="fas fa-thumbtack" aria-hidden="true"></i>
          <span data-work-pin-label>Pin to sidebar</span>
        </button>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item icon edit-icon" href="{% url 'reporting:report_update' report.id %}">Edit report</a>
        <a class="dropdown-item icon clone-icon" href="{% url 'reporting:report_clone' report.id %}">Clone report</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item icon project-icon" href="{% url 'rolodex:project_detail' report.project.id %}">View project</a>
        <a class="dropdown-item icon company-icon" href="{% url 'rolodex:client_detail' report.project.client.id %}">View client</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item icon archive-icon"
           href="{% url 'reporting:archive' report.id %}"
           data-bs-toggle="modal"
           data-bs-target="#confirm-archive-modal"
           data-archive-url="{% url 'reporting:archive' report.id %}"
           data-archive-title="{{ report.title }}">Archive report</a>
        <a class="dropdown-item icon trash-icon text-danger" href="{% url 'reporting:report_delete' report.id %}">Delete report</a>
      </div>
    </div>
  </header>
  <hr class="w-100 my-3"/>

  <div>
    <ul id="tab-bar" class="nav nav-tabs nav-justified" role="tablist" aria-label="Report sections">
      {% include "snippets/report_nav_tabs.html" %}
    </ul>

    <div class="tab-content">
      {% comment %} Status Tab {% endcomment %}
      <div id="status" class="tab-pane" role="tabpanel" aria-labelledby="id_status">
        <div class="detail-layout">
          <section class="detail-panel" aria-labelledby="report-status-heading">
            <div class="detail-panel-header">
              <div>
                <h4 id="report-status-heading">Report Status</h4>
              </div>
            </div>
            <dl class="detail-grid detail-grid-three">
              {% with report.project.end_date|add_days:report_config.target_delivery_date as delivery_date %}
                {% with delivery_date|days_left as delivery_days_left %}
                  <div class="detail-field">
                    <dt>Target Due Date</dt>
                    <dd id="js-target-due-date"
                        class="operator-data {% if not report.delivered %}{% if delivery_days_left < 0 %}report-due-overdue{% elif delivery_days_left <= 1 %}task-imminent{% elif delivery_days_left <= 5 %}task-due-soon{% else %}task-future{% endif %}{% else %}task-future{% endif %}"
                        data-past-due="{% if delivery_days_left < 0 %}true{% else %}false{% endif %}"
                        data-pending-state="{% if delivery_days_left <= 1 %}task-imminent{% elif delivery_days_left <= 5 %}task-due-soon{% else %}task-future{% endif %}">
                      {{ delivery_date|date:"DATE_FORMAT" }}
                    </dd>
                  </div>
                {% endwith %}
              {% endwith %}
              <div class="detail-field">
                <dt>Report Status</dt>
                <dd class="report-state-control">
                  <div class="report-state-copy">
                    <span id="js-report-status" class="report-state-value">{% if report.complete %}Complete{% else %}Draft{% endif %}</span>
                    <span id="report-status-help" class="report-state-help">Controls whether the report is still being edited.</span>
                  </div>
                  <div class="form-check form-switch report-state-switch">
                    <input id="js-report-status-switch"
                           class="form-check-input js-toggle-report-status"
                           type="checkbox"
                           role="switch"
                           aria-describedby="report-status-help"
                           aria-label="{% if report.complete %}Mark report as draft{% else %}Mark report as complete{% endif %}"
                           toggle-report-status-csrftoken="{{ csrf_token }}"
                           toggle-report-status-url="{% url 'reporting:ajax_toggle_report_status' report.id %}"
                           toggle-report-status-id="{{ report.id }}"
                           {% if report.complete %}checked{% endif %}>
                  </div>
                </dd>
              </div>
              <div class="detail-field">
                <dt>Delivery Status</dt>
                <dd class="report-state-control">
                  <div class="report-state-copy">
                    <span id="js-delivery-status" class="report-state-value">{% if report.delivered %}Delivered{% else %}Not Delivered{% endif %}</span>
                    <span id="delivery-status-help" class="report-state-help">Records whether the final report reached the client.</span>
                  </div>
                  <div class="form-check form-switch report-state-switch">
                    <input id="js-delivery-status-switch"
                           class="form-check-input js-toggle-delivery-status"
                           type="checkbox"
                           role="switch"
                           aria-describedby="delivery-status-help"
                           aria-label="{% if report.delivered %}Mark report as not delivered{% else %}Mark report as delivered{% endif %}"
                           toggle-delivery-status-csrftoken="{{ csrf_token }}"
                           toggle-delivery-status-url="{% url 'reporting:ajax_toggle_report_delivery' report.id %}"
                           toggle-delivery-status-id="{{ report.id }}"
                           {% if report.delivered %}checked{% endif %}>
                  </div>
                </dd>
              </div>
            </dl>
          </section>

          <section class="detail-panel" aria-labelledby="report-config-heading">
            <div class="detail-panel-header">
              <div>
                <h4 id="report-config-heading">Report Configuration</h4>
              </div>
            </div>
            <dl class="detail-grid">
              <div class="detail-field">
                <dt class="icon hash-icon">Figure Label & Prefix</dt>
                <dd>{{ report_config.label_figure }}{{ report_config.prefix_figure }}</dd>
              </div>
              <div class="detail-field">
                <dt class="icon hash-icon">Figure Caption Location</dt>
                <dd>{{ report_config.get_figure_caption_location_display }}</dd>
              </div>
              <div class="detail-field">
                <dt class="icon align-icon">Default Evidence Image Alignment</dt>
                <dd>{{ report_config.get_evidence_image_alignment_display }}</dd>
              </div>
              <div class="detail-field">
                <dt class="icon width-icon">Default Evidence Image Width</dt>
                <dd>
              {% if report_config.evidence_image_width is not None %}
                {{ report_config.evidence_image_width }}
              {% else %}
                6.5
              {% endif %}
              inches
                </dd>
              </div>
              <div class="detail-field">
                <dt class="icon hash-icon">Table Label & Prefix</dt>
                <dd>{{ report_config.label_table }}{{ report_config.prefix_table }}</dd>
              </div>
              <div class="detail-field">
                <dt class="icon hash-icon">Table Caption Location</dt>
                <dd>{{ report_config.get_table_caption_location_display }}</dd>
              </div>
              <div class="detail-field">
                <dt class="icon toggle-on-icon">Title Case Captions</dt>
                <dd>
              {% if report_config.title_case_captions %}
                <span class="status-indicator report-config-enabled"><i class="fas fa-check" aria-hidden="true"></i> Enabled</span>
              {% else %}
                <span class="status-indicator burned"><i class="fas fa-times" aria-hidden="true"></i> Disabled</span>
              {% endif %}
                </dd>
              </div>
              <div class="detail-field">
                <dt class="icon wand-icon">Title Case Exceptions</dt>
                <dd>{{ report_config.title_case_exceptions|split_and_join:"," }}</dd>
              </div>
              <div class="detail-field">
                <dt class="icon toggle-on-icon">Image Borders</dt>
                <dd>
              {% if report_config.enable_borders %}
                <span class="status-indicator report-config-enabled"><i class="fas fa-check" aria-hidden="true"></i> Enabled</span>
              {% else %}
                <span class="status-indicator burned"><i class="fas fa-times" aria-hidden="true"></i> Disabled</span>
              {% endif %}
                </dd>
              </div>
          {% if report_config.enable_borders %}
              <div class="detail-field">
                <dt class="icon border-icon">Image Border Weight</dt>
                <dd>{{ report_config.border_weight }} EMUs
                ({{ report_config.border_weight|divide:12700 }}
                pt)
                </dd>
              </div>
              <div class="detail-field">
                <dt class="icon border-icon">Image Border Color</dt>
                <dd>#{{ report_config.border_color }} <i class="fas fa-tint"
                                                         style="color:#{{ report_config.border_color }}"></i></dd>
              </div>
              <div class="detail-field">
                <dt class="icon signature-icon">Report Download Filename</dt>
                <dd>{{ report_config.report_filename }}</dd>
              </div>
              <div class="detail-field">
                <dt class="icon calendar-icon">Delivery Date</dt>
                <dd>{% if report_config.target_delivery_date > 0 %}
                +{% endif %}{{ report_config.target_delivery_date }} business days
                </dd>
              </div>
              <div class="detail-field">
                <dt class="icon tag-icon">Operation Log Tags</dt>
                <dd>
                {% if report_config.outline_tags %}
                  {{ report_config.outline_tags|humanize_comma_list }}
                {% else %}
                  report and evidence
                {% endif %}
                </dd>
              </div>
          {% endif %}
            </dl>
          </section>
        </div>
      </div>

      {% comment %} Findings Tab {% endcomment %}
      <div id="findings" class="tab-pane in active" role="tabpanel" aria-labelledby="id_findings">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4>Current Findings</h4>
            <p class="content-section-intro">Search the finding library, add a blank finding, and manage the report's ordered findings.</p>
          </div>
          <button class="btn btn-primary btn-sm icon add-icon"
                  type="button"
                  onclick="attachBlankFinding()"
                  data-bs-toggle="tooltip"
                  data-bs-placement="top"
                  title="Add a blank finding template to the bottom of the report">
            Add a Blank Finding
          </button>
        </header>

        <!-- Search Section -->
        <form class="mb-3" action="{% url 'reporting:findings' %}" method="GET">
          <div class="report-library-search mx-auto">
            <div class="input-group">
              <span class="input-group-text fa fa-search" id="report-findings-search"></span>
              <input id="id_finding_search" autocomplete="off" type="text" class="form-control" name="finding"
                     placeholder="Search Findings..." aria-label="findings" aria-describedby="report-findings-search">
            </div>
            <input type="submit" style="display: none"/>
          </div>
        </form>

        <div class="report-workflow-hint mb-3">
          <i class="fas fa-grip-vertical" aria-hidden="true"></i>
          <p class="mb-0"><strong>Arrange your report.</strong> Drag findings within a severity group to reorder them. Open a title to edit the finding or change its severity.</p>
        </div>

        <!-- Finding Table Section -->
        <div id="findingsTable" class="mt-3">
          {% include "snippets/report_findings_table.html" with report=report csrf_token=csrf_token %}
        </div>
      </div>

      {% comment %} Observations Tab {% endcomment %}
      <div id="observations" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4>Current Observations</h4>
            <p class="content-section-intro">Search the observation library, add a blank observation, and manage the report's ordered observations.</p>
          </div>
          <button class="btn btn-primary btn-sm icon add-icon"
                  type="button"
                  onclick="attachBlankObservation()"
                  data-bs-toggle="tooltip"
                  data-bs-placement="top"
                  title="Add a blank observation template to the bottom of the report">
            Add a Blank Observation
          </button>
        </header>

        <!-- Search Section -->
        <form class="mb-3" action="{% url 'reporting:observations' %}" method="GET">
          <div class="report-library-search mx-auto">
            <div class="input-group">
              <span class="input-group-text fa fa-search" id="report-observations-search"></span>
              <input id="id_observation_search" autocomplete="off" type="text" class="form-control" name="observation"
                     placeholder="Search Observations..." aria-label="observations"
                     aria-describedby="report-observations-search">
            </div>
            <input type="submit" style="display: none"/>
          </div>
        </form>

        <div class="report-workflow-hint mb-3">
          <i class="fas fa-grip-vertical" aria-hidden="true"></i>
          <p class="mb-0"><strong>Arrange your report.</strong> Drag observations into the order they should appear. Open a title to edit its content.</p>
        </div>

        <div id="observationsTable" class="mt-3">
          {% include "snippets/report_observations_table.html" with report=report csrf_token=csrf_token %}
        </div>
      </div>

      {% comment %} Report Evidence Tab {% endcomment %}
      <div id="evidence" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4>Report Evidence</h4>
            <p class="content-section-intro">Upload files here to make them available to every finding and report section.</p>
          </div>
          <a class="icon add-icon btn btn-primary btn-sm"
             href="{% url 'reporting:upload_evidence' report.id %}"
             data-bs-toggle="tooltip"
             data-bs-placement="top"
             title="Upload evidence, attaching to a report">Upload Evidence</a>
        </header>

        {% if report.evidence_set.all %}
          <div id="evidences-table" class="report-evidence-list mt-3">
            {% for evidence_file in report.evidence_set.all %}
              <article class="report-evidence-row" data-id="{{ evidence_file.id }}">
                <div class="report-evidence-type" aria-hidden="true">
                  <i class="fas {% if evidence_file|get_file_type == 'image' %}fa-image{% else %}fa-file-code{% endif %}"></i>
                </div>
                <div class="report-evidence-identity">
                  <a href="{% url 'reporting:evidence_detail' evidence_file.id %}"
                     class="report-evidence-title">{{ evidence_file.friendly_name }}</a>
                  <span class="report-evidence-filename" title="{{ evidence_file.filename }}">
                    {{ evidence_file.filename|truncate_filename:80 }}
                  </span>
                </div>
                <div class="report-row-actions dropdown" aria-label="Actions for {{ evidence_file.friendly_name }}">
                  <button id="evidence-actions-toggle-{{ evidence_file.id }}" type="button"
                          class="btn btn-outline-secondary btn-sm report-row-actions-toggle"
                          data-bs-toggle="dropdown" aria-expanded="false"
                          aria-label="Open actions for {{ evidence_file.friendly_name }}">
                    <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
                    <span>Actions</span>
                  </button>
                  <div class="dropdown-menu dropdown-menu-end report-row-actions-menu"
                       aria-labelledby="evidence-actions-toggle-{{ evidence_file.id }}">
                    <button type="button" class="report-row-action"
                            title="Preview evidence" aria-label="Preview evidence"
                            onclick="openModal('#evidence_detail_{{ evidence_file.id }}')">
                      <i class="fas fa-eye" aria-hidden="true"></i>
                    </button>
                    <button type="button" class="report-row-action"
                            onclick="downloadEvidence({{ evidence_file.id }}, '{{ evidence_file.filename|escapejs }}')"
                            title="Download evidence" aria-label="Download evidence">
                      <i class="fas fa-download" aria-hidden="true"></i>
                    </button>
                    <a class="report-row-action" href="{% url 'reporting:evidence_update' evidence_file.id %}"
                       title="Edit evidence" aria-label="Edit evidence">
                      <i class="fas fa-pen" aria-hidden="true"></i>
                    </a>
                    <a class="report-row-action report-row-action-danger"
                       href="{% url 'reporting:evidence_delete' evidence_file.id %}"
                       title="Delete evidence" aria-label="Delete evidence">
                      <i class="fas fa-trash-alt" aria-hidden="true"></i>
                    </a>
                  </div>
                </div>
              </article>
            {% endfor %}
          </div>
        {% else %}
          <div class="empty-state mt-3">
            <p class="empty-state-title">No report evidence yet</p>
            <p class="empty-state-description">Upload evidence to reference it from findings and report sections.</p>
          </div>
        {% endif %}
      </div>

      {% if report_extra_fields_spec %}
        {% comment %} Extra Fields Tab {% endcomment %}
        <div id="extra-fields" class="tab-pane">
          <header class="content-section-header">
            <div class="content-section-heading">
              <h4>Extra Fields</h4>
              <p class="content-section-intro">Report-level values are available to templates using the reference shown on each card.</p>
            </div>
          </header>

          <div class="extra-fields-grid client-extra-fields-grid report-extra-fields-grid">
            {% for field_spec in report_extra_fields_spec %}
              <section class="extra-field-card" aria-labelledby="report-extra-field-{{ field_spec.internal_name }}">
                <div class="extra-field-card-header">
                  <h5 id="report-extra-field-{{ field_spec.internal_name }}" class="extra-field-name">{{ field_spec.display_name }}</h5>
                  <span class="extra-field-type-badge">
                    {% if field_spec.type == "rich_text" %}
                      Rich Text
                    {% else %}
                      {{ field_spec.get_type_display }}
                    {% endif %}
                  </span>
                </div>

                <div class="extra-field-reference">
                  <span>Template reference</span>
                  <code>extra_fields.{{ field_spec.internal_name }}</code>
                </div>

                <div class="extra-field-value">
                  <span class="extra-field-value-label">Current value</span>
                  <div class="extra-field-value-content">
                    {% if field_spec.type == "rich_text" %}
                      <span class="extra-field-summary">Formatted content is available in Preview.</span>
                    {% elif field_spec.type == "json" %}
                      <span class="extra-field-summary">Structured content is available in View JSON.</span>
                    {% else %}
                      {% include "user_extra_fields/field.html" with extra_fields=report.extra_fields field_spec=field_spec preview_report=report %}
                    {% endif %}
                  </div>
                </div>

                <footer class="extra-field-actions">
                  {% if field_spec.type == "rich_text" %}
                    <button type="button" class="btn btn-primary btn-sm icon view-icon" data-bs-toggle="modal"
                            data-bs-target="#field_spec_{{ field_spec.internal_name }}">Preview
                    </button>
                  {% elif field_spec.type == "json" %}
                    <button type="button" class="btn btn-primary btn-sm icon code-icon" data-bs-toggle="modal"
                            data-bs-target="#field_spec_{{ field_spec.internal_name }}">View JSON
                    </button>
                  {% endif %}
                  <a href="{% url 'reporting:report_extra_field_edit' report.id field_spec.internal_name %}"
                     class="btn btn-outline-primary btn-sm icon edit-icon"
                     title="Edit {{ field_spec.display_name }}">Edit</a>
                </footer>
              </section>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {% comment %} Generate Report Tab {% endcomment %}
      <div id="generate" class="tab-pane">
        <header class="content-section-header">
          <div class="content-section-heading">
            <h4>Generate Reports</h4>
            <p class="content-section-intro">Choose an output template and build a downloadable report from the current content.</p>
          </div>
        </header>

        <div class="generation-workspace">
          {% crispy form form.helper %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block collapse_js %}
  {{ block.super }}
{% endblock %}

{% block morescripts %}
  {% comment %} Modal for the loading spinner {% endcomment %}
  <div id="spinner-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Stand By!</h5>
        </div>
        <div class="modal-body text-center">
          <h3><i class="fas fa-cog fa-spin"></i> Generating your report...</h3>
        </div>
      </div>
    </div>
  </div>

  {{ autocomplete_data|json_script:"report-detail-autocomplete-data" }}
  <script>
    const spinnerModalElement = document.getElementById('spinner-modal');
    const spinnerModal = bootstrap.Modal.getOrCreateInstance(spinnerModalElement);
    const reportAutocompleteData = JSON.parse(document.getElementById('report-detail-autocomplete-data').textContent);

    {% comment %} Set variables used in `report_findings_table.html` that is updated on changes {% endcomment %}
    let report_id = '{{ report.id }}';
    let csrftoken = '{{ csrf_token }}';

    {% comment %} Connect to channel for report-specific notifications {% endcomment %}
    function webSocketInit() {
      ws_report = new WebSocket(
        protocol + window.location.host +
        '/ws/reports/' + {{ report.id }} + '/');

      {% comment %} Handle successful WebSocket connection {% endcomment %}
      ws_report.onopen = function () {
        console.log('Connected to report notification WebSocket');
        spinnerModal.hide();
      };

      {% comment %} Handle receiving report-specific messages {% endcomment %}
      ws_report.onmessage = function (e) {
        let data = JSON.parse(e.data);
        if (data.message['status'] === 'success') {
          console.log('Completed report generation');
          setTimeout(() => {
            spinnerModal.hide();
          }, 1000);
        }
      };

      {% comment %} Handle unexpected WebSocket closures {% endcomment %}
      ws_report.onclose = function () {
        console.error('Report notification WebSocket closed unexpectedly');
        setTimeout(() => {
          webSocketInit();
        }, 2000);
      };
    }

    webSocketInit();

    {% comment %} Display the loading spinner while report generates {% endcomment %}
    $('.js-generate-report').click(function () {
      spinnerModal.show();
      // Wait 30 seconds and hide the spinner – just in case there is an error that prevents it from closing via WebSockets
      setTimeout(() => {
        spinnerModal.hide();
      }, 20000);
    });

    function updateTargetDueDateState() {
      let targetDueDate = $('#js-target-due-date');
      let deliveryStatus = $('#js-report-header-delivery');
      let pastDue = targetDueDate.attr('data-past-due') === 'true';
      let reportNeedsAttention = !$('#js-delivery-status-switch').prop('checked');
      let pendingState = targetDueDate.attr('data-pending-state');

      targetDueDate.removeClass(
        'report-due-overdue task-imminent task-due-soon task-future'
      );
      if (pastDue && reportNeedsAttention) {
        targetDueDate.addClass('report-due-overdue');
      } else if (reportNeedsAttention) {
        targetDueDate.addClass(pendingState);
      } else {
        targetDueDate.addClass('task-future');
      }

      deliveryStatus.removeClass(
        'report-status-tag-positive report-status-tag-neutral report-status-tag-due-soon report-status-tag-imminent report-status-tag-overdue'
      );
      if (!reportNeedsAttention) {
        deliveryStatus.addClass('report-status-tag-positive');
      } else if (pastDue) {
        deliveryStatus.addClass('report-status-tag-overdue');
      } else if (pendingState === 'task-imminent') {
        deliveryStatus.addClass('report-status-tag-imminent');
      } else if (pendingState === 'task-due-soon') {
        deliveryStatus.addClass('report-status-tag-due-soon');
      } else {
        deliveryStatus.addClass('report-status-tag-neutral');
      }
    }

    {% comment %} Toggle Report Status with AJAX {% endcomment %}
    $('.js-toggle-report-status').change(function () {
      let statusSwitch = $(this);
      let previousState = !statusSwitch.prop('checked');
      let url = $(this).attr('toggle-report-status-url');
      let reportId = $(this).attr('toggle-report-status-id');
      let csrftoken = $(this).attr('toggle-report-status-csrftoken');
      let statusText = $('#js-report-status');
      let headerStatus = $('#js-report-header-status');
      statusSwitch.prop('disabled', true);
      // Prep AJAX request with CSRF token
      $.ajaxSetup({
        beforeSend: function (xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrftoken);
          }
        }
      });
      // Send AJAX POST request
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: {
          'report': reportId
        },
        success: function (data) {
          if (data['result'] !== 'success') {
            statusSwitch.prop('checked', previousState);
            displayToastTop({
              type: 'error',
              string: data['message'] || 'Could not update report status.',
              title: 'Report Update'
            });
            return;
          }
          statusSwitch.prop('checked', Boolean(data['toggle']));
          statusSwitch.attr(
            'aria-label',
            data['toggle'] ? 'Mark report as draft' : 'Mark report as complete'
          );
          statusText.text(data['status']);
          headerStatus.find('.report-header-status-text').text(data['status']);
          headerStatus.toggleClass('report-status-tag-positive', data['toggle']);
          headerStatus.toggleClass('report-status-tag-neutral', !data['toggle']);
          headerStatus.find('i')
            .toggleClass('fa-check-circle', data['toggle'])
            .toggleClass('fa-pencil-alt', !data['toggle']);
          updateTargetDueDateState();
          if ($('.engagement-context').attr('data-active-report-id') === String(reportId)) {
            $('.engagement-context-report-status').text(data['toggle'] ? 'Complete' : 'Draft');
          }
          if (data['message']) {
            displayToastTop({type: data['result'], string: data['message'], title: 'Report Update'});
          }
        },
        error: function () {
          statusSwitch.prop('checked', previousState);
          displayToastTop({type: 'error', string: 'Could not update report status.', title: 'Report Update'});
        },
        complete: function () {
          statusSwitch.prop('disabled', false);
        }
      });
    });

    {% comment %} Toggle Report Delivery Status with AJAX {% endcomment %}
    $('.js-toggle-delivery-status').change(function () {
      let deliverySwitch = $(this);
      let previousState = !deliverySwitch.prop('checked');
      let url = $(this).attr('toggle-delivery-status-url');
      let reportId = $(this).attr('toggle-delivery-status-id');
      let csrftoken = $(this).attr('toggle-delivery-status-csrftoken');
      let statusText = $('#js-delivery-status');
      let headerStatus = $('#js-report-header-delivery');
      deliverySwitch.prop('disabled', true);
      $.ajaxSetup({
        beforeSend: function (xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrftoken);
          }
        }
      });
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: {
          'report': reportId
        },
        success: function (data) {
          if (data['result'] !== 'success') {
            deliverySwitch.prop('checked', previousState);
            displayToastTop({
              type: 'error',
              string: data['message'] || 'Could not update delivery status.',
              title: 'Report Update'
            });
            return;
          }
          deliverySwitch.prop('checked', Boolean(data['toggle']));
          deliverySwitch.attr(
            'aria-label',
            data['toggle'] ? 'Mark report as not delivered' : 'Mark report as delivered'
          );
          statusText.text(data['status']);
          headerStatus.find('.report-header-status-text').text(data['status']);
          headerStatus.toggleClass('report-status-tag-positive', data['toggle']);
          headerStatus.find('i')
            .toggleClass('fa-paper-plane', data['toggle'])
            .toggleClass('fa-clock', !data['toggle']);
          if (data['complete']) {
            let reportSwitch = $('#js-report-status-switch');
            let reportStatus = $('#js-report-status');
            let reportHeaderStatus = $('#js-report-header-status');
            reportSwitch.prop('checked', true);
            reportSwitch.attr('aria-label', 'Mark report as draft');
            reportStatus.text('Complete');
            reportHeaderStatus.find('.report-header-status-text').text('Complete');
            reportHeaderStatus
              .addClass('report-status-tag-positive')
              .removeClass('report-status-tag-neutral');
            reportHeaderStatus.find('i')
              .addClass('fa-check-circle')
              .removeClass('fa-pencil-alt');
            if ($('.engagement-context').attr('data-active-report-id') === String(reportId)) {
              $('.engagement-context-report-status').text('Complete');
            }
          }
          updateTargetDueDateState();
          if ($('.engagement-context').attr('data-active-report-id') === String(reportId)) {
            $('.engagement-context-delivery-status').text(data['toggle'] ? 'Delivered' : 'Not delivered');
          }
          if (data['message']) {
            displayToastTop({type: data['result'], string: data['message'], title: 'Report Update'});
          }
        },
        error: function () {
          deliverySwitch.prop('checked', previousState);
          displayToastTop({type: 'error', string: 'Could not update delivery status.', title: 'Report Update'});
        },
        complete: function () {
          deliverySwitch.prop('disabled', false);
        }
      });
    });

    {% comment %} Save template selection on change {% endcomment %}
    $(document).ready(function () {
      // Check if the URL included a tab anchor and set it as the tab to show if so
      let hash = $(location).attr('hash');
      if (hash) {
        localStorage.setItem('reportDefaultTab', hash);
      }

      // Manage the URLs for the template link buttons
      let templateBaseUrl = '/reporting/templates/';
      let selectedWordTemplate = document.getElementById('id_docx_template').value
      let selectedPowerPointTemplate = document.getElementById('id_pptx_template').value
      let $jumpWordBtn = $('.js-jump-to-word-template')
      let $jumpPptxBtn = $('.js-jump-to-pptx-template')

      $jumpWordBtn.attr('href', templateBaseUrl + selectedWordTemplate);
      $jumpPptxBtn.attr('href', templateBaseUrl + selectedPowerPointTemplate);

      // Display whatever tab was last selected or default – if null, default to the Findings tab
      let defaultTab = (localStorage.getItem('reportDefaultTab') !== null ? localStorage.getItem('reportDefaultTab') : 'findings');
      $('[href="' + defaultTab + '"]').tab('show');

      $('#report-template-swap-form').change(function () {
        let url = $(this).attr('action');
        let $docxTemplate = $('#id_docx_template')
        let $pptxTemplate = $('#id_pptx_template')
        let $includeBloodhound = $('#id_include_bloodhound_data')
        let docxTemplateId = $docxTemplate.val();
        let pptxTemplateId = $pptxTemplate.val();
        let csrftoken = $('input[name=csrfmiddlewaretoken]').val();
        if ($pptxTemplate.val() == '') {
          pptxTemplateId = -1
        }
        if ($docxTemplate.val() == '') {
          docxTemplateId = -1
        }
        $.ajaxSetup({
          beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
              xhr.setRequestHeader('X-CSRFToken', csrftoken);
            }
          }
        });
        // Build data payload - only include bloodhound field if it exists
        let ajaxData = {
          'docx_template': docxTemplateId,
          'pptx_template': pptxTemplateId,
          'csrfmiddlewaretoken': csrftoken,
        };
        if ($includeBloodhound.length) {
          ajaxData['include_bloodhound_data'] = $includeBloodhound.is(':checked');
        }
        $.ajax({
          url: url,
          type: 'POST',
          dataType: 'json',
          data: ajaxData,
          success: function (data) {
            if (data['message']) {
              displayToastTop({type: data['result'], string: data['message'], title: 'Template Update'});
            }
            if (data['docx_lint_message']) {
              displayToastTop({
                type: data['docx_lint_result'],
                string: data['docx_lint_message'],
                title: 'Template Issue',
                delay: 10
              });
            }
            if (data['pptx_lint_message']) {
              displayToastTop({
                type: data['pptx_lint_result'],
                string: data['pptx_lint_message'],
                title: 'Template Issue',
                delay: 10
              });
            }
            if (data['warnings'] && Array.isArray(data['warnings'])) {
              data['warnings'].forEach(function(warning) {
                displayToastTop({
                  type: 'warning',
                  string: warning,
                  title: 'BloodHound Template Warning',
                  delay: 10
                });
              });
            }
            $jumpWordBtn.attr('href', templateBaseUrl + docxTemplateId);
            $jumpPptxBtn.attr('href', templateBaseUrl + pptxTemplateId);
          }
        });
      });
    });

    {%  comment %} Enable autocomplete for the findings and observations search {% endcomment %}
    $(function () {
      $("#id_finding_search").autocomplete({
        source: reportAutocompleteData.findings,
        minLength: 0,
        open: function () {
          $("ul.ui-menu").width($(this).innerWidth());
        },
        select: function (event, ui) {
          let url = ui.item.url
          let findingId = ui.item.id
          // Prep AJAX request with CSRF token
          $.ajaxSetup({
            beforeSend: function (xhr, settings) {
              if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader('X-CSRFToken', csrftoken);
              }
            }
          });
          // Send AJAX POST request
          $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {
              'finding': findingId,
              'report': report_id
            },
            success: function (data) {
              if (data['result'] == 'success') {
                $('#findingsTable').html(data['table_html']);
                // Clear the input field after successful AJAX call
                $("#id_finding_search").val('');
              }
              if (data['message']) {
                displayToastTop({type: data['result'], string: data['message'], title: 'Finding Assigned'});
              }
            }
          });
        }
      }).focus(function () {
        $(this).autocomplete('search', $(this).val())
      });
    });

    $(function () {
      $("#id_observation_search").autocomplete({
        source: reportAutocompleteData.observations,
        minLength: 0,
        open: function () {
          $("ul.ui-menu").width($(this).innerWidth());
        },
        select: function (event, ui) {
          let url = ui.item.url
          let observationId = ui.item.id
          // Prep AJAX request with CSRF token
          $.ajaxSetup({
            beforeSend: function (xhr, settings) {
              if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader('X-CSRFToken', csrftoken);
              }
            }
          });
          // Send AJAX POST request
          $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {
              'observation': observationId,
              'report': report_id
            },
            success: function (data) {
              if (data['result'] == 'success') {
                $('#observationsTable').html(data['table_html']);
                // Clear the input field after successful AJAX call
                $("#id_observation_search").val('');
              }
              if (data['message']) {
                displayToastTop({type: data['result'], string: data['message'], title: 'Observation Assigned'});
              }
            }
          });
        }
      }).focus(function () {
        $(this).autocomplete('search', $(this).val())
      });
    });

    {% comment %} Enable table sorting for the evidence table {% endcomment %}
    $(document).ready(function () {
      $(".tablesorter").tablesorter({
        cssAsc: ' down',
        cssDesc: 'up',
        cssNone: 'none',
      });
      $('.tablesorter').trigger('update');
    });

    let evidenceFiles = [
      {
        text: '\{\{.caption\}\}',
        value: '<p class="evidence-caption">{{ report_config.label_figure|force_escape|escapejs }} # {{ report_config.prefix_figure|force_escape|escapejs }} '
      },
      {% if report.evidence_set.all  %}
        {% for evidence in report.evidence_set.all %}
          {
            text: '\{\{.{{ evidence.friendly_name|escapejs }}\}\}',
            value: '{% url 'reporting:evidence_preview' evidence.id %}'
          },
        {% endfor %}
      {% endif %}
    ];


    function attachBlankObservation () {
      let attachBlankObsUrl = '{% url 'reporting:assign_blank_observation' report.id %}'
      // Prep AJAX request with CSRF token
      $.ajaxSetup({
        beforeSend: function (xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrftoken);
          }
        }
      });
      // Send AJAX POST request
      $.ajax({
        url: attachBlankObsUrl,
        type: 'POST',
        dataType: 'json',
        data: {},
        success: function (data) {
          if (data['result'] == 'success') {
            $('#observationsTable').html(data['table_html']);
          }
          if (data['message']) {
            displayToastTop({type: data['result'], string: data['message'], title: 'Observation Assigned'});
          }
        }
      });
    }

    function attachBlankFinding () {
      let attachBlankObsUrl = '{% url 'reporting:assign_blank_finding' report.id %}'
      // Prep AJAX request with CSRF token
      $.ajaxSetup({
        beforeSend: function (xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrftoken);
          }
        }
      });
      // Send AJAX POST request
      $.ajax({
        url: attachBlankObsUrl,
        type: 'POST',
        dataType: 'json',
        data: {},
        success: function (data) {
          if (data['result'] == 'success') {
            $('#findingsTable').html(data['table_html']);
          }
          if (data['message']) {
            displayToastTop({type: data['result'], string: data['message'], title: 'Finding Assigned'});
          }
        }
      });
    }

    function downloadEvidence(evidenceId, filename) {
      fetch("{% url 'reporting:evidence_download' 0 %}".replace('0', evidenceId), {
        method: 'GET',
      })
        .then(response => {
          if (!response.ok) {
            if (response.status === 404) {
              displayToastTop({
                type: 'error',
                string: 'Evidence file not found. The file may have been deleted or moved.'
              });
            } else {
              displayToastTop({type: 'error', string: 'Error downloading evidence file: ' + response.statusText});
            }
            throw new Error('Network response was not ok');
          }
          return response.blob();
        })
        .then(blob => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
          displayToastTop({type: 'success', string: 'Download started...'});
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  </script>

  {% comment %} Include the reusable delete confirmation modal and related scripts {% endcomment %}
  {% include "confirm_delete_modal.html" %}
  {% include "confirm_archive_modal.html" %}

  {% comment %} Insert modals for rich text and JSON extra field previews {% endcomment %}
  {% if report_extra_fields_spec %}
    {% for field_spec in report_extra_fields_spec %}
      {% url 'reporting:report_extra_field_json' report.id field_spec.internal_name as extra_field_json_url %}
      {% url 'reporting:report_extra_field_richtext' report.id field_spec.internal_name as extra_field_richtext_url %}
      {% include "user_extra_fields/extra_field_modal.html" with extra_fields=report.extra_fields field_spec=field_spec preview_report=report lazy_json_url=extra_field_json_url lazy_richtext_url=extra_field_richtext_url %}
    {% endfor %}

    {% include "user_extra_fields/lazy_json_modal_script.html" %}
    {% include "user_extra_fields/lazy_richtext_modal_script.html" %}

    <script>
      {% comment %} Store the last selected tab to return to it on page reload {% endcomment %}
      $('.nav-link').click(function () {
        let tab = $(this).attr('href');
        localStorage.setItem("reportDefaultTab", tab);
      });
    </script>
  {% endif %}

  {% comment %} Finding preview modal {% endcomment %}
  <div id="finding-preview-modal" class="modal fade report-preview-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-super-sized modal-dialog-centered modal-dialog-scrollable" role="document">
      <div class="modal-content report-preview-modal-content">
        <div class="modal-header report-preview-modal-header">
          <div>
            <span class="detail-eyebrow">Report output preview</span>
            <h5 class="modal-title" id="finding-preview-modal-title">Finding preview</h5>
            <p class="text-muted small mb-0">
              Styled for quick review while preserving the content that will flow into the report.
            </p>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body report-preview-modal-body" id="finding-preview-modal-body">
          <p class="text-muted mb-0">Finding preview will load when opened.</p>
        </div>
        <div class="modal-footer report-preview-modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    const findingPreviewPlaceholder = '<p class="text-muted mb-0">Finding preview will load when opened.</p>';
    const findingPreviewLoading = (
      '<div class="text-center text-muted py-5" role="status" aria-live="polite">' +
      '<i class="fas fa-spinner fa-spin fa-2x mb-3" aria-hidden="true"></i>' +
      '<p class="mb-0">Rendering finding preview&hellip;</p>' +
      '</div>'
    );

    let findingPreviewAbortController = null;

    $('#finding-preview-modal').on('show.bs.modal', function (event) {
      const $trigger = $(event.relatedTarget);
      const previewUrl = $trigger.data('finding-preview-url');
      const $body = $('#finding-preview-modal-body');

      $body.html(findingPreviewLoading);
      findingPreviewAbortController = window.AbortController ? new AbortController() : null;

      $(this).one('shown.bs.modal', function () {
        const loadingStartedAt = performance.now();
        requestAnimationFrame(function () {
          fetch(previewUrl, {
            method: 'GET',
            credentials: 'same-origin',
            signal: findingPreviewAbortController ? findingPreviewAbortController.signal : undefined,
          })
            .then(response => {
              if (!response.ok) throw new Error('Unable to render finding preview.');
              return response.text();
            })
            .then(html => {
              const remaining = Math.max(0, 350 - (performance.now() - loadingStartedAt));
              setTimeout(function () {
                if (!$('#finding-preview-modal').hasClass('show')) return;
                $body.html('<div class="rich-text-field-preview report-object-preview">' + html + '</div>');
                $body.find('[data-bs-toggle="tooltip"]').tooltip();
              }, remaining);
            })
            .catch(error => {
              if (error.name === 'AbortError') return;
              console.error(error);
              $body.html('<p class="burned mb-0">Unable to render finding preview.</p>');
            });
        });
      });
    });

    $('#finding-preview-modal').on('hide.bs.modal', function () {
      if (findingPreviewAbortController) findingPreviewAbortController.abort();
      findingPreviewAbortController = null;
      $('#finding-preview-modal-body').html(findingPreviewPlaceholder);
      $('#finding-preview-modal-title').text('Finding preview');
    });
  </script>

  {% comment %} Observation preview modal {% endcomment %}
  <div id="observation-preview-modal" class="modal fade report-preview-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-super-sized modal-dialog-centered modal-dialog-scrollable" role="document">
      <div class="modal-content report-preview-modal-content">
        <div class="modal-header report-preview-modal-header">
          <div>
            <span class="detail-eyebrow">Report output preview</span>
            <h5 class="modal-title" id="observation-preview-modal-title">Observation preview</h5>
            <p class="text-muted small mb-0">
              Styled for quick review while preserving the content that will flow into the report.
            </p>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body report-preview-modal-body" id="observation-preview-modal-body">
          <p class="text-muted mb-0">Observation preview will load when opened.</p>
        </div>
        <div class="modal-footer report-preview-modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    const observationPreviewPlaceholder = '<p class="text-muted mb-0">Observation preview will load when opened.</p>';
    const observationPreviewLoading = (
      '<div class="text-center text-muted py-5" role="status" aria-live="polite">' +
      '<i class="fas fa-spinner fa-spin fa-2x mb-3" aria-hidden="true"></i>' +
      '<p class="mb-0">Rendering observation preview&hellip;</p>' +
      '</div>'
    );

    let observationPreviewAbortController = null;

    $('#observation-preview-modal').on('show.bs.modal', function (event) {
      const $trigger = $(event.relatedTarget);
      const previewUrl = $trigger.data('observation-preview-url');
      const $body = $('#observation-preview-modal-body');

      $body.html(observationPreviewLoading);
      observationPreviewAbortController = window.AbortController ? new AbortController() : null;

      $(this).one('shown.bs.modal', function () {
        const loadingStartedAt = performance.now();
        requestAnimationFrame(function () {
          fetch(previewUrl, {
            method: 'GET',
            credentials: 'same-origin',
            signal: observationPreviewAbortController ? observationPreviewAbortController.signal : undefined,
          })
            .then(response => {
              if (!response.ok) throw new Error('Unable to render observation preview.');
              return response.text();
            })
            .then(html => {
              const remaining = Math.max(0, 350 - (performance.now() - loadingStartedAt));
              setTimeout(function () {
                if (!$('#observation-preview-modal').hasClass('show')) return;
                $body.html('<div class="rich-text-field-preview report-object-preview">' + html + '</div>');
                $body.find('[data-bs-toggle="tooltip"]').tooltip();
              }, remaining);
            })
            .catch(error => {
              if (error.name === 'AbortError') return;
              console.error(error);
              $body.html('<p class="burned mb-0">Unable to render observation preview.</p>');
            });
        });
      });
    });

    $('#observation-preview-modal').on('hide.bs.modal', function () {
      if (observationPreviewAbortController) observationPreviewAbortController.abort();
      observationPreviewAbortController = null;
      $('#observation-preview-modal-body').html(observationPreviewPlaceholder);
      $('#observation-preview-modal-title').text('Observation preview');
    });
  </script>

  {% comment %} Include the evidence lightbox modal {% endcomment %}
  {% include "snippets/evidence_lightbox_modal.html" %}

  {% comment %} Include evidence lightbox JavaScript {% endcomment %}
  <script src="{% static 'js/evidence-lightbox.js' %}"></script>

  {% comment %} Insert modals for additional evidence details {% endcomment %}
  {% get_solo "commandcenter.ReportConfiguration" as report_config %}
  {% for evidence in report.evidence_set.all %}
    {% include "snippets/evidence_detail_modal.html" with evidence=evidence %}
  {% endfor %}
{% endblock %}