{% extends "components/_cc_shell.html" %}

{% block title %}fs-report · Report History{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ static_v('css/reports-page.css') }}">
{% endblock %}

{% block content %}
<div class="page-head fade-up">
  <div class="ptitle">
    <span class="eyebrow">{{ total_reports }} generated</span>
    <h1>Report History</h1>
  </div>
  <div class="head-actions">
    <a class="btn btn-primary" href="/#launcher"><i data-lucide="play"></i> New report</a>
    <div class="search">
      <i data-lucide="search"></i>
      <input type="text" placeholder="Search reports…" aria-label="Search reports">
    </div>
    <div class="chips">
      <span class="chip on" data-rf="all">All</span>
      <span class="chip" data-rf="executive">Executive</span>
      <span class="chip" data-rf="investigation">Investigation</span>
      <span class="chip" data-rf="remediation">Remediation</span>
      <span class="chip" data-rf="compliance">Compliance</span>
    </div>
    <button class="btn btn-ghost" id="rep-refresh"
            hx-get="/api/reports/list"
            hx-target="#reports-body"
            hx-swap="innerHTML"
            onclick="this.classList.add('spin');setTimeout(()=>this.classList.remove('spin'),900)">
      <i data-lucide="refresh-cw"></i> Refresh
    </button>
  </div>
</div>

<div id="reports-body">
  {% include "components/_reports_list.html" %}
</div>
{% endblock %}

{% block scripts %}
  <script src="{{ static_v('js/reports-page.js') }}"></script>
{% endblock %}