{{ define "main" }}
<h1 class="text-3xl font-bold mb-6">Umrechnung von Maßeinheiten</h1>
<p class="mb-6 text-lg">Willkommen bei unserem umfassenden Einheitenumrechner! Egal, ob Sie Währungen, Längen, Gewichte, Volumen, Temperaturen oder andere Maßeinheiten umrechnen möchten, hier finden Sie das passende Werkzeug. Unser intuitiver Umrechner hilft Ihnen, schnell und präzise zwischen verschiedenen Einheiten zu wechseln.</p>

<h2 class="text-2xl font-bold mb-6">Was möchten Sie umrechnen?</h2>
<nav>
	<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{{ range $slug, $data := hugo.Data }}
	{{ $url := partial "category-url.html" (dict "category" $data.slug "units" $data.units) }}
	{{ if not $url }}{{ continue }}{{ end }}
		<li>
			<a class="grid grid-cols-[24px_auto] gap-4 bg-primary text-white p-6 rounded-lg shadow-md transition-transform hover:scale-105 hover:bg-primary-light transition-[backgroundColor_transform]"
				x-target.push="maincontent" href="{{ $url }}">
				{{ $svgPath := printf "img/%s.svg" $data.slug }}
				{{ $svgFile := readFile (printf "static/%s" $svgPath) }}
				{{ if $svgFile }}
					{{ $svgFile | safeHTML }}
				{{ else }}
					<span></span>
				{{ end }}
				<span>{{ $data.name }}</span>
			</a>
		</li>
{{ end }}
	</ul>
</nav>

<div id="textcontent" x-sync class="textcontent">
{{ partial "texts/home.html" . }}
</div>
{{ end }}