{title || "Untitled"}

by {#if originalAuthor} {@render userBadge(originalAuthor, author, ndk)} {:else} {author || "Unknown"} {/if}

{#if version}

Version: {version}

{/if}

{#if summary}

{summary}

{/if}

Index author: {@render userBadge(event.pubkey, author, ndk)}

{#if source}

Source: {source}

{/if} {#if type}

Publication type: {type}

{/if} {#if language}

Language: {language}

{/if} {#if publisher}

Published by: {publisher}

{/if} {#if identifier}

Identifier: {identifier}

{/if}

{#if sectionAddress}

{#if user.profile}

{#if user.profile.picture}

{/if} {user.profile.displayName || user.profile.name || "Anonymous"}

{/if}

{#if commentError}
          <P class="text-red-600 dark:text-red-400 text-sm">{commentError}</P>
        {/if}

{#if commentSuccess}
          <P class="text-green-600 dark:text-green-400 text-sm"
            >Comment posted successfully!</P
          >
        {/if}

{#if showJsonPreview && previewJson}
          <div
            class="border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-gray-50 dark:bg-gray-900"
          >
            <P class="text-sm font-semibold mb-2">Event JSON Preview:</P>
            <pre
              class="text-xs bg-white dark:bg-gray-800 p-3 rounded overflow-x-auto border border-gray-200 dark:border-gray-700"><code
                >{JSON.stringify(previewJson, null, 2)}</code
              ></pre>
          </div>
        {/if}

<div class="flex justify-between items-center gap-3 pt-2">
          <Button
            color="light"
            size="sm"
            onclick={() => (showJsonPreview = !showJsonPreview)}
            class="flex items-center gap-1"
          >
            {#if showJsonPreview}
              <ChevronUpOutline class="w-4 h-4" />
            {:else}
              <ChevronDownOutline class="w-4 h-4" />
            {/if}
            {showJsonPreview ? "Hide" : "Show"} JSON
          </Button>

<div class="flex gap-3">
            <Button
              color="alternative"
              onclick={cancelComment}
              disabled={isSubmittingComment}
            >
              Cancel
            </Button>
            <Button
              color="primary"
              onclick={submitComment}
              disabled={isSubmittingComment || !commentContent.trim()}
            >
              {isSubmittingComment ? "Posting..." : "Post Comment"}
            </Button>
          </div>
        </div>
      </div>
    </Modal>
  {/if}
</div>