@php
    // [key, label, default price €/kWh, default efficiency, efficiency hint]
    $energies = [
        ['electric', __('tools.energy_electric'), nloc(0.20), '1', __('tools.efficiency')],
        ['heatpump', __('tools.energy_heatpump'), nloc(0.20), '3', __('tools.cop')],
        ['gas', __('tools.energy_gas'), nloc(0.11), nloc(0.95), __('tools.efficiency')],
        ['oil', __('tools.energy_oil'), nloc(0.12), nloc(0.85), __('tools.efficiency')],
        ['pellets', __('tools.energy_pellets'), nloc(0.08), nloc(0.85), __('tools.efficiency')],
    ];
@endphp
<div data-tool="heating-cost">
    <form novalidate>
        <label class="label" for="hc-need">{{ __('tools.heat_need') }}</label>
        <input id="hc-need" name="need" class="field" inputmode="numeric" value="12000">
        <p class="mt-1 text-xs text-slate-500">{{ __('tools.heat_need_hint') }}</p>

        <details class="mt-4 rounded-xl border border-slate-200">
            <summary class="cursor-pointer px-4 py-3 text-sm font-semibold">{{ __('tools.prices_efficiencies') }}</summary>
            <div class="grid gap-3 border-t border-slate-200 p-4 sm:grid-cols-2">
                @foreach ($energies as [$key, $label, $price, $eff, $hint])
                    <fieldset class="rounded-lg bg-slate-50 p-3">
                        <legend class="text-sm font-semibold">{{ $label }}</legend>
                        <div class="mt-2 grid grid-cols-2 gap-2">
                            <div><label class="text-xs text-slate-600" for="hc-{{ $key }}-p">€/kWh</label><input id="hc-{{ $key }}-p" name="{{ $key }}_price" class="field py-1.5 text-sm" inputmode="decimal" value="{{ $price }}"></div>
                            <div><label class="text-xs text-slate-600" for="hc-{{ $key }}-e">{{ $hint }}</label><input id="hc-{{ $key }}-e" name="{{ $key }}_eff" class="field py-1.5 text-sm" inputmode="decimal" value="{{ $eff }}"></div>
                        </div>
                    </fieldset>
                @endforeach
            </div>
        </details>
    </form>
    <h3 class="mt-6 text-sm font-semibold text-slate-700">{{ __('tools.cost_ranking') }}</h3>
    <ol data-results class="mt-3 space-y-3" aria-live="polite"></ol>
    <p class="mt-4 text-xs text-slate-500">{{ __('tools.heating_disclaimer') }}</p>
</div>