{% if findings %}
  <ul class="space-y-2">
  {% for f in findings %}
    <li class="text-sm border-l-2 pl-2
        {% if f.severity.value >= 3 %}border-error
        {% elif f.severity.value == 2 %}border-warning
        {% else %}border-base-content/20{% endif %}">
        <button type="button"
                class="w-full text-left hover:bg-base-300/20 rounded-r transition-colors cursor-pointer p-0.5"
                data-module="{{ f.module }}"
                data-finding-id="{{ f.id }}">
            <span class="font-medium
                {% if f.severity.value >= 3 %}text-error
                {% elif f.severity.value == 2 %}text-warning
                {% endif %}">{{ f.title }}</span>
            <span class="text-xs text-base-content/40 ml-1">{{ f.module }}</span>
            {% if f.framework_ids %}
            <div class="flex flex-wrap gap-0.5 mt-0.5">
                {% for fw, ids in f.framework_ids.items() %}
                    {% if ids is string %}
                <span class="badge badge-xs badge-ghost font-mono">{{ ids }}</span>
                    {% else %}
                        {% for fid in ids %}
                <span class="badge badge-xs badge-ghost font-mono">{{ fid }}</span>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </button>
    </li>
  {% endfor %}
  </ul>
  <script>
  document.querySelectorAll('#findings-sidebar-content button[data-finding-id]').forEach(function(btn) {
      btn.addEventListener('click', function() {
          var mod = this.getAttribute('data-module');
          var fid = this.getAttribute('data-finding-id');
          if (window.switchToFinding) { window.switchToFinding(mod, fid); }
      });
  });
  </script>
{% else %}
  <p class="text-sm text-base-content/40">No findings yet.</p>
{% endif %}