{% extends "base.html" %}
{% block title %}q-ai — Research{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-6 py-6 space-y-8">

    <!-- Runs section -->
    <section>
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-bold">Runs</h2>
            <form class="flex gap-2" hx-get="/api/runs" hx-target="#runs-table"
                  hx-trigger="change from:find(select)">
                <select class="select select-bordered select-xs" name="module">
                    <option value="">All modules</option>
                    {% for mod in modules %}
                    <option value="{{ mod }}">{{ mod }}</option>
                    {% endfor %}
                </select>
                <select class="select select-bordered select-xs" name="status">
                    <option value="">All statuses</option>
                    {% for st in statuses %}
                    <option value="{{ st }}">{{ st }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>
        <div class="overflow-x-auto panel">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Module</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Target</th>
                        <th>Started</th>
                    </tr>
                </thead>
                <tbody id="runs-table">
                    {% include "partials/runs_table.html" %}
                </tbody>
            </table>
        </div>
    </section>

    <!-- Findings section -->
    <section>
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-bold">Findings</h2>
            <form class="flex gap-2" hx-get="/api/findings" hx-target="#findings-table"
                  hx-trigger="change from:find(select)">
                <select class="select select-bordered select-xs" name="module">
                    <option value="">All modules</option>
                    {% for mod in modules %}
                    <option value="{{ mod }}">{{ mod }}</option>
                    {% endfor %}
                </select>
                <select class="select select-bordered select-xs" name="severity">
                    <option value="">All severities</option>
                    {% for sev in severities %}
                    <option value="{{ sev }}">{{ sev }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>
        <div class="overflow-x-auto panel">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Module</th>
                        <th>Category</th>
                        <th>Severity</th>
                        <th>Title</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody id="findings-table">
                    {% include "partials/findings_table.html" %}
                </tbody>
            </table>
        </div>
    </section>

    <!-- Targets section -->
    <section>
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-bold">Targets</h2>
        </div>
        <div class="overflow-x-auto panel">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Type</th>
                        <th>Name</th>
                        <th>URI</th>
                    </tr>
                </thead>
                <tbody id="targets-table">
                    {% include "partials/targets_table.html" %}
                </tbody>
            </table>
        </div>
    </section>

</div>
{% endblock %}