{% extends "base.html" %}

{% block title %}Review & Submit - ASF TestArena{% endblock %}

{% block content %}
<div class="submit-container">
    <h2 style="margin-bottom: 30px; color: var(--dark);">Review & Submit</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">Review</div>
        </div>
    </div>

    <div
        style="background: white; border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 30px;">
        <div class="detail-row">
            <div class="detail-label">Branch:</div>
            <div class="detail-value">{{ branch_name }}</div>
        </div>
        <div class="detail-row">
            <div class="detail-label">Scenarios:</div>
            <div class="detail-value">
                <strong>{{ scenarios|length }} scenarios selected</strong>
                <ul style="margin-top: 10px; padding-left: 20px; max-height: 200px; overflow-y: auto;">
                    {% for scenario in scenarios %}
                    <li style="font-size: 13px; color: #4b5563; margin-bottom: 4px;">{{ scenario }}</li>
                    {% endfor %}
                </ul>
            </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|tojson }}'>
        <input type="hidden" name="scenario_map" value='{{ scenario_map|tojson }}'>

        <!-- Default values for deactivated sections -->
        <input type="hidden" name="environment" value="staging">
        <input type="hidden" name="test_mode" value="simulator">

        <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" style="padding: 12px 40px;">Submit Job</button>
        </div>
    </form>
</div>
{% endblock %}