<layout name="admin" />

<!-- Breadcrumbs -->
<x-breadcrumbs items='[{"url": "/admin", "text": "Admin"}, {"url": "/admin/jobs/dashboard", "text": "Job Dashboard"}]' />

<!-- Dashboard Header -->
<div class="admin-content__header admin-content__header--with-actions">
    <div class="admin-content__title-group">
        <h1 class="admin-content__title">Background Jobs Dashboard</h1>
        <p class="admin-content__description">Real-time monitoring of queue, workers, and scheduler</p>
    </div>
</div>

<!-- Dashboard Grid - Top Row: Queue Stats & Worker Health -->
<div class="admin-grid admin-grid--2-col">
    <!-- Queue Statistics Card -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h3 class="admin-card__title">Queue Statistics</h3>
            <span class="admin-badge admin-badge--info">Live</span>
        </div>
        <div class="admin-card__content">
            <x-queue-stats />
        </div>
    </div>

    <!-- Worker Health Card -->
    <div class="admin-card">
        <div class="admin-card__header">
            <h3 class="admin-card__title">Worker Health</h3>
            <span class="admin-badge admin-badge--info">Live</span>
        </div>
        <div class="admin-card__content">
            <x-worker-health />
        </div>
    </div>
</div>

<!-- Dashboard Grid - Middle Row: Scheduler Timeline -->
<div class="admin-grid admin-grid--1-col">
    <div class="admin-card">
        <div class="admin-card__header">
            <h3 class="admin-card__title">Scheduled Tasks Timeline</h3>
            <span class="admin-badge admin-badge--info">Live</span>
        </div>
        <div class="admin-card__content">
            <x-scheduler-timeline />
        </div>
    </div>
</div>

<!-- Dashboard Grid - Bottom Row: Failed Jobs -->
<div class="admin-grid admin-grid--1-col">
    <div class="admin-card">
        <div class="admin-card__header">
            <h3 class="admin-card__title">Failed Jobs</h3>
            <span class="admin-badge admin-badge--warning">Needs Attention</span>
        </div>
        <div class="admin-card__content">
            <x-failed-jobs-list />
        </div>
    </div>
</div>

<!-- Dashboard Info Footer -->
<div class="admin-info-box admin-info-box--info">
    <strong>📊 Live Dashboard</strong> - All components auto-update in real-time. Queue Stats and Worker Health refresh every 5 seconds, Failed Jobs every 10 seconds, and Scheduler Timeline every 30 seconds.
</div>
