{% extends "base.html" %}

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

{% block content %}
<div class="submit-container">
    <h2 style="margin-bottom: 30px; color: var(--dark);">Select Environment</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 active">
            <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 }}<br>
        <strong>Selected Scenarios:</strong> {{ scenarios|length }} scenario{{ 's' if scenarios|length != 1 else '' }}
        <details style="margin-top: 10px;">
            <summary style="cursor: pointer; color: var(--primary);">View selected scenarios</summary>
            <ul style="margin-top: 10px; padding-left: 20px;">
                {% for scenario in scenarios %}
                <li style="font-size: 12px; color: #6b7280;">{{ scenario }}</li>
                {% endfor %}
            </ul>
        </details>
    </div>
    
    <form method="POST" action="{{ url_for('jobs.submit_step3') }}">
        <input type="hidden" name="branch_name" value="{{ branch_name }}">
        <input type="hidden" name="scenarios" value="{{ scenarios|tojson }}">
        <input type="hidden" name="scenario_map" value="{{ scenario_map|tojson }}">
        
        <div class="radio-group">
            <label class="radio-item">
                <input type="radio" name="environment" value="sensor_hub" required>
                <div>
                    <strong>Sensor Hub</strong>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Test on sensor hub hardware/simulator</p>
                </div>
            </label>
            
            <label class="radio-item">
                <input type="radio" name="environment" value="main_board" required>
                <div>
                    <strong>Main Board</strong>
                    <p style="font-size: 12px; color: #6b7280; margin-top: 4px;">Test on main board hardware/simulator</p>
                </div>
            </label>
        </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-primary">Next</button>
        </div>
    </form>
</div>
{% endblock %}