{% block title %}
    Energiesicherheit
{% endblock %}

{% block content %}

    <label for="input">{{ form.why.label }}</label><br>
    <textarea name="why" id="input" rows="6" cols="80" style="width:100%"></textarea>
    {{ formfield_errors 'why' }}
    <br>

    <label>
        <input type="checkbox" name="why_dk" id="why_dk_checkbox">
        Keine Angabe
    </label>
    {{ formfield_errors 'why_dk' }}

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

    <script>
        // Energy consumption toggle
        const energyInput = document.getElementById('input');
        const energyDkCheckbox = document.getElementById('why_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 'why_dk' }}
    </script>
{% endblock %}