{{ define "strings/fragments/file" }}
<section
  class="bg-white dark:bg-gray-800 px-6 py-4 mb-2 rounded relative w-full dark:text-white"
  hx-target="this"
  hx-swap="outerHTML"
>
  <div class="flex flex-col md:flex-row md:justify-between md:items-center text-gray-500 dark:text-gray-400 text-sm md:text-base pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
    <span>{{ .Name }}</span>
    <div>
      <span>{{ .LineCount }} line{{if ne .LineCount 1}}s{{end}}</span>
      <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
      <span>{{ .Size }}</span>
      <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
      <a href="/strings/{{ resolve .String.Did.String }}/{{ .String.Rkey }}/{{ .String.Cid }}/{{ .Name }}/raw">View raw</a>
      {{ if .HasRenderedToggle }}
      <span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
      <button hx-get="/strings/{{ .String.Did }}/{{ .String.Rkey }}/{{ .String.Cid }}/{{ .Name }}?code={{ .ShowingRendered }}">
        View {{ if .ShowingRendered }}code{{ else }}rendered{{ end }}
      </button>
      {{ end }}
    </div>
  </div>
  <div class="overflow-x-auto overflow-y-hidden relative">
    {{ if .ShowingRendered }}
      <div class="prose dark:prose-invert">{{ .Content | readme }}</div>
    {{ else }}
      <div class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ code .Content .Name | escapeHtml }}</div>
    {{ end }}
  </div>
</section>
{{ end }}