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

	{{ $engine := .Params.engine | default "linear" }}

	{{ if eq $engine "currencies" }}
		{{ partial "conversion/currencies-data" . }}
	{{ else if eq $engine "temperatures" }}
		{{ partial "conversion/temperatures-data" . }}
	{{ else }}
		{{ partial "conversion/linear-data" . }}
	{{ end }}

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

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

			<div>

				<div>
					<label for="type"
						class="block text-sm font-medium opacity-75">
						Einheitentyp:
					</label>
					<select id="type" name="type"
						@change="navigate($event.target.value, '1')"
						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="navigate(
								$event.target.value, inputValue)"
							class="select mt-1 block w-full">
						{{ range $catData.unitOrder }}
						{{ $unitData := index $availableUnits . }}
						{{ if and $unitData (ne . $.Params.to) }}
							<option
								value="/{{ . }}-in-{{ $.Params.to }}/"
								{{ if eq .
									$.Params.from }}selected{{ end }}>
								{{ $unitData.name }}
							</option>
						{{ end }}
						{{ end }}
						</select>
					</div>

					<div class="text-center sm:pt-6">
						<button type="button"
							@click="navigate(
								$el.dataset.swapUrl, prettyNumber(convert(prepareValue(inputValue))))"
							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="navigate(
								$event.target.value, inputValue)"
							class="select mt-1 block w-full">
						{{ range $catData.unitOrder }}
						{{ $unitData := index $availableUnits . }}
						{{ if and $unitData (ne . $.Params.from) }}
							<option
								value="/{{ $.Params.from }}-in-{{ . }}/"
								{{ if eq .
									$.Params.to }}selected{{ end }}>
								{{ $unitData.name }}
							</option>
						{{ end }}
						{{ end }}
						</select>
					</div>

				</div>

			</div>

			<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.debounce.500ms="updateUrl(inputValue)"
						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="prettyNumber(convert(prepareValue(inputValue)))"
						class="textinput mt-1 block w-full">
				</div>
			</div>

		</div>

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

	</div>

{{ end }}