{{ define "knots/fragments/secret" }}
  <div
    id="secret"
    hx-swap-oob="true"
    class="bg-gray-50 dark:bg-gray-700 border border-black dark:border-gray-500 rounded px-6 py-2 w-full lg:w-3xl">
    <h2 class="text-sm font-bold py-2 uppercase dark:text-gray-300">generated secret</h2>
    <p class="pb-2">Configure your knot to use this secret, and then hit initialize.</p>
    <span class="font-mono overflow-x">{{ .Secret }}</span>
  </div>
{{ end }}