{% extends "base.html" %}

{% block content %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Threat Mitigation Monitor</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group mr-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="location.reload()">Refresh</button>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-dark text-white">
                    Recent Mitigation Jobs
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover mb-0">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Job ID</th>
                                    <th>Threat ID</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                    <th>Severity</th>
                                    <th>Created At</th>
                                    <th>Control</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for job in jobs %}
                                <tr>
                                    <td><small><code>{{ job.job_id }}</code></small></td>
                                    <td><code>{{ job.threat_id }}</code></td>
                                    <td>
                                        <span class="badge badge-{% if job.status.value == 'completed' %}success{% elif job.status.value == 'failed' %}danger{% elif job.status.value == 'running' %}primary{% elif job.status.value == 'pending_approval' %}warning{% else %}secondary{% endif %}">
                                            {{ job.status.value }}
                                        </span>
                                    </td>
                                    <td>
                                        {% for action in job.request.requested_actions %}
                                            <span class="badge badge-info">{{ action.value }}</span>
                                        {% endfor %}
                                        {% if job.request.let_agent_decide %}
                                            <span class="badge badge-dark">agent-decided</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge badge-{% if job.request.severity.value == 'critical' or job.request.severity.value == 'high' %}danger{% else %}warning{% endif %}">
                                            {{ job.request.severity.value }}
                                        </span>
                                    </td>
                                    <td><small>{{ job.job_id.split(':')[-1] | int / 1000 | int }}</small></td>
                                    <td>
                                        {% if job.status.value == 'pending_approval' %}
                                            <button class="btn btn-sm btn-success" onclick="resumeJob('{{ job.job_id }}')">Approve</button>
                                        {% endif %}
                                        {% if job.status.value == 'completed' %}
                                            <button class="btn btn-sm btn-outline-danger" onclick="rollbackJob('{{ job.job_id }}')">Rollback</button>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% if job.agent_reasoning %}
                                <tr class="bg-light">
                                    <td colspan="7">
                                        <div class="p-2">
                                            <strong>Agent Reasoning:</strong>
                                            <p class="mb-0"><small>{{ job.agent_reasoning }}</small></p>
                                        </div>
                                    </td>
                                </tr>
                                {% endif %}
                                {% else %}
                                <tr>
                                    <td colspan="7" class="text-center text-muted">No mitigation jobs found.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function resumeJob(jobId) {
            if (!confirm('Approve and resume this mitigation job?')) return;
            // In a real app, this would call the API. For this demo, we'll just alert.
            fetch('/api/threat-mitigation/jobs/' + jobId + '/resume', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Qato-Api-Key': '{{ qato_api_key }}' // This would need to be passed from the backend
                },
                body: JSON.stringify({approver: 'admin', reason: 'Approved via UI'})
            }).then(r => {
                if (r.ok) location.reload();
                else alert('Failed to resume job: ' + r.statusText);
            });
        }

        function rollbackJob(jobId) {
            if (!confirm('Rollback this mitigation job?')) return;
            fetch('/api/threat-mitigation/jobs/' + jobId + '/rollback', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Qato-Api-Key': '{{ qato_api_key }}'
                },
                body: JSON.stringify({reason: 'Manual rollback via UI'})
            }).then(r => {
                if (r.ok) location.reload();
                else alert('Failed to rollback job: ' + r.statusText);
            });
        }
    </script>
{% endblock %}