{{ if .HideDetails }}
<div class="leading-5 mb-6 flex items-center print:hidden" _="">
  <input
    type="checkbox"
    id="advanced-switch"
    class="hidden"
    _="on load make a URLSearchParams from location.search then get it.get('details') then if it is 'yes' set my.checked to true then trigger switch on me end
       on change or switch log my checked then if my checked is true
         remove .hidden from #hidden-fields
         tell the next <label /> from me
           add .bg-strongpink .after:translate-x-full
           remove .bg-gray-300 .dark:bg-zinc-800
         end
       otherwise
         add .hidden to #hidden-fields
         tell the next <label /> from me
           remove .bg-strongpink .after:translate-x-full
           add .bg-gray-300 .dark:bg-zinc-800
         end
       end
    "
  />
  <label
    for="advanced-switch"
    class="bg-gray-300 dark:bg-zinc-800 -indent-96 cursor-pointer w-9 h-5 inline-block relative mr-2 rounded-full after:content-[&quot;&quot;] after:absolute after:w-4 after:h-4 after:transition after:rounded-2xl after:inset-0.5 after:bg-zinc-50 dark:after:bg-gray-700"
    >&nbsp;</label
  >
  <label
    for="advanced-switch"
    class="cursor-pointer text-sm pb-0.5 border-b-2 pb-0.5 border-b-gray-300"
    >Show more details</label
  >
</div>
{{ end }}

<div id="hidden-fields" class="{{if .HideDetails}}hidden{{end}}">
  <div class="leading-5 mb-6">
    <div class="text-sm text-strongpink">Published at</div>
    {{.CreatedAt}}
  </div>

  <div class="leading-5 mb-6">
    <div class="text-sm text-strongpink">Kind type</div>
    {{.Kind}} {{ if not (eq .KindNIP "")}} -
    <a href="https://github.com/nostr-protocol/nips/blob/master/{{.KindNIP}}.md"
      >{{.KindDescription}}</a
    >
    {{ end }}
  </div>

  {{ if not (eq "" .Nevent) }}
  <div class="leading-5 mb-6">
    <div class="text-sm text-strongpink">Address Code</div>
    <div>{{.Nevent}}</div>
  </div>
  {{ end }}

  <div class="leading-5 mb-6 px-4 pb-4 -mx-4 bg-gray-100 dark:bg-gray-700">
    <div
      class="px-4 py-1 -mx-4 text-gray-100 dark:text-gray-400 bg-gray-300 dark:bg-gray-800"
    >
      Event JSON
    </div>
    <div class="break-all font-mono whitespace-pre-wrap text-sm mt-4">
      {{- .EventJSON}}
    </div>
  </div>
</div>