package app

type PluginJobsPageData struct {
JobType     string
Jobs        []interface{}
StateFilter string
}

templ PluginJobsMonitoring(data PluginJobsPageData) {
<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">
<i class="fas fa-tasks me-2"></i>Jobs
</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-success" id="triggerBtn">
<i class="fas fa-play me-1"></i>Trigger Detection
</button>
<a href="/plugins" class="btn btn-sm btn-outline-secondary">
<i class="fas fa-arrow-left me-1"></i>Back
</a>
</div>
</div>
</div>

<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Recent Jobs</h6>
</div>
<div class="card-body">
if len(data.Jobs) == 0 {
<div class="alert alert-info">No jobs found</div>
} else {
<div class="table-responsive">
<table class="table table-hover table-sm">
<thead>
<tr>
<th>Job ID</th>
<th>State</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
for i := 0; i < len(data.Jobs); i++ {
<tr>
<td><code>job_id</code></td>
<td><span class="badge bg-secondary">PENDING</span></td>
<td>2024-01-01 12:00:00</td>
<td></td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</div>

<script>
document.getElementById('triggerBtn').addEventListener('click', function() {
alert('Triggering detection');
});
</script>
}