{% extends "base.html" %}

{% block title %}Select Scenarios - ASF TestArena{% endblock %}

{% block content %}
<div class="submit-container">
    <h2 style="margin-bottom: 30px; color: var(--dark);">Select Test Scenarios</h2>
    
    <div class="step-indicator">
        <div class="step completed">
            <div class="step-number">✓</div>
            <div class="step-label">Branch</div>
        </div>
        <div class="step active">
            <div class="step-number">2</div>
            <div class="step-label">Scenarios</div>
        </div>
        <div class="step">
            <div class="step-number">3</div>
            <div class="step-label">Environment</div>
        </div>
        <div class="step">
            <div class="step-number">4</div>
            <div class="step-label">Test Mode</div>
        </div>
        <div class="step">
            <div class="step-number">5</div>
            <div class="step-label">Review</div>
        </div>
    </div>
    
    <div style="background: #eff6ff; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
        <strong>Branch:</strong> {{ branch_name }}
    </div>
    
    <form method="POST" action="{{ url_for('jobs.submit_step2') }}">
        <input type="hidden" name="branch_name" value="{{ branch_name }}">
        
        <div class="form-group">
            <label>
                <input type="checkbox" id="selectAll" onclick="toggleAll(this)">
                Select All Scenarios
            </label>
        </div>
        
        <div class="checkbox-group">
            {% for scenario in scenarios %}
            <div class="checkbox-item">
                <input type="checkbox" name="scenarios" value="{{ scenario }}" id="scenario_{{ loop.index }}">
                <label for="scenario_{{ loop.index }}">{{ scenario }}</label>
            </div>
            {% endfor %}
        </div>
        
        <div class="form-actions">
            <a href="{{ url_for('jobs.submit') }}" class="btn" style="background: #6b7280; color: white;">Back</a>
            <button type="submit" class="btn btn-primary">Next</button>
        </div>
    </form>
</div>

<script>
function toggleAll(checkbox) {
    const checkboxes = document.querySelectorAll('input[name="scenarios"]');
    checkboxes.forEach(cb => cb.checked = checkbox.checked);
}
</script>
{% endblock %}