{{ define "header" }}
<h1 class="mb-4 mt-2 text-2xl font-bold">{{ . }}</h1>
{{ end }}

{{ define "next-button" }}
<div class="flex mt-4">
    <button hx-target="#wizard-form" hx-post="/ui/wizard" type="button"
        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        {{ t .Localizer "button.next" }}
        <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 14 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
    </button>
</div>
{{ end }}

{{ define "back-button" }}
<div class="flex mt-4">
    <button hx-target="#wizard-form" hx-post="/ui/wizard" hx-params="{{ .Params }}" type="button"
        class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
        <svg class="rotate-180 w-3.5 h-3.5 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 14 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
        {{ t .Localizer "button.back" }}
    </button>
</div>
{{ end }}

{{ define "radio-with-description" }}
<div class="flex mt-4">
    <div class="flex items-center h-5">
        <input id="{{ .name }}-{{ .value }}" aria-describedby="{{ .name }}-{{ .value }}-text" type="radio"
            name="{{ .name }}" value="{{ .value }}" {{ if eq .value .current }}checked{{ end }}
            class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 checked:bg-blue-600 checked:border-transparent dark:checked:bg-blue-600">
    </div>
    <div class="ps-2 text-sm">
        <label for="{{ .name }}-{{ .value }}"
            class="font-medium text-gray-900 dark:text-gray-300 {{ .extraLabelClass }}">{{ .label }}</label>
        <p id="{{ .name }}-{{ .value }}-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">{{
            .description }}</p>
    </div>
</div>
{{ end }}

{{ define "checkbox-with-description" }}
<div class="flex mt-4">
    <div class="flex items-center h-5">
        <input id="{{ .name }}-{{ .value }}-checkbox" aria-describedby="{{ .name }}-{{ .value }}-checkbox-text"
            type="checkbox" name="{{ .name }}" value="{{ .value }}" {{ if .checked }}checked{{ end }}
            class="w-4 h-4 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 checked:bg-blue-600 checked:border-transparent dark:checked:bg-blue-600">
    </div>
    <div class="ps-2 text-sm">
        <label for="{{ .name }}-{{ .value }}-checkbox" class="font-medium text-gray-900 dark:text-gray-300">{{ .label
            }}</label>
        <p id="{{ .name }}-{{ .value }}-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">{{
            .description }}</p>
    </div>
</div>
{{ end }}

{{ define "hidden-inputs" }}
{{- if .Target -}}
<input type="hidden" name="target" value="{{ .Target }}">
<input type="hidden" name="selected-target" value="{{ .Target }}">
{{- end -}}
{{- if .Version -}}
<input type="hidden" name="version" value="{{ .Version }}">
<input type="hidden" name="selected-version" value="{{ .Version }}">
{{- end -}}
{{- if .Arch -}}
<input type="hidden" name="arch" value="{{ .Arch }}">
<input type="hidden" name="selected-arch" value="{{ .Arch }}">
{{- end -}}
{{- if .Platform -}}
<input type="hidden" name="platform" value="{{ .Platform }}">
<input type="hidden" name="selected-platform" value="{{ .Platform }}">
{{- end -}}
{{- if .Board -}}
<input type="hidden" name="board" value="{{ .Board }}">
<input type="hidden" name="selected-board" value="{{ .Board }}">
{{- end -}}
{{- if .SecureBoot -}}
<input type="hidden" name="secureboot" value="{{ .SecureBoot }}">
<input type="hidden" name="selected-secureboot" value="{{ .SecureBoot }}">
{{- end -}}
{{ range .Extensions }}
<input type="hidden" name="extensions" value="{{ . }}">
<input type="hidden" name="selected-extensions" value="{{ . }}">
{{ end }}
{{- if .CmdlineSet -}}
<input type="hidden" name="cmdline" value="{{ .Cmdline }}">
<input type="hidden" name="selected-cmdline" value="{{ .Cmdline }}">
<input type="hidden" name="bootloader" value="{{ .Bootloader }}">
<input type="hidden" name="selected-bootloader" value="{{ .Bootloader }}">
<input type="hidden" name="overlay-options" value="{{ .OverlayOptions }}">
<input type="hidden" name="selected-overlay-options" value="{{ .OverlayOptions }}">
{{- end -}}
{{ end }}

{{ define "platform-description" }}
{{ .Platform.Description }}
(<a target="_blank" class="text-blue-600 dark:text-blue-500 underline"
    href="https://docs.siderolabs.com/talos/{{ short_version .Version }}{{ .Platform.Documentation}}">{{ t .Localizer
    "common.documentation" }}</a>).
{{ end }}

{{ define "board-description" }}
{{ t .Localizer "common.runs_on" }} {{ .Board.Label }}{{ if .Board.Documentation }} (<a target="_blank"
    class="text-blue-600 dark:text-blue-500 underline"
    href="https://docs.siderolabs.com/talos/{{ short_version .Version }}{{ .Board.Documentation}}">{{ t .Localizer
    "common.documentation" }}</a>){{ end }}.
{{ end }}

{{ define "arch-description" }}
{{ if eq .Arch "amd64" }}
{{ t .Localizer "architecture.amd64" }}
{{ end }}
{{ if eq .Arch "arm64" }}
{{ if eq .Target "metal" }}
{{ t .Localizer "architecture.arm64" }}
{{ else }}
{{ t .Localizer "architecture.other" }}
{{ end }}
{{ end }}
{{ end }}

{{ define "copyable-text"}}
<div class="inline-flex items-center gap-2 bg-slate-200 dark:bg-slate-700 p-1">
        <span class="font-mono">
                {{ . }}
        </span>
        <button type="button" class="p-0.5 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 [&[data-copied]]:bg-green-100 dark:[&[data-copied]]:bg-green-700 [&[data-copied]]:text-green-600 dark:[&[data-copied]]:text-green-300 [&[data-copied]]:border-green-300 dark:[&[data-copied]]:border-green-700 transition-colors"
                onclick="copyToClipboard(this)"
                title="Copy to clipboard">
                <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
        </button>
</div>
{{ end }}