{% extends "base.html" %}

{% block title %}Job Queue{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>Job Queue</h2>
        <p class="text-muted">Monitor and manage benchmark jobs.</p>
        
        <!-- Jobs list -->
        <div id="jobs-list" 
             hx-get="/api/v1/jobs" 
             hx-trigger="load"
             hx-target="#jobs-content">
            <p>Loading jobs...</p>
        </div>
        <div id="jobs-content"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Load jobs when page loads
    document.addEventListener('htmx:afterRequest', function(evt) {
        if (evt.detail.target.id === 'jobs-content') {
            renderJobs(JSON.parse(evt.detail.xhr.response));
        }
    });
    
    function renderJobs(jobIds) {
        const container = document.getElementById('jobs-content');
        container.innerHTML = '';
        
        if (!jobIds || jobIds.length === 0) {
            container.innerHTML = '<div class="alert alert-info">No jobs in queue.</div>';
            return;
        }
        
        jobIds.forEach(jobId => {
            const div = document.createElement('div');
            div.className = 'card mb-2';
            div.innerHTML = `
                <div class="card-body">
                    <h5 class="card-title">${jobId}</h5>
                    <p class="card-text text-muted">Job details will appear here...</p>
                </div>
            `;
            container.appendChild(div);
        });
    }
</script>
{% endblock %}