{{ define "title" }}{{ .Discussion.Title }} · discussion #{{ .Discussion.DiscussionId }} · {{ .RepoInfo.FullName }}{{ end }}

{{ define "repoContentLayout" }}
  <div class="grid grid-cols-1 md:grid-cols-10 gap-4 w-full">
    <div class="col-span-1 md:col-span-8">
      <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
        {{ block "repoContent" . }}{{ end }}
      </section>
      {{ block "repoAfter" . }}{{ end }}
    </div>
    <div class="col-span-1 md:col-span-2 flex flex-col gap-6">
      {{ template "discussionSidebar" . }}
    </div>
  </div>
{{ end }}

{{ define "discussionSidebar" }}
  <div class="bg-white dark:bg-gray-800 rounded p-4">
    <h3 class="text-sm font-semibold mb-2">Target Channel</h3>
    <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
      {{ i "git-branch" "w-4 h-4" }}
      <span>{{ .Discussion.TargetChannel }}</span>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 rounded p-4">
    <h3 class="text-sm font-semibold mb-2">Patches ({{ len .ActivePatches }})</h3>
    {{ if .ActivePatches }}
      <ul class="text-sm space-y-1">
        {{ range .ActivePatches }}
          <li class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
            {{ i "file-diff" "w-3 h-3" }}
            <code class="text-xs">{{ .PatchHash | truncate 12 }}</code>
          </li>
        {{ end }}
      </ul>
    {{ else }}
      <p class="text-sm text-gray-500 dark:text-gray-400">No patches yet</p>
    {{ end }}
  </div>

  {{ template "repo/fragments/participants" .Discussion.Participants }}
{{ end }}

{{ define "repoContent" }}
<section id="discussion-{{ .Discussion.DiscussionId }}">
  {{ template "discussionHeader" . }}
  {{ template "discussionInfo" . }}
  {{ if .Discussion.Body }}
    <article id="body" class="mt-4 prose dark:prose-invert">{{ .Discussion.Body | markdown }}</article>
  {{ end }}
</section>
{{ end }}

{{ define "discussionHeader" }}
  <header class="pb-2">
    <h1 class="text-2xl">
      {{ .Discussion.Title | description }}
      <span class="text-gray-500 dark:text-gray-400">#{{ .Discussion.DiscussionId }}</span>
    </h1>
  </header>
{{ end }}

{{ define "discussionInfo" }}
  {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
  {{ $icon := "ban" }}
  {{ $stateText := "closed" }}
  {{ if .Discussion.State.IsOpen }}
    {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
    {{ $icon = "message-circle" }}
    {{ $stateText = "open" }}
  {{ else if .Discussion.State.IsMerged }}
    {{ $bgColor = "bg-purple-600 dark:bg-purple-700" }}
    {{ $icon = "git-merge" }}
    {{ $stateText = "merged" }}
  {{ end }}

  <div class="inline-flex items-center gap-2 flex-wrap">
    <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }}">
      {{ i $icon "w-3 h-3 mr-1.5 text-white dark:text-white" }}
      <span class="text-white dark:text-white text-sm">{{ $stateText }}</span>
    </span>

    <span class="text-gray-500 dark:text-gray-400 text-sm flex flex-wrap items-center gap-1">
      opened by
      {{ template "user/fragments/picHandleLink" .Discussion.Did }}
      <span class="select-none before:content-['\00B7']"></span>
      {{ if .Discussion.Edited }}
        edited {{ template "repo/fragments/time" .Discussion.Edited }}
      {{ else }}
        {{ template "repo/fragments/time" .Discussion.Created }}
      {{ end }}
    </span>
  </div>
  <div id="discussion-actions-error" class="error"></div>
{{ end }}

