Add Comment

{#if $userStore.profile}

{#if $userStore.profile.picture}

{/if} {$userStore.profile.displayName || $userStore.profile.name || "Anonymous"}

{/if}

{#if error}
        <P class="error-message text-red-600 dark:text-red-400 text-sm mt-2">{error}</P>
      {/if}

{#if success}
        <P class="success-message text-green-600 dark:text-green-400 text-sm mt-2">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 mt-3">
          <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="comment-actions-wrapper">
        <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="comment-actions">
          <Button
            size="sm"
            color="alternative"
            onclick={cancelComment}
            disabled={isSubmitting}
          >
            Cancel
          </Button>
          <Button
            size="sm"
            onclick={submitComment}
            disabled={isSubmitting || !commentContent.trim()}
          >
            {isSubmitting ? "Posting..." : "Post Comment"}
          </Button>
        </div>
      </div>
    </div>
  {/if}
</div>

.comment-button-container.inline {
    position: relative;
    height: auto;
    pointer-events: auto;
  }

.single-line-button {
    position: absolute;
    top: 4px;
    right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    padding: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
    pointer-events: auto;
  }

.comment-button-container.inline .single-line-button {
    position: relative;
    top: 0;
    right: 0;
    opacity: 1;
  }

.single-line-button:hover .line {
    border-width: 3px;
  }

.line {
    display: block;
    width: 100%;
    height: 0;
    border: none;
    border-top: 2px dashed #6b7280;
    transition: all 0.2s ease-in-out;
  }

.comment-ui {
    position: absolute;
    top: 35px;
    right: 8px;
    min-width: 400px;
    max-width: 600px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 20;
    pointer-events: auto;
  }

:global(.dark) .comment-ui {
    background: #1f2937;
    border-color: #374151;
  }

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

.comment-header h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #111827;
  }

:global(.dark) .comment-header h4 {
    color: #f9fafb;
  }

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }

.user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
  }

.user-name {
    font-size: 14px;
    color: #6b7280;
  }

:global(.dark) .user-name {
    color: #9ca3af;
  }

.comment-actions-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }

.comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

/* Make the comment UI responsive */
  @media (max-width: 640px) {
    .comment-ui {
      min-width: 280px;
      max-width: calc(100vw - 32px);
      right: -8px;
    }
  }
</style>