{{- $loading   := i18n "pkg_list_loading"    | default "Loading packages..." -}}
{{- $error     := i18n "pkg_list_error"      | default "Could not load packages." -}}
{{- $filter    := i18n "pkg_list_filter"     | default "Filter packages..." -}}
{{- $view      := i18n "pkg_list_link_label" | default "View" -}}
{{- $noResults := i18n "pkg_list_no_results" | default "No packages match your filter." -}}
{{- $colPkg    := i18n "pkg_list_col_package" | default "Package" -}}
{{- $colVer    := i18n "pkg_list_col_version" | default "Version" -}}
{{- $colLink   := i18n "pkg_list_col_link"    | default "Link" -}}

<div
  x-data="pkgList({ loading: {{ $loading | jsonify }}, error: {{ $error | jsonify }}, filter: {{ $filter | jsonify }}, view: {{ $view | jsonify }}, noResults: {{ $noResults | jsonify }}, colPkg: {{ $colPkg | jsonify }}, colVer: {{ $colVer | jsonify }}, colLink: {{ $colLink | 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" target="_blank" rel="noopener" class="ml-2 text-accent underline">packages.danix.xyz</a>
  </div>

  <div x-show="state === 'loaded'">
    <div class="mb-3">
      <input
        type="text"
        x-model="filter"
        :placeholder="i18n.filter"
        class="w-full sm:w-72 px-3 py-2 text-sm bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors"
        :aria-label="i18n.filter"
      />
    </div>
    <div class="overflow-x-auto rounded-lg border border-border/50">
      <table class="w-full text-sm text-left">
        <thead class="bg-surface text-text-dim uppercase text-xs tracking-wide">
          <tr>
            <th class="px-4 py-3" x-text="i18n.colPkg"></th>
            <th class="px-4 py-3" x-text="i18n.colVer"></th>
            <th class="px-4 py-3 text-right" x-text="i18n.colLink"></th>
          </tr>
        </thead>
        <tbody class="divide-y divide-border/30">
          <template x-for="pkg in filtered" :key="pkg.label">
            <tr class="hover:bg-surface/50 transition-colors">
              <td class="px-4 py-2 font-mono font-medium text-text" x-text="pkg.name"></td>
              <td class="px-4 py-2 font-mono text-text-dim" x-text="pkg.version"></td>
              <td class="px-4 py-2 text-right">
                <a
                  :href="pkg.url"
                  target="_blank"
                  rel="noopener"
                  class="inline-flex items-center gap-1 text-accent hover:underline text-xs"
                  :aria-label="i18n.view + ' ' + pkg.name"
                >
                  <span x-text="pkg.label"></span>
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                </a>
              </td>
            </tr>
          </template>
          <tr x-show="filtered.length === 0">
            <td colspan="3" class="px-4 py-4 text-center text-text-dim text-sm" x-text="i18n.noResults"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <p class="mt-2 text-xs text-text-dim" x-text="filtered.length + ' / ' + packages.length + ' packages'"></p>
  </div>
</div>