<div class="failed-jobs-component">
    <!-- Summary Header -->
    <div class="failed-jobs-summary">
        <div class="failed-jobs-summary__item">
            <span class="failed-jobs-summary__value">{{ totalFailedJobs }}</span>
            <span class="failed-jobs-summary__label">Total Failed Jobs</span>
        </div>
    </div>

    <!-- Failed Jobs Table -->
    <if condition="failedJobs && count(failedJobs) > 0">
        <div class="failed-jobs-table">
            <table class="jobs-table">
                <thead>
                    <tr>
                        <th>Queue</th>
                        <th>Job Type</th>
                        <th>Error</th>
                        <th>Failed At</th>
                        <th>Attempts</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <for items="failedJobs" as="job">
                        <tr>
                            <td>
                                <span class="queue-badge">{{ job.queue }}</span>
                            </td>
                            <td>
                                <div class="job-type">{{ job.jobType }}</div>
                                <div class="job-payload">{{ job.payloadPreview }}</div>
                            </td>
                            <td>
                                <div class="error-message">{{ job.error }}</div>
                            </td>
                            <td>{{ job.failedAt }}</td>
                            <td>
                                <span class="attempt-badge">{{ job.attempts }}</span>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <button
                                        data-live-action="retryJob"
                                        data-live-arg-jobId="{{ job.id }}"
                                        data-live-prevent
                                        class="btn btn-sm btn-primary"
                                        title="Retry job"
                                    >
                                        🔄 Retry
                                    </button>
                                    <button
                                        data-live-action="deleteJob"
                                        data-live-arg-jobId="{{ job.id }}"
                                        data-live-prevent
                                        class="btn btn-sm btn-danger"
                                        title="Delete job"
                                    >
                                        🗑️ Delete
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </for>
                </tbody>
            </table>
        </div>
    </if>

    <if condition="!failedJobs || count(failedJobs) === 0">
        <div class="failed-jobs-empty">
            <div class="failed-jobs-empty__icon">✨</div>
            <div class="failed-jobs-empty__text">No failed jobs - everything running smoothly!</div>
        </div>
    </if>

    <div class="component-footer">
        <span class="component-footer__text">Last updated: {{ lastUpdated }}</span>
        <span class="component-footer__badge">Updates every 10s</span>
    </div>
</div>

<style>
.failed-jobs-component {
    padding: 0;
}

.failed-jobs-summary {
    padding: 1.5rem;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1rem;
}

.failed-jobs-summary__value {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.failed-jobs-summary__label {
    display: block;
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.failed-jobs-table {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.jobs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.jobs-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
}

.jobs-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}

.jobs-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

.jobs-table tbody tr:hover {
    background: #f8f9fa;
}

.queue-badge {
    display: inline-block;
    background: #e9ecef;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.job-type {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.job-payload {
    font-size: 0.75rem;
    color: #666;
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attempt-badge {
    display: inline-block;
    background: #ffc107;
    color: #000;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn {
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.failed-jobs-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #999;
}

.failed-jobs-empty__icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.failed-jobs-empty__text {
    font-size: 1rem;
}

.component-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #666;
}

.component-footer__badge {
    background: #007bff;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
}
</style>
