{{ block title }}
    Page title
{{ endblock }}
{{ block content }}

<form method="post">
    {{ if description }}
    <p>Description: {{ description }}</p>
    {{ endif }}
    <p>Choose a vehicle:</p>
    <ul class="vehicle-choice">
        <li>
            <label>
                <input type="radio" name="vehicle_choice" value="1">
                Vehicle A
                <table>
                    <tr>
                        <td style="padding-right: 12px;">Price:</td>
                        <td>${{ vehicle_a.price }}</td>
                    </tr>
                    <tr>
                        <td>Fuel:</td>
                        <td>Electricity</td>
                    </tr>
                </table>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="vehicle_choice" value="2">
                Vehicle B
                <table>
                    <tr>
                        <td style="padding-right: 12px;">Price:</td>
                        <td>${{ vehicle_b.price }}</td>
                    </tr>
                    <tr>
                        <td>Fuel:</td>
                        <td>Gasoline</td>
                    </tr>
                </table>
            </label>
        </li>
    </ul>

    <!-- Display the savings -->
    <p id="savings">Savings: $<span id="savings-value">--</span></p>

    <!-- JavaScript for the Savings Calculator -->
    <script>
        function calculateSavings() {
            var selectedChoice = document.querySelector('input[name="vehicle_choice"]:checked');
            if (selectedChoice) {
                var price;
                var selectedValue = selectedChoice.value;
                if (selectedValue === '1') {
                    price = {{ vehicle_a.price }};
                } else if (selectedValue === '2') {
                    price = {{ vehicle_b.price }};
                }
                var budget = {{ player.budget }}; // Get the participant's budget from Python
    
                if (budget === undefined || isNaN(budget)) {
                    budget = 55000; // Set a default budget if not available
                }
    
                var savings = budget - price;
    
                // Display the savings in a designated HTML element with the ID "savings-value"
                document.getElementById('savings-value').textContent = savings;
            } else {
                // If no choice is selected, display a placeholder
                document.getElementById('savings-value').textContent = '--';
            }
        }
    
        // Call the savings calculator function when a radio button choice changes
        document.querySelectorAll('input[name="vehicle_choice"]').forEach(function (input) {
            input.addEventListener('change', calculateSavings);
        });
    
        // Initialize the savings display
        calculateSavings();
    </script>
    
    <!-- End of JavaScript for the Savings Calculator -->
    
    <button type="submit">Submit</button>
</form>

{{ endblock }}