{{ define "docker-command" }}
{{/*
    Docker command component - displays a docker command with icon and copy button

    Expects: string - the docker command to display
    Usage: {{ template "docker-command" "docker pull atcr.io/alice/myapp:latest" }}
*/}}
<div class="cmd group">
    {{ icon "terminal" "size-4 shrink-0 text-base-content/60" }}
    <code>{{ . }}</code>
    <button class="btn btn-ghost btn-xs absolute right-2 top-1/2 -translate-y-1/2 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100 transition-opacity" data-cmd="{{ . }}" aria-label="Copy command to clipboard">
        {{ icon "copy" "size-4" }}
    </button>
</div>
{{ end }}

{{ define "image-ref" }}
{{/*
    Image reference component - shows a short image reference with a copy button
    that copies the full pull command. Used in dense card layouts where the full
    command would truncate.

    Expects: dict with
    - Display: string - short form shown in the UI (e.g. "alice.bsky.social/myapp:v1.2.3")
    - Copy: string - full command copied to clipboard (e.g. "docker pull atcr.io/alice.bsky.social/myapp:v1.2.3")
*/}}
<div class="cmd group !w-full">
    {{ icon "terminal" "size-4 shrink-0 text-base-content/60" }}
    <code>{{ .Display }}</code>
    <button class="btn btn-ghost btn-xs absolute right-1 top-1/2 -translate-y-1/2 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100 transition-opacity" data-cmd="{{ .Copy }}" aria-label="Copy pull command to clipboard">
        {{ icon "copy" "size-4" }}
    </button>
</div>
{{ end }}