{{ define "title" }}strings by {{ resolve .Card.UserDid  }}{{ end }}

{{ define "extrameta" }}
    {{ $handle := resolve .Card.UserDid }}
    <meta property="og:title" content="{{ $handle }}" />
    <meta property="og:type" content="profile" />
    <meta property="og:url" content="https://tangled.org/{{ $handle }}" />
    <meta property="og:description" content="{{ or .Card.Profile.Description $handle }}" />
{{ end }}


{{ define "content" }}
<div class="grid grid-cols-1 md:grid-cols-11 gap-4">
    <div class="md:col-span-3 order-1 md:order-1">
        {{ template "user/fragments/profileCard" .Card }}
    </div>
    <div id="all-strings" class="md:col-span-8 order-2 md:order-2">
        {{ block "allStrings" . }}{{ end }}
    </div>
</div>
{{ end }}

{{ define "allStrings" }}
  <p class="text-sm font-bold p-2 dark:text-white">ALL STRINGS</p>
  <div id="strings" class="grid grid-cols-1 gap-4 mb-6">
    {{ range .Strings }}
      {{ template "singleString" (list $ .) }}
    {{ else }}
      <p class="px-6 dark:text-white">This user does not have any strings yet.</p>
    {{ end }}
  </div>
{{ end }}

{{ define "singleString" }}
  {{ $root := index . 0 }}
  {{ $s := index . 1 }}
  <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800">
    <div class="font-medium dark:text-white flex gap-2 items-center">
        <a href="/strings/{{ resolve $root.Card.UserDid }}/{{ $s.Rkey }}">{{ $s.Filename }}</a>
    </div>
    {{ with $s.Description }}
      <div class="text-gray-600 dark:text-gray-300 text-sm">
          {{ . }}
      </div>
    {{ end }}

    {{ $stat := $s.Stats }}
    <div class="text-gray-400 pt-4 text-sm font-mono inline-flex gap-2 mt-auto">
      <span>{{ $stat.LineCount }} line{{if ne $stat.LineCount 1}}s{{end}}</span>
      <span class="select-none [&:before]:content-['·']"></span>
      {{ with $s.Edited }}
        <span>edited {{ template "repo/fragments/shortTimeAgo" . }}</span>
      {{ else }}
        {{ template "repo/fragments/shortTimeAgo" $s.Created }}
      {{ end }}
    </div>
  </div>
{{ end }}