{% extends "base.html" %}

{% block title %}Steel Challenge{% endblock %}
{% block content %}
<form class="" action="/generate-pdf" method="post" target="_blank">
    {% include 'setup.html' %}

    <div class="mb-6 max-w-2xl mx-auto">
        <h2>{%trans%}Select the stage{%endtrans%}</h2>
        <div id="stage" class="grid grid-cols-1 gap-4">
            <div>
                <label for="five_to_go">
                    <p>Five To Go</p>
                    <img src="{{ url_for('static', filename='images/five_to_go.webp') }}" alt="Five To Go">
                    <input type="radio" id="five_to_go" name="stage" value="five_to_go" required>
                </label>
            </div>
            <div>
                <label for="showdown_left">
                    <p>Showdown (left box)</p>
                    <img src="{{ url_for('static', filename='images/showdown_left.webp') }}"
                         alt="Showdown (left box)">
                <input type="radio" id="showdown_left" name="stage" value="showdown_left">
                </label>
            </div>
            <div>
                <label for="showdown_right">
                    <p>Showdown (right box)</p>
                    <img src="{{ url_for('static', filename='images/showdown_right.webp') }}"
                         alt="Showdown (right box)">
                    <input type="radio" id="showdown_right" name="stage" value="showdown_right">
                </label>
            </div>
            <div>
                <label for="smoke_and_hope">
                    <p>Smoke & Hope</p>
                    <img src="{{ url_for('static', filename='images/smoke_and_hope.webp') }}" alt="Smoke & Hope">
                    <input type="radio" id="smoke_and_hope" name="stage" value="smoke_and_hope">
                </label>
            </div>
            <div>
                <label for="outer_limits_left">
                    <p>Outer Limits (left box)</p>
                    <img src="{{ url_for('static', filename='images/outer_left.webp') }}" alt="Outer Limits (left box)">
                    <input type="radio" id="outer_limits_left" name="stage" value="outer_limits_left">
                </label>
            </div>
            <div>
                <label for="outer_limits_center">
                    <p>Outer Limits (center box)</p>
                    <img src="{{ url_for('static', filename='images/outer_center.webp') }}" alt="Outer Limits (center box)">
                    <input type="radio" id="outer_limits_center" name="stage" value="outer_limits_center">
                </label>
            </div>
            <div>
                <label for="outer_limits_right">
                    <p>Outer Limits (right box)</p>
                    <img src="{{ url_for('static', filename='images/outer_right.webp') }}" alt="Outer Limits (right box)">
                    <input type="radio" id="outer_limits_right" name="stage" value="outer_limits_right">
                </label>
            </div>
            <div>
                <label for="accelerator">
                    <p>Accelerator</p>
                    <img src="{{ url_for('static', filename='images/accelerator.webp') }}" alt="Accelerator">
                   <input type="radio" id="accelerator" name="stage" value="accelerator">
                </label>
            </div>
            <div>
                <label for="pendulum">
                    <p>Pendulum</p>
                    <img src="{{ url_for('static', filename='images/pendulum.webp') }}" alt="Pendulum">
                    <input type="radio" id="pendulum" name="stage" value="pendulum">
                </label>
            </div>
            <div>
                <label for="speed_option">
                    <p>Speed Option</p>
                    <img src="{{ url_for('static', filename='images/speed_option.webp') }}" alt="Speed Option">
                    <input type="radio" id="speed_option" name="stage" value="speed_option">
                </label>
            </div>
            <div>
                <label for="roundabout">
                    <p>Roundabout</p>
                    <img src="{{ url_for('static', filename='images/roundabout.webp') }}" alt="RoundAbout">
                    <input type="radio" id="roundabout" name="stage" value="roundabout">
                </label>
            </div>
        </div>
    </div>

    <div class="text-center">
        <button type="submit"
                class="bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
            {%trans%}Generate PDF{%endtrans%}
        </button>
    </div>
</form>
{% endblock %}