{% extends "base.html" %}

{% block title %}Dashboard - ASF TestArena{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="panel">
        <div class="panel-header">
            <h3>Test Jobs</h3>
            <a href="{{ url_for('jobs.submit') }}" class="btn btn-primary btn-sm">+ New Job</a>
        </div>
        
        <div class="job-list">
            {% if jobs %}
                {% for job in jobs %}
                <div class="job-item" data-job-id="{{ job.id }}" onclick="loadJobDetails({{ job.id }})">
                    <div class="job-status-icon">{{ job.get_status_icon() }}</div>
                    <div class="job-info">
                        <h4>Job #{{ job.id }} - {{ job.branch_name }}</h4>
                        <p>{{ job.submitted_at.strftime('%Y-%m-%d %H:%M') }} by {{ job.submitter.username }}</p>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="empty-state">
                    <h3>No jobs yet</h3>
                    <p>Submit your first test job to get started</p>
                </div>
            {% endif %}
        </div>
    </div>
    
    <div class="panel">
        <div class="panel-header">
            <h3>Job Details</h3>
        </div>
        
        <div id="job-details-container">
            <div class="empty-state">
                <h3>Select a job</h3>
                <p>Click on a job from the list to view details</p>
            </div>
        </div>
    </div>
</div>

<script>
function loadJobDetails(jobId) {
    // Mark job as active
    document.querySelectorAll('.job-item').forEach(item => {
        item.classList.remove('active');
    });
    document.querySelector(`[data-job-id="${jobId}"]`).classList.add('active');
    
    // Fetch job details
    fetch(`/jobs/${jobId}`)
        .then(response => response.json())
        .then(job => {
            const container = document.getElementById('job-details-container');
            const scenarios = JSON.parse(job.scenarios || '[]');
            
            container.innerHTML = `
                <div class="detail-row">
                    <div class="detail-label">Job ID:</div>
                    <div class="detail-value">#${job.id}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Submitter:</div>
                    <div class="detail-value">${job.submitter}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Branch:</div>
                    <div class="detail-value">${job.branch_name}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Status:</div>
                    <div class="detail-value">
                        <span class="status-badge status-${job.status}">${job.status.replace('_', ' ').toUpperCase()}</span>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Environment:</div>
                    <div class="detail-value">${job.environment}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Test Mode:</div>
                    <div class="detail-value">${job.test_mode}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Submitted:</div>
                    <div class="detail-value">${job.submitted_at}</div>
                </div>
                ${job.completed_at ? `
                <div class="detail-row">
                    <div class="detail-label">Completed:</div>
                    <div class="detail-value">${job.completed_at}</div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Duration:</div>
                    <div class="detail-value">${job.duration ? Math.floor(job.duration / 60) + 'm ' + (job.duration % 60) + 's' : 'N/A'}</div>
                </div>
                ` : ''}
                <div class="detail-row">
                    <div class="detail-label">Scenarios:</div>
                    <div class="detail-value">${Array.isArray(scenarios) ? scenarios.join(', ') : scenarios}</div>
                </div>
                ${job.status === 'in_progress' ? `
                <div style="margin-top: 20px;">
                    <button class="btn btn-danger" onclick="abortJob(${job.id})">Abort Job</button>
                </div>
                ` : ''}
                ${job.results_path ? `
                <div style="margin-top: 20px;">
                    <a href="${job.results_path}" class="btn btn-primary" target="_blank">View Results</a>
                </div>
                ` : ''}
            `;
        });
}

function abortJob(jobId) {
    if (confirm('Are you sure you want to abort this job?')) {
        fetch(`/jobs/${jobId}/abort`, { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert(data.error);
                }
            });
    }
}
</script>
{% endblock %}