<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fahrzeugauswahl Menü</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="menu-container">
    <div class="menu-title">Fahrzeugauswahl</div>
    <div class="vehicle-list" id="vehicleList"></div>
</div>

<script>
    function createVehicleMenu(vehicles) {
        const vehicleList = document.getElementById('vehicleList');
        vehicleList.innerHTML = '';

        vehicles.forEach(vehicle => {
            const vehicleOption = document.createElement('div');
            vehicleOption.className = 'vehicle-option';
            vehicleOption.onclick = () => chooseVehicle(vehicle.name);

            const vehicleName = document.createElement('span');
            vehicleName.className = 'vehicle-name';
            vehicleName.textContent = vehicle.name;

            const vehicleLevel = document.createElement('span');
            vehicleLevel.className = 'vehicle-level';
            vehicleLevel.textContent = `(Level: ${vehicle.level})`;

            vehicleOption.appendChild(vehicleName);
            vehicleOption.appendChild(vehicleLevel);

            vehicleList.appendChild(vehicleOption);
        });
    }

    function chooseVehicle(vehicleName) {
        if ('alt' in window) { 
            alt.emit("vehicleSelection", vehicleName);
        } 
    }

    if ('alt' in window) {
        alt.on("sendVehicleList", createVehicleMenu);
    }
</script>

</body>
</html>