{% extends "base.html" %}

{% block title %}Select Test Mode - ASF TestArena{% endblock %}

{% block content %}
<div class="submit-container">
    <h2 style="margin-bottom: 30px; color: var(--dark);">Select Test Mode</h2>
    
    <div class="step-indicator">
        <div class="step completed">
            <div class="step-number">✓</div>
            <div class="step-label">Branch</div>
        </div>
        <div class="step completed">
            <div class="step-number">✓</div>
            <div class="step-label">Scenarios</div>
        </div>
        <div class="step completed">
            <div class="step-number">✓</div>
            <div class="step-label">Environment</div>
        </div>
        <div class="step active">
            <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>
    
    <form method="POST" action="{{ url_for('jobs.submit_final') }}">
        <input type="hidden" name="branch_name" value="{{ branch_name }}">
        <input type="hidden" name="scenarios" value="{{ scenarios }}">
        <input type="hidden" name="environment" value="{{ environment }}">
        
        <div class="radio-group">
            <label class="radio-item">
                <input type="radio" name="test_mode" value="devbench_simulator" required>
                <div>
                    <strong>Devbench Simulator</strong>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Fully simulated environment</p>
                </div>
            </label>
            
            <label class="radio-item">
                <input type="radio" name="test_mode" value="testbench_hil" required>
                <div>
                    <strong>Testbench HIL</strong>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Hardware-in-the-Loop with real devices</p>
                </div>
            </label>
        </div>
        
        <div class="form-group" style="margin-top: 30px;">
            <h3 style="margin-bottom: 15px; color: var(--dark);">Additional Options</h3>
            
            <div style="margin-bottom: 10px;">
                <label>
                    <input type="checkbox" name="keep_devbenches">
                    Keep devbenches after test completion
                </label>
            </div>
            
            <div>
                <label>
                    <input type="checkbox" name="reuse_results">
                    Reuse previous test results if available
                </label>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="button" class="btn" style="background: #6b7280; color: white;" onclick="history.back()">Back</button>
            <button type="submit" class="btn btn-success">Start Test</button>
        </div>
    </form>
</div>
{% endblock %}