{{ define "repo/fragments/cloneInstructions" }}
    <section
        class="mt-4 p-6 rounded bg-white dark:bg-gray-800 dark:text-white w-full mx-auto overflow-auto flex flex-col gap-4"
    >
        <div class="flex flex-col gap-2">
            <strong>push</strong>
            <div class="md:pl-4 overflow-x-auto whitespace-nowrap">
                <code class="dark:text-gray-100"
                    >git remote add origin
                    git@{{ .RepoInfo.Knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code
                >
            </div>
        </div>

        <div class="flex flex-col gap-2">
            <strong>clone</strong>
            <div class="md:pl-4 flex flex-col gap-2">
                <div class="flex items-center gap-3">
                    <span
                        class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white"
                        >HTTP</span
                    >
                    <div class="overflow-x-auto whitespace-nowrap flex-1">
                        <code class="dark:text-gray-100"
                            >git clone
                            https://tangled.sh/{{ .RepoInfo.OwnerWithAt }}/{{ .RepoInfo.Name }}</code
                        >
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <span
                        class="bg-gray-100 dark:bg-gray-700 p-1 mr-1 font-mono text-sm rounded select-none dark:text-white"
                        >SSH</span
                    >
                    <div class="overflow-x-auto whitespace-nowrap flex-1">
                        <code class="dark:text-gray-100"
                            >git clone
                            git@{{ .RepoInfo.Knot }}:{{ .RepoInfo.OwnerHandle }}/{{ .RepoInfo.Name }}</code
                        >
                    </div>
                </div>
            </div>
        </div>

        <p class="py-2 text-gray-500 dark:text-gray-400">
            Note that for self-hosted knots, clone URLs may be different based
            on your setup.
        </p>
    </section>
{{ end }}