{{ block title }}
    Energieverbrauch
{{ endblock }}

{% block content %}
    <p> Als nächstes interessiert uns <b> Ihr Energieverbrauch. </b> </p>
    <!-- Consumption question -->
    <label for="energy_input">{{ form.energy_cons.label }}</label><br>
    <input type="number" name="energy_cons" id="energy_input" min="0">
    {{ formfield_errors 'energy_cons' }}
    <br>

    <label>
        <input type="checkbox" name="energy_cons_dk" id="energy_dk_checkbox">
        Weiß ich nicht
    </label>
    {{ formfield_errors 'energy_cons_dk' }}

    <br><br>

    <!-- Price question -->
    <label for="energy_input_price">{{ form.energy_price.label }}</label><br>
    <input type="number" name="energy_price" id="energy_input_price" min="0">
    {{ formfield_errors 'energy_price' }}
    <br>

    <label>
        <input type="checkbox" name="energy_price_dk" id="price_dk_checkbox">
        Weiß ich nicht
    </label>
    {{ formfield_errors 'energy_price_dk' }}

    <br><br>
    <button class="otree-btn-next btn btn-primary">Weiter</button>

    <!-- Scripts -->
    <script>
        // Energy consumption toggle
        const energyInput = document.getElementById('energy_input');
        const energyDkCheckbox = document.getElementById('energy_dk_checkbox');

        function toggleEnergyInput() {
            if (energyDkCheckbox.checked) {
                energyInput.disabled = true;
                energyInput.value = '';
            } else {
                energyInput.disabled = false;
            }
        }

        energyDkCheckbox.addEventListener('change', toggleEnergyInput);
        toggleEnergyInput();  // Run on page load

        {{ formfield_errors 'energy_price_dk' }}
        {{ formfield_errors 'energy_cons_dk' }}

        // Energy price toggle
        const priceInput = document.getElementById('energy_input_price');
        const priceDkCheckbox = document.getElementById('price_dk_checkbox');

        function togglePriceInput() {
            if (priceDkCheckbox.checked) {
                priceInput.disabled = true;
                priceInput.value = '';
            } else {
                priceInput.disabled = false;
            }
        }

        priceDkCheckbox.addEventListener('change', togglePriceInput);
        togglePriceInput();  // Run on page load
    </script>

{% endblock %}