at-container-registry/pkg/appview/templates/components/pull-command-switcher.html

{{ define "pull-command-switcher" }}
{{/*
    Pull command with inline OCI client switcher.
    Expects dict with: RegistryURL, OwnerHandle, RepoName, Tag, ArtifactType, OciClient, IsLoggedIn

    For helm charts, shows helm command only (no switcher).
    For container images, shows a client dropdown that updates the command.
    Logged-in users: saves to profile via HTMX POST.
    Anonymous users: saves to localStorage.
*/}}
{{ if eq .ArtifactType "helm-chart" }}
    <div class="space-y-2">
        <p class="text-sm font-medium text-base-content/70">Pull this chart</p>
        {{ if .Tag }}
            {{ template "docker-command" (print "helm pull oci://" .RegistryURL "/" .OwnerHandle "/" .RepoName " --version " .Tag) }}
        {{ else }}
            {{ template "docker-command" (print "helm pull oci://" .RegistryURL "/" .OwnerHandle "/" .RepoName) }}
        {{ end }}
    </div>
{{ else }}
    <div class="space-y-2" id="pull-cmd-container">
        <p class="text-sm font-medium text-base-content/70">Pull this image</p>
        <div class="flex items-center gap-2">
            <select id="oci-client-switcher" class="select select-xs select-bordered w-auto"
                    onchange="updatePullCommand(this.value)">
                <option value="docker"{{ if or (eq .OciClient "") (eq .OciClient "docker") }} selected{{ end }}>docker</option>
                <option value="podman"{{ if eq .OciClient "podman" }} selected{{ end }}>podman</option>
                <option value="nerdctl"{{ if eq .OciClient "nerdctl" }} selected{{ end }}>nerdctl</option>
                <option value="buildah"{{ if eq .OciClient "buildah" }} selected{{ end }}>buildah</option>
                <option value="crane"{{ if eq .OciClient "crane" }} selected{{ end }}>crane</option>
            </select>
            <div id="pull-cmd-display" class="flex-1 min-w-0">
                {{ if .Tag }}
                    {{ template "docker-command" (print (ociClientName .OciClient) " pull " .RegistryURL "/" .OwnerHandle "/" .RepoName ":" .Tag) }}
                {{ else }}
                    {{ template "docker-command" (print (ociClientName .OciClient) " pull " .RegistryURL "/" .OwnerHandle "/" .RepoName ":latest") }}
                {{ end }}
            </div>
        </div>
    </div>
    <script>
    (function() {
        var registryURL = {{ .RegistryURL }};
        var ownerHandle = {{ .OwnerHandle }};
        var repoName = {{ .RepoName }};
        var tag = {{ if .Tag }}{{ .Tag }}{{ else }}"latest"{{ end }};
        var isLoggedIn = {{ .IsLoggedIn }};

        // Restore from localStorage for anonymous users
        if (!isLoggedIn) {
            var saved = localStorage.getItem('oci-client');
            if (saved) {
                var sel = document.getElementById('oci-client-switcher');
                if (sel) {
                    sel.value = saved;
                    updatePullCommand(saved);
                }
            }
        }

        window.updatePullCommand = function(client) {
            var cmd = client + ' pull ' + registryURL + '/' + ownerHandle + '/' + repoName + ':' + tag;
            var container = document.getElementById('pull-cmd-display');
            if (!container) return;
            var code = container.querySelector('code');
            if (code) code.textContent = cmd;
            var btn = container.querySelector('[data-cmd]');
            if (btn) btn.dataset.cmd = cmd;

            // Persist preference
            if (isLoggedIn) {
                htmx.ajax('POST', '/api/profile/oci-client', {values: {oci_client: client}, swap: 'none'});
            } else {
                localStorage.setItem('oci-client', client);
            }
        };
    })();
    </script>
{{ end }}
{{ end }}