{# Filter bar #}
<div class="flex items-center gap-3 mb-4">
  <select class="text-sm px-2 py-1 rounded"
          style="background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);"
          hx-get="/dashboard/partials/controls/{{ project_id }}"
          hx-target="#tab-content"
          hx-include="[name='status_filter']"
          name="framework">
    <option value="all" {% if selected_framework == "all" %}selected{% endif %}>All Frameworks</option>
    {% for fw in frameworks_available %}
    <option value="{{ fw }}" {% if selected_framework == fw %}selected{% endif %}>{{ fw }}</option>
    {% endfor %}
  </select>

  <select class="text-sm px-2 py-1 rounded"
          style="background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);"
          hx-get="/dashboard/partials/controls/{{ project_id }}"
          hx-target="#tab-content"
          hx-include="[name='framework']"
          name="status_filter">
    <option value="all" {% if selected_status == "all" %}selected{% endif %}>All Statuses</option>
    <option value="pass" {% if selected_status == "pass" %}selected{% endif %}>Pass</option>
    <option value="fail" {% if selected_status == "fail" %}selected{% endif %}>Fail</option>
    <option value="manual" {% if selected_status == "manual" %}selected{% endif %}>Manual</option>
  </select>

  <span class="text-xs ml-auto" style="color: var(--text-muted);">
    {{ passing }} pass · {{ failing }} fail · {{ manual }} manual · {{ total_controls }} total
  </span>
</div>

{# Controls table #}
{% if controls %}
<div class="overflow-x-auto">
  <table class="w-full text-sm" style="border-collapse: collapse;">
    <thead>
      <tr style="border-bottom: 1px solid var(--border-default);">
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Control ID</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Title</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Framework</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Status</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Resources</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Severity</th>
        <th class="text-left px-3 py-2" style="color: var(--text-secondary);">Cross-mapped</th>
      </tr>
    </thead>
    <tbody>
      {% for control in controls %}
      <tr class="control-row" style="border-bottom: 1px solid var(--border-default); cursor: pointer;"
          hx-get="/dashboard/partials/controls/{{ project_id }}?expand={{ control.control_id }}&framework={{ selected_framework }}&status={{ selected_status }}"
          hx-target="#expand-{{ loop.index }}"
          hx-swap="innerHTML">
        <td class="px-3 py-2 font-medium" style="color: var(--text-primary);">{{ control.control_id }}</td>
        <td class="px-3 py-2" style="color: var(--text-primary);">{{ control.control_title }}</td>
        <td class="px-3 py-2" style="color: var(--text-secondary);">{{ control.framework }}</td>
        <td class="px-3 py-2">
          {% if control.status == "pass" %}
            <span class="text-xs px-1.5 py-0.5 rounded" style="background: #dcfce7; color: #166534;">PASS</span>
          {% elif control.status == "fail" %}
            <span class="text-xs px-1.5 py-0.5 rounded" style="background: #fee2e2; color: var(--cf-critical);">FAIL</span>
          {% else %}
            <span class="text-xs px-1.5 py-0.5 rounded" style="background: var(--bg-surface-hover); color: var(--text-secondary);">MANUAL</span>
          {% endif %}
        </td>
        <td class="px-3 py-2" style="color: var(--text-secondary);">{{ control.resource_count - control.failing_resources }}/{{ control.resource_count }}</td>
        <td class="px-3 py-2">
          {% if control.severity == "critical" %}
            <span style="color: var(--cf-critical);">Critical</span>
          {% elif control.severity == "high" %}
            <span style="color: var(--cf-high);">High</span>
          {% elif control.severity == "medium" %}
            <span style="color: var(--cf-medium);">Medium</span>
          {% elif control.severity == "low" %}
            <span style="color: var(--cf-low);">Low</span>
          {% endif %}
        </td>
        <td class="px-3 py-2">
          {% for cm in control.cross_mapped[:3] %}
            <span class="text-xs px-1 py-0.5 rounded mr-1" style="background: var(--bg-surface-hover); color: var(--text-secondary);">{{ cm }}</span>
          {% endfor %}
          {% if control.cross_mapped | length > 3 %}
            <span class="text-xs" style="color: var(--text-muted);">+{{ control.cross_mapped | length - 3 }}</span>
          {% endif %}
        </td>
      </tr>
      <tr>
        <td colspan="7" id="expand-{{ loop.index }}"></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if page < total_pages %}
<div class="mt-4 text-center">
  <button hx-get="/dashboard/partials/controls/{{ project_id }}?framework={{ selected_framework }}&status={{ selected_status }}&page={{ page + 1 }}&per_page=25"
          hx-target="#tab-content"
          hx-swap="innerHTML"
          class="px-4 py-2 text-sm rounded"
          style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
    Load more
  </button>
</div>
{% endif %}

{% else %}
<div class="p-4 text-center text-sm" style="color: var(--text-muted);">
  No controls match the current filters.
</div>
{% endif %}