{{ define "repoAfter" }}
  <div class="flex flex-col gap-4 mt-4">
    <!-- Patches section -->
    <section class="bg-white dark:bg-gray-800 p-6 rounded">
      <h3 class="text-lg font-semibold mb-4">Patches</h3>
      {{ if .Discussion.Patches }}
        <div class="space-y-3">
          {{ range .Discussion.Patches }}
            <div class="border rounded p-4 dark:border-gray-700 {{ if not .IsActive }}opacity-50{{ end }}">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                  {{ i "file-diff" "w-4 h-4 text-gray-500" }}
                  <code class="text-sm font-mono">{{ .PatchHash | truncate 20 }}</code>
                  {{ if not .IsActive }}
                    <span class="text-xs text-red-500">(removed)</span>
                  {{ end }}
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-500">
                  <span>by {{ template "user/fragments/picHandleLink" .PushedByDid }}</span>
                  <span>{{ template "repo/fragments/time" .Added }}</span>
                </div>
              </div>
              {{ if $.CanManage }}
                <div class="mt-2 flex gap-2">
                  {{ if .IsActive }}
                    <form hx-delete="/{{ $.RepoInfo.FullName }}/discussions/{{ $.Discussion.DiscussionId }}/patches/{{ .Id }}" hx-swap="none">
                      <button type="submit" class="text-xs text-red-600 hover:underline">Remove</button>
                    </form>
                  {{ else }}
                    <form hx-post="/{{ $.RepoInfo.FullName }}/discussions/{{ $.Discussion.DiscussionId }}/patches/{{ .Id }}/readd" hx-swap="none">
                      <button type="submit" class="text-xs text-green-600 hover:underline">Re-add</button>
                    </form>
                  {{ end }}
                </div>
              {{ end }}
            </div>
          {{ end }}
        </div>
      {{ else }}
        <p class="text-gray-500 dark:text-gray-400 text-sm">No patches have been added to this discussion yet.</p>
      {{ end }}

      <!-- Add patch form -->
      {{ if and $.LoggedInUser $.Discussion.State.IsOpen }}
        <div class="mt-4 pt-4 border-t dark:border-gray-700">
          <h4 class="text-sm font-semibold mb-2">Add a patch</h4>
          <form
            hx-post="/{{ $.RepoInfo.FullName }}/discussions/{{ $.Discussion.DiscussionId }}/patches"
            hx-swap="none"
            class="space-y-3"
          >
            <div>
              <label for="patch_hash" class="block text-xs text-gray-500 mb-1">Patch Hash</label>
              <input
                type="text"
                id="patch_hash"
                name="patch_hash"
                required
                class="w-full px-3 py-2 text-sm border rounded dark:border-gray-600 dark:bg-gray-700"
                placeholder="Pijul change hash"
              >
            </div>
            <div>
              <label for="patch" class="block text-xs text-gray-500 mb-1">Patch Content</label>
              <textarea
                id="patch"
                name="patch"
                required
                rows="4"
                class="w-full px-3 py-2 text-sm border rounded font-mono dark:border-gray-600 dark:bg-gray-700"
                placeholder="Paste your patch content here..."
              ></textarea>
            </div>
            <div class="error" id="patch"></div>
            <button type="submit" class="btn-primary text-sm px-4 py-2">Add patch</button>
          </form>
        </div>
      {{ end }}
    </section>

    <!-- Comments section -->
    <section class="bg-white dark:bg-gray-800 p-6 rounded">
      <h3 class="text-lg font-semibold mb-4">Comments</h3>
      {{ if .CommentList }}
        <div class="space-y-4">
          {{ range .CommentList }}
            <div class="border rounded p-4 dark:border-gray-700">
              <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
                {{ template "user/fragments/picHandleLink" .Self.Did }}
                <span>{{ template "repo/fragments/time" .Self.Created }}</span>
              </div>
              <div class="prose dark:prose-invert">{{ .Self.Body | markdown }}</div>
              {{ if .Replies }}
                <div class="mt-4 ml-4 space-y-3 border-l-2 border-gray-200 dark:border-gray-600 pl-4">
                  {{ range .Replies }}
                    <div class="text-sm">
                      <div class="flex items-center gap-2 text-gray-500 mb-1">
                        {{ template "user/fragments/picHandleLink" .Did }}
                        <span>{{ template "repo/fragments/time" .Created }}</span>
                      </div>
                      <div class="prose dark:prose-invert prose-sm">{{ .Body | markdown }}</div>
                    </div>
                  {{ end }}
                </div>
              {{ end }}
            </div>
          {{ end }}
        </div>
      {{ else }}
        <p class="text-gray-500 dark:text-gray-400 text-sm">No comments yet.</p>
      {{ end }}

      <!-- New comment form -->
      {{ if $.LoggedInUser }}
        <div class="mt-4 pt-4 border-t dark:border-gray-700">
          <form
            hx-post="/{{ $.RepoInfo.FullName }}/discussions/{{ $.Discussion.DiscussionId }}/comment"
            hx-swap="none"
            class="space-y-3"
          >
            <textarea
              name="body"
              required
              rows="3"
              class="w-full px-3 py-2 text-sm border rounded dark:border-gray-600 dark:bg-gray-700"
              placeholder="Add a comment..."
            ></textarea>
            <div class="error" id="comment"></div>
            <button type="submit" class="btn-primary text-sm px-4 py-2">Comment</button>
          </form>
        </div>
      {{ end }}
    </section>

    <!-- Discussion actions -->
    {{ if $.LoggedInUser }}
      <section class="bg-white dark:bg-gray-800 p-6 rounded">
        <div class="flex flex-wrap gap-2">
          {{ if $.Discussion.State.IsOpen }}
            {{ if $.CanManage }}
              <form hx-post="/{{ $.RepoInfo.FullName }}/discussions/{{ $.Discussion.DiscussionId }}/merge" hx-swap="none">
                <button type="submit" class="btn-create text-sm px-4 py-2 flex items-center gap-2">
                  {{ i "git-merge" "w-4 h-4" }}
                  Merge
                </button>
              </form>
            {{ end }}
            <form hx-post="/{{ $.RepoInfo.FullName }}/discussions/{{ $.Discussion.DiscussionId }}/close" hx-swap="none">
              <button type="submit" class="btn-secondary text-sm px-4 py-2 flex items-center gap-2">
                {{ i "ban" "w-4 h-4" }}
                Close
              </button>
            </form>
          {{ else if $.Discussion.State.IsClosed }}
            <form hx-post="/{{ $.RepoInfo.FullName }}/discussions/{{ $.Discussion.DiscussionId }}/reopen" hx-swap="none">
              <button type="submit" class="btn-primary text-sm px-4 py-2 flex items-center gap-2">
                {{ i "refresh-cw" "w-4 h-4" }}
                Reopen
              </button>
            </form>
          {{ end }}
        </div>
        <div class="error" id="discussion"></div>
      </section>
    {{ end }}
  </div>
{{ end }}