{% extends "base.html" %}
{% block title %}{%trans%}Custom{%endtrans%}{% endblock %}
{% block content %}


<form class="" action="/generate-pdf-custom" method="post">
    {% include 'setup.html' %}
    <div class="mb-6 max-w-2xl mx-auto mt-4">
        <h2>{%trans%}Simulated distance{%endtrans%} [m]</h2>
        <input type="number" id="simulated_distance" name="simulated_distance" min="1" max="300" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400" required>
    </div>
    <div class="mb-6 max-w-2xl mx-auto">
        <h2>{%trans%}Select the target type{%endtrans%}</h2>

        <div id="stage" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="flex flex-col justify-between h-full">
                <label for="ts2" class="flex flex-col items-center justify-between h-full">
                    <p>TS-2</p>
                    {% with target_width=5, target_height=5 %}
                        {% include 'ts2_svg.html' %}
                    {% endwith %}
                    <input type="radio" id="ts2" name="target_type" value="ts2" required class="m-1"> <!-- Margin added for spacing -->
                </label>
            </div>
            <div class="flex flex-col justify-between h-full">
                <label for="popper" class="flex flex-col items-center justify-between h-full">
                    <p>Popper</p>
                    {% with target_width=3, target_height=8.5 %}
                        {% include 'popper_svg.html' %}
                    {% endwith %}
                    <input type="radio" id="popper" name="target_type" value="popper" required class="m1-"> <!-- Margin added for spacing -->
                </label>
            </div>
            <div class="flex flex-col justify-between h-full">
                <label for="ipsc" class="flex flex-col items-center justify-between h-full">
                    <p>IPSC</p>
                    {% with target_width=4.5, target_height=5.8 %}
                        {% include 'ipsc_svg.html' %}
                    {% endwith %}
                    <input type="radio" id="ipsc" name="target_type" value="ipsc" required class="m-1"> <!-- Margin added for spacing -->
                </label>
            </div>
            <div class="flex flex-col justify-between h-full">
                <label for="idpa" class="flex flex-col items-center justify-between h-full">
                    <p>IDPA</p>
                    {% with target_width=4.6, target_height=7.8 %}
                        {% include 'idpa_svg.html' %}
                    {% endwith %}
                    <input type="radio" id="idpa" name="target_type" value="idpa" class="m-1"> <!-- Margin added for spacing -->
                </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 %}