package app

type PluginsPageData struct {
Plugins  []interface{}
JobTypes map[string]interface{}
}

templ PluginsOverview(data PluginsPageData) {
<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-plug me-2"></i>Plugins
</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<a href="/plugins" class="btn btn-sm btn-outline-primary">
<i class="fas fa-sync-alt me-1"></i>Refresh
</a>
</div>
</div>
</div>

<div class="row mb-4">
<div class="col-md-3 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Connected Plugins</div>
<div class="h3 mb-0">0</div>
</div>
<div class="col-auto">
<i class="fas fa-plug fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Connected Plugins</h6>
</div>
<div class="card-body">
if len(data.Plugins) == 0 {
<div class="alert alert-info">No plugins connected</div>
} else {
<div class="table-responsive">
<table class="table table-hover table-sm">
<thead>
<tr>
<th>Plugin</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
for i := 0; i < len(data.Plugins); i++ {
<tr>
<td>
<strong>Plugin</strong><br/>
<small class="text-muted">v1.0</small>
</td>
<td>
<span class="badge bg-success">Healthy</span>
</td>
<td>
<a href="/plugins/config/test" class="btn btn-sm btn-primary">Config</a>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</div>
}