{{ define "wizard-extensions" }}
{{ template "hidden-inputs" . }}
{{ template "header" (t .Localizer "extensions.title") }}
<div class="mb-6 max-h-[500px] flex flex-col">
    <div class="ms-2 text-sm">
        <p class="text-xs font-normal text-gray-500 dark:text-gray-300">
            <a class="text-blue-600 dark:text-blue-500 underline" target="_blank"
                href="https://github.com/siderolabs/extensions">{{ t .Localizer "extensions.title" }}</a>{{ t .Localizer
            "extensions.description" }}
            <br>
            {{ t .Localizer "extensions.select" }}
        </p>
    </div>

    <div class="ps-2 mt-2 mb-2">
        <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
        <div class="relative">
            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                </svg>
            </div>
            <input type="search" id="search" name="search"
                class="block w-full p-2 ps-10 text-xs text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="{{ t .Localizer "button.search" }}" hx-post="/ui/extensions-list"
                hx-trigger="input changed delay:500ms, search" hx-target="#extensions-list"
                hx-params="version,search,extensions" />
        </div>
    </div>

    <div class="ps-2 flex-1 overflow-y-auto" id="extensions-list">
        {{ template "extensions-list" . }}
    </div>

    <div class="flex gap-4">
        {{ template "back-button" (dict "Params"
        "target,version,platform,board,selected-arch,selected-secureboot" "Localizer" .Localizer) }}
        {{ template "next-button" . }}
    </div>
</div>
{{ end }}

{{ template "wizard-extensions" . }}