{{- $count   := .Get "count" | default "10" -}}
{{- $loading := i18n "pkg_changelog_loading" | default "Loading changelog..." -}}
{{- $error   := i18n "pkg_changelog_error"   | default "Could not load changelog." -}}

<div
  x-data="pkgChangelog({{ $count }}, { loading: {{ $loading | jsonify }}, error: {{ $error | jsonify }} })"
  x-init="init()"
  class="not-prose my-6"
>
  <div x-show="state === 'loading'" class="flex items-center gap-2 text-text-dim py-4">
    <svg class="animate-spin w-4 h-4 text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
    </svg>
    <span x-text="i18n.loading"></span>
  </div>

  <div x-show="state === 'error'" class="px-4 py-3 rounded-lg bg-surface border border-border text-sm text-text">
    <span x-text="i18n.error"></span>
    <a href="https://packages.danix.xyz/ChangeLog.txt" target="_blank" rel="noopener" class="ml-2 text-accent underline">ChangeLog.txt</a>
  </div>

  <div x-show="state === 'loaded'" class="relative">
    <div class="absolute left-3 top-0 bottom-0 w-px bg-border/40" aria-hidden="true"></div>

    <ul class="space-y-6 pl-10" role="list">
      <template x-for="(entry, idx) in entries" :key="idx">
        <li class="relative">
          <span
            class="absolute -left-7 top-1 w-3 h-3 rounded-full bg-accent ring-2 ring-bg"
            aria-hidden="true"
          ></span>
          <time
            class="block text-xs font-semibold text-accent mb-1"
            x-text="entry.timestamp"
          ></time>
          <pre
            class="text-xs text-text-dim font-mono whitespace-pre-wrap break-words bg-surface/50 rounded px-3 py-2 border border-border/30"
            x-text="entry.changes"
          ></pre>
        </li>
      </template>
    </ul>
  </div>
</div>