{{ define "title" }}{{ .String.RenderTitle }} · by {{ resolve .String.Did.String }} · Tangled{{ end }}

{{ define "extrameta" }}
  {{ $ownerId := resolve .String.Did.String }}
  <meta property="og:title" content="{{ .String.RenderTitle }} · by {{ $ownerId }}" />
  <meta property="og:type" content="object" />
  <meta property="og:url" content="https://tangled.org/strings/{{ $ownerId }}/{{ .String.Rkey }}" />
  <meta property="og:description" content="{{ with .String.Description }}{{ . }}{{ end }}" />
{{ end }}

{{ define "content" }}
{{ $ownerId := resolve .String.Did.String }}
  <section id="string-header" class="mb-2 py-2 px-4 dark:text-white">
    <div class="text-lg flex flex-col sm:flex-row items-start gap-4 justify-between">
      <!-- left items -->
      <div class="flex flex-col gap-2">
        <!-- string owner / string name -->
        <div class="flex items-center gap-2 flex-wrap">
          <a href="/{{ resolve .String.Did.String }}?tab=strings" class="flex items-center gap-1">
            {{ template "user/fragments/picHandle" .String.Did.String }}
          </a>
          <span class="select-none">/</span>
          <a href="/strings/{{ $ownerId }}/{{ .String.Rkey }}" class="font-bold">{{ .String.RenderTitle }}</a>
        </div>

        <span class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
          {{ with .String.Description }}
            {{ . }}
          {{ else }}
            <span class="italic">This string has no description</span>
          {{ end }}
        </span>

        <div class="text-gray-500 dark:text-gray-400 text-sm text-base">
          <span>
          {{ if .String.Edited }}
            edited {{ template "repo/fragments/time" .String.Edited }}
          {{ else }}
            {{ template "repo/fragments/time" .String.Created }}
          {{ end }}
          </span>
        </div>
      </div>

      <div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
        {{ if and .LoggedInUser (eq .LoggedInUser.Did .String.Did) }}
          <a class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
             hx-boost="true"
             href="/strings/{{ .String.Did }}/{{ .String.Rkey }}/edit">
            {{ i "pencil" "w-4 h-4" }}
            <span class="hidden md:inline">edit</span>
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
          </a>
          <button
            class="btn text-sm text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex items-center gap-2 group"
            title="Delete string"
            hx-delete="/strings/{{ .String.Did }}/{{ .String.Rkey }}/"
            hx-swap="none"
            hx-confirm="Are you sure you want to delete the string?"
          >
            {{ i "trash-2" "w-4 h-4" }}
            <span class="hidden md:inline">delete</span>
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
          </button>
        {{ end }}
        {{ template "fragments/starBtn"
          (dict "SubjectAt" .String.AtUri
                "IsStarred" .IsStarred
                "StarCount" .StarCount) }}
      </div>
    </div>
  </section>
  {{ range .FileParams }}
    {{ template "strings/fragments/file" . }}
  {{ end }}
  {{ template "fragments/multiline-select" }}
  <div class="flex flex-col gap-4 mt-4">
    {{
      template "fragments/comment/commentList"
      (dict
        "LoggedInUser"       .LoggedInUser
        "Reactions"          .Reactions
        "UserReacted"        .UserReacted
        "VouchRelationships" .VouchRelationships
        "CommentList"        .CommentList)
    }}
    {{ template "newComment" . }}
  </div>
{{ end }}

{{ define "newComment" }}
  {{ if .LoggedInUser }}
    <form
      hx-post="/comment"
      hx-trigger="submit, keydown[(ctrlKey || metaKey) && key=='Enter'] from:find textarea"
      hx-swap="none"
      hx-disabled-elt="find button[type='submit']"
      class="group/form"
    >
      <input name="subject-uri" type="hidden" value="{{ .String.AtUri }}">
      <input name="subject-cid" type="hidden" value="{{ with .String.Cid }}{{ . }}{{ end }}">
      <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full">
        <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
          {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
        </div>
        <textarea
          name="body"
          class="w-full p-2 rounded"
          placeholder="Add to the discussion. Markdown is supported."
          rows="5"
          required
        ></textarea>
        <div id="comment-error" class="error"></div>
      </div>
      <div class="flex gap-2 mt-2">
        <button
          id="comment-button"
          type="submit"
          class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline"
        >
          {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]/form:hidden" }}
          {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
          Comment
        </button>
      </div>
    </form>
  {{ else }}
    <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded drop-shadow-sm p-6 relative flex gap-2 items-center">
      <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
        Sign up
      </a>
      <span class="text-gray-500 dark:text-gray-400">or</span>
      <a href="/login" class="underline">login</a>
      to add to the discussion
    </div>
  {{ end }}
{{ end }}