{#each markupButtons as button} {/each}

</div>
    <div class="prose dark:prose-invert max-w-none p-4 border rounded-lg">
      {@html preview}
    </div>
  </div>

{#if error}
    <Alert color="red" dismissable>
      {error}
      {#if showOtherRelays}
        <Button size="xs" class="mt-2" on:click={() => handleSubmit(true)}>Try Other Relays</Button>
      {/if}
      {#if showFallbackRelays}
        <Button size="xs" class="mt-2" on:click={() => handleSubmit(false, true)}>Try Fallback Relays</Button>
      {/if}
    </Alert>
  {/if}

{#if success}
    <Alert color="green" dismissable>
      Comment published successfully to {success.relay}!
      <a href="/events?id={nip19.neventEncode({ id: success.eventId })}" class="text-primary-600 dark:text-primary-500 hover:underline">
        View your comment
      </a>
    </Alert>
  {/if}

<div class="flex justify-end items-center gap-4">
    {#if userProfile}
      <div class="flex items-center gap-2 text-sm">
        {#if userProfile.picture}
          <img 
            src={userProfile.picture} 
            alt={userProfile.name || 'Profile'} 
            class="w-8 h-8 rounded-full"
            onerror={(e) => {
              const img = e.target as HTMLImageElement;
              img.src = `https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(img.alt)}`;
            }}
          />
        {/if}
        <span class="text-gray-700 dark:text-gray-300">
          {userProfile.displayName || userProfile.name || nip19.npubEncode(props.userPubkey).slice(0, 8) + '...'}
        </span>
      </div>
    {/if}
    <Button
      on:click={() => handleSubmit()}
      disabled={isSubmitting || !content.trim() || !props.userPubkey}
      class="w-full md:w-auto"
    >
      {#if !props.userPubkey}
        Not Signed In
      {:else if isSubmitting}
        Publishing...
      {:else}
        Post Comment
      {/if}
    </Button>
  </div>

{#if !props.userPubkey}
    <Alert color="yellow" class="mt-4">
      Please sign in to post comments. Your comments will be signed with your current account.
    </Alert>
  {/if}
</div>