{#if hasPublicationHeader}

Publication Format Detected

You're using a publication format (document title with = or "index card"). This editor is for individual notes only. Use the Events form to create structured publications.

{ // Store the content in sessionStorage so it can be loaded in the Events form sessionStorage.setItem('zettelEditorContent', content); sessionStorage.setItem('zettelEditorSource', 'publication-format'); }} class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-800 border border-red-200 dark:border-red-700 rounded-md hover:bg-red-200 dark:hover:bg-red-700 transition-colors" > Switch to Publication Editor

{:else}

Note-Taking Tool

This editor is for creating individual notes (30041 events) only. Each section becomes a separate note event. You can add metadata like author, version, publication date, summary, and tags using AsciiDoc attributes. To create structured publications with a 30040 index event that ties multiple notes together, use the Events form.

Create Publication

{/if}

</div>
    </div>

{#if showPreview && !hasPublicationHeader}
      <div class="w-1/2 border-l border-gray-200 dark:border-gray-700 pl-4">
        <div class="sticky top-4">
          <h3
            class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100"
          >
            AsciiDoc Preview
          </h3>

<div
            class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 max-h-80 overflow-y-auto"
          >
            {#if !content.trim()}
              <div class="text-gray-500 dark:text-gray-400 text-sm">
                Start typing to see the preview...
              </div>
            {:else}
              <div class="prose prose-sm dark:prose-invert max-w-none">
                {#each parsedSections as section, index}
                  <div class="mb-6">
                    <div
                      class="text-sm text-gray-800 dark:text-gray-200 asciidoc-content"
                    >
                      {@html asciidoctor().convert(
                        `== ${section.title}\n\n${section.content}`,
                        {
                          standalone: false,
                          doctype: "article",
                          attributes: {
                            showtitle: true,
                            sectids: true,
                          },
                        },
                      )}
                    </div>

<div class="my-4 relative">
                      
                      <div
                        class="bg-gray-200 dark:bg-gray-700 rounded-lg p-3 mb-2"
                      >
                        <div class="flex flex-wrap gap-2 items-center">
                          {#if section.tags && section.tags.length > 0}
                            {#each section.tags as tag}
                              <div
                                class="bg-amber-900 text-amber-100 px-2 py-1 rounded-full text-xs font-medium flex items-baseline"
                              >
                                <span class="font-mono">{tag[0]}:</span>
                                <span>{tag[1]}</span>
                              </div>
                            {/each}
                          {:else}
                            <span
                              class="text-gray-500 dark:text-gray-400 text-xs italic"
                              >No tags</span
                            >
                          {/if}
                        </div>
                      </div>

{#if index < parsedSections.length - 1}
                        
                        <div
                          class="border-t-2 border-dashed border-blue-400 relative"
                        >
                          <div
                            class="absolute -top-2 left-1/2 transform -translate-x-1/2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded text-xs font-medium"
                          >
                            Event Boundary
                          </div>
                        </div>
                      {/if}
                    </div>
                  </div>
                {/each}
              </div>

<div
                class="mt-4 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900 p-2 rounded border"
              >
                <strong>Event Count:</strong>
                {parsedSections.length} event{parsedSections.length !== 1
                  ? "s"
                  : ""}
                <br />
              </div>
            {/if}
          </div>
        </div>
      </div>
    {/if}
  </div>
</div>