{{ define "main" }}
	{{ $config := "" }}
	{{ if eq .Params.engine "linear" }}
		{{ $config = dict "fromFactor" .Params.from_factor
			"toFactor" .Params.to_factor | jsonify }}
	{{ else if eq .Params.engine "intermediate" }}
		{{ $config = dict "fromUnit" .Params.from_unit
			"toUnit" .Params.to_unit | jsonify }}
	{{ else if eq .Params.engine "runtime" }}
		{{ $config = dict "fromCurrency" .Params.from
			"toCurrency" .Params.to | jsonify }}
	{{ end }}

	{{ $catData := index hugo.Data .Params.category }}
	{{ $availableUnits := partial "available-units.html"
		(dict "category" .Params.category "units" $catData.units) }}

	<div id="conversionform"
		class="bg-white p-8 rounded-lg shadow-md w-full
			dark:bg-gray-700 dark:text-grey-200"
		x-data="navActions()">

		<h1 id="headline"
			class="text-2xl font-bold mb-6 text-center">
			{{ .Params.from_name }} in {{ .Params.to_name }}
			umrechnen
		</h1>

		<div>

			<a x-ref="ajaxLink"
				x-target.push="maincontent"
				href="/"
				class="hidden"></a>

			<div>
				<label for="type"
					class="block text-sm font-medium opacity-75">
					Einheitentyp:
				</label>
				<select id="type" name="type"
					@change="navigate($event.target.value)"
					class="select mt-1 block w-full">
				{{ range $slug, $data := hugo.Data }}
				{{ if and $data.slug $data.name }}
				{{ $catUrl := partial "category-url.html"
					(dict "category" $data.slug
						"units" $data.units) }}
					<option
						value="{{ $catUrl }}"
						{{ if eq $data.slug
							$.Params.category }}selected{{ end }}>
						{{ $data.name }}
					</option>
				{{ end }}
				{{ end }}
				</select>
			</div>

			<div class="flex flex-col sm:flex-row items-center gap-4
				mt-4">

				<div class="flex-1 w-full">
					<label for="from"
						class="block text-sm font-medium opacity-75">
						Umrechnen von:
					</label>
					<select id="from" name="from"
						@change="navigateWithValue($event.target.value)"
						class="select mt-1 block w-full">
					{{ range $unit, $unitData := $availableUnits }}
					{{ if ne $unit $.Params.to }}
						<option
							value="/{{ $unit }}-in-{{ $.Params.to }}/"
							{{ if eq $unit
								$.Params.from }}selected{{ end }}>
							{{ $unitData.name }}
						</option>
					{{ end }}
					{{ end }}
					</select>
				</div>

				<div class="text-center sm:pt-6">
					<button type="button"
						@click="navigateWithResult(
							$el.dataset.swapUrl)"
						data-swap-url="/{{ .Params.to }}-in-{{ .Params.from }}/"
						class="inline-flex items-center text-sm
							font-medium text-primary
							dark:text-primary-light">
						<svg xmlns="http://www.w3.org/2000/svg"
							fill="none" viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke="currentColor"
							class="w-6 h-6">
							<path stroke-linecap="round"
								stroke-linejoin="round"
								d="M7.5 21 3 16.5m0 0L7.5 12M3
								16.5h13.5m0-13.5L21 7.5m0
								0L16.5 12M21 7.5H7.5" />
						</svg>
					</button>
				</div>

				<div class="flex-1 w-full">
					<label for="to"
						class="block text-sm font-medium opacity-75">
						Umrechnen in:
					</label>
					<select id="to" name="to"
						@change="navigateWithValue($event.target.value)"
						class="select mt-1 block w-full">
					{{ range $unit, $unitData := $availableUnits }}
					{{ if ne $unit $.Params.from }}
						<option
							value="/{{ $.Params.from }}-in-{{ $unit }}/"
							{{ if eq $unit
								$.Params.to }}selected{{ end }}>
							{{ $unitData.name }}
						</option>
					{{ end }}
					{{ end }}
					</select>
				</div>

			</div>

		</div>

		<div x-data="createConverter('{{ .Params.engine }}',
			{{ $config | safeJS }})"
			x-init="init()">

			<div class="flex flex-col sm:flex-row gap-4 mt-4">
				<div class="flex-1">
					<label for="value"
						class="block text-sm font-medium
							opacity-75">
						Wert in {{ .Params.from_name }}:
					</label>
					<input type="text" id="value"
						inputmode="decimal"
						x-model="inputValue"
						@input="calculate()"
						class="textinput mt-1 block w-full"
						placeholder="Wert eingeben">
				</div>
				<div class="flex-1">
					<label for="result"
						class="block text-sm font-medium
							opacity-75">
						Ergebnis in {{ .Params.to_name }}:
					</label>
					<input type="text" id="result"
						disabled
						:value="result"
						class="textinput mt-1 block w-full">
					<p x-show="ratesError"
						x-cloak
						class="text-sm text-red-600 mt-1
							dark:text-red-400"
						x-text="ratesError"></p>
				</div>
			</div>

		</div>

	</div>

	<div id="formula" class="mt-4">
		{{ partial "conversion-formula.html" . }}
	</div>
	<div id="info">
		{{ partial "conversion-seo-texts.html" . }}
	</div>

{{ end }}

{{ define "headscripts" }}
	<script defer src="/js/decimal.js-light.min.js"></script>
	<script defer src="/js/converter.js"></script>
{{ end }}