{{ define "settings-panel-user" }}
<section class="card bg-base-200 shadow-sm p-6 space-y-6">
    <div>
        <h2 class="text-xl font-semibold">Preferences</h2>
        <p class="text-base-content/70 mt-1">Customize your experience across the site.</p>
    </div>

    <div class="flex items-center gap-4">
        <div>
            <label for="oci-client-select" class="text-sm font-medium">Preferred client</label>
            <p id="oci-client-hint" class="text-xs text-base-content/70">Sets the pull command shown on repository pages. Choose <em>Image reference only</em> to copy without a command prefix.</p>
        </div>
        {{ $oci := .Profile.OciClient }}
        <select id="oci-client-select" aria-describedby="oci-client-hint" class="select select-sm select-bordered min-w-40"
                name="oci_client"
                hx-post="/api/profile/oci-client"
                hx-trigger="change"
                hx-swap="none">
            <option value="docker"{{ if or (eq $oci "") (eq $oci "docker") }} selected{{ end }}>Docker</option>
            <option value="podman"{{ if eq $oci "podman" }} selected{{ end }}>Podman</option>
            <option value="buildah"{{ if eq $oci "buildah" }} selected{{ end }}>Buildah</option>
            <option value="nerdctl"{{ if eq $oci "nerdctl" }} selected{{ end }}>nerdctl</option>
            <option value="crane"{{ if eq $oci "crane" }} selected{{ end }}>crane</option>
            <option value="none"{{ if eq $oci "none" }} selected{{ end }}>Image reference only</option>
        </select>
    </div>

    {{ if .AIAdvisorEnabled }}
    <div class="divider my-2"></div>
    <div class="flex items-start gap-3">
        {{ if .Profile.HasAIAdvisorAccess }}
        <label class="flex items-start gap-3 cursor-pointer">
            <input type="checkbox" class="toggle toggle-primary mt-0.5"
                   hx-post="/api/profile/ai-advisor"
                   hx-trigger="change"
                   hx-swap="none"
                   {{ if .Profile.AIAdvisorEnabled }}checked{{ end }}>
            <div>
                <span class="font-medium">AI Image Advisor</span>
                <p class="text-xs text-base-content/60">Analyze your container images for optimization suggestions using AI.</p>
            </div>
        </label>
        {{ else }}
        <div>
            <span class="font-medium text-base-content/50">AI Image Advisor</span>
            <p class="text-xs text-base-content/70">Analyze your container images for optimization suggestions using AI.</p>
            <p class="text-xs text-primary mt-1">
                <a href="/settings/billing">Upgrade your plan</a> to enable this feature.
            </p>
        </div>
        {{ end }}
    </div>
    {{ end }}
</section>
{{ end }}