{{ block title }}
    Choose a Vehicle
{{ endblock }}
{{ block content }}

<form method="post">
    {{ if description }}
    <p>{{ description }}</p>
    {{ endif }}
    <p>Choose a vehicle:</p>
    <ul class="vehicle-choice">
        <li class="vehicle-option">
            <label>
                <input type="radio" name="vehicle_choice" value="1">
                Vehicle A
                <table>
                    <tr>
                        <td class="table-label">Fuel Type:</td>
                        <td class="table-value">Electricity</td>
                    </tr>
                    <tr>
                        <td class="table-label">Sale Price:</td>
                        <td class="table-value">{{ vehicle_a.price }}</td>
                    </tr>
                    <tr>
                        <td class="table-label">Fuel Cost (5 years):</td>
                        <td class="table-value">{{ vehicle_a.fuelcost }}</td>
                    </tr>
                    <tr>
                        <td class="table-label">Range:</td>
                        <td class="table-value">{{ vehicle_a.range }} miles</td>
                    </tr>
                </table>
            </label>
        </li>
        <li class="vehicle-option">
            <label>
                <input type="radio" name="vehicle_choice" value="2">
                Vehicle B
                <table>
                    <tr>
                        <td class="table-label">Fuel Type:</td>
                        <td class="table-value">Gasoline</td>
                    </tr>
                    <tr>
                        <td class="table-label">Sale Price:</td>
                        <td class="table-value">{{ vehicle_b.price }}</td>
                    </tr>
                    <tr>
                        <td class="table-label">Fuel Cost (5 years):</td>
                        <td class="table-value">{{ vehicle_b.fuelcost }}</td>
                    </tr>
                    <tr>
                        <td class="table-label">Range:</td>
                        <td class="table-value">{{ vehicle_b.range }} miles</td>
                    </tr>
                </table>
            </label>
        </li>
    </ul>

    <!-- <button type="submit">Submit</button> -->
</form>

<style>
    .vehicle-choice {
        list-style: none;
        padding: 0;
    }

    .vehicle-option {
        display: inline-block;
        width: 48%;
        margin-right: 2%;
    }

    .vehicle-option:last-child {
        margin-right: 0;
    }

    .table-label{
        padding: 1px
    }
    .table-value {
        padding: 5px; /* Adjust the padding as needed */
    }
</style>

{{ next_button }}

<div class="page-number">{{ current_page }} / {{ C.num_pages }}</div>

{{ endblock }}