{# Task Engine Dashboard Stats Cards #}
{# This partial is included in dashboard.html and provides summary metrics #}

{# Active Workers #}
<div class="col-md-4 col-lg">
    <div class="card task-engine-stat-card">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="stat-icon bg-success-subtle text-success rounded-circle p-3 me-3">
                    <i class="fa fa-server fa-lg"></i>
                </div>
                <div>
                    <h3 class="mb-0" id="statActiveWorkers">-</h3>
                    <small class="text-muted">Active Workers</small>
                </div>
            </div>
        </div>
    </div>
</div>

{# Pending Jobs #}
<div class="col-md-4 col-lg">
    <div class="card task-engine-stat-card">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="stat-icon bg-info-subtle text-info rounded-circle p-3 me-3">
                    <i class="fa fa-clock-o fa-lg"></i>
                </div>
                <div>
                    <h3 class="mb-0" id="statPendingJobs">-</h3>
                    <small class="text-muted">Pending Jobs</small>
                </div>
            </div>
        </div>
    </div>
</div>

{# Running Jobs #}
<div class="col-md-4 col-lg">
    <div class="card task-engine-stat-card">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="stat-icon bg-primary-subtle text-primary rounded-circle p-3 me-3">
                    <i class="fa fa-spinner fa-lg"></i>
                </div>
                <div>
                    <h3 class="mb-0" id="statRunningJobs">-</h3>
                    <small class="text-muted">Running Jobs</small>
                </div>
            </div>
        </div>
    </div>
</div>

{# Completed (24h) #}
<div class="col-md-6 col-lg">
    <div class="card task-engine-stat-card">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="stat-icon bg-success-subtle text-success rounded-circle p-3 me-3">
                    <i class="fa fa-check fa-lg"></i>
                </div>
                <div>
                    <h3 class="mb-0" id="statCompletedJobs">-</h3>
                    <small class="text-muted">Completed (24h)</small>
                </div>
            </div>
        </div>
    </div>
</div>

{# Failed (24h) #}
<div class="col-md-6 col-lg">
    <div class="card task-engine-stat-card">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="stat-icon bg-danger-subtle text-danger rounded-circle p-3 me-3">
                    <i class="fa fa-times fa-lg"></i>
                </div>
                <div>
                    <h3 class="mb-0" id="statFailedJobs">-</h3>
                    <small class="text-muted">Failed (24h)</small>
                </div>
            </div>
        </div>
    </div>
</div>

{# Throughput Card #}
<div class="col-12 mt-3">
    <div class="card task-engine-stat-card">
        <div class="card-body">
            <div class="row align-items-center">
                {# Backpressure Status #}
                <div class="col-md-3 text-center border-end">
                    <div id="backpressureIndicator" class="mb-2">
                        <i class="fa fa-circle-o fa-3x text-muted"></i>
                    </div>
                    <div class="fw-semibold" id="backpressureStatus">Loading...</div>
                    <small class="text-muted" id="backpressureMessage">Checking queue health</small>
                </div>

                {# Throughput Stats #}
                <div class="col-md-9">
                    <div class="row text-center">
                        <div class="col-3">
                            <div class="text-muted small">1 min</div>
                            <div class="fw-bold" id="throughput1m">-</div>
                            <small class="text-muted">tasks/min</small>
                        </div>
                        <div class="col-3">
                            <div class="text-muted small">5 min</div>
                            <div class="fw-bold" id="throughput5m">-</div>
                            <small class="text-muted">tasks/min</small>
                        </div>
                        <div class="col-3">
                            <div class="text-muted small">15 min</div>
                            <div class="fw-bold" id="throughput15m">-</div>
                            <small class="text-muted">tasks/min</small>
                        </div>
                        <div class="col-3">
                            <div class="text-muted small">1 hour</div>
                            <div class="fw-bold" id="throughput1h">-</div>
                            <small class="text-muted">tasks/min</small>
                        </div>
                    </div>
                    <div class="row mt-3 pt-3 border-top text-center">
                        <div class="col-4">
                            <div class="text-muted small">Avg Duration</div>
                            <div class="fw-bold" id="avgDuration">-</div>
                        </div>
                        <div class="col-4">
                            <div class="text-muted small">Queue Rate</div>
                            <div class="fw-bold" id="queueRate">-</div>
                            <small class="text-muted">jobs/min arriving</small>
                        </div>
                        <div class="col-4">
                            <div class="text-muted small">Process Rate</div>
                            <div class="fw-bold" id="processRate">-</div>
                            <small class="text-muted">jobs/min completing</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>