{# Card picker popover — lists available regions from the catalog.
   Contract: ~/.claude/skills/ux-architect/components/workspace-card-picker.md (UX-038)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-card-picker* family.
   #948: catalog is server-rendered (Jinja for-loop over `catalog`) AND
   serialised to a `data-card-catalog` JSON blob the JS reads when the
   user picks an entry. No more `<template x-for="item in catalog">`
   binding to a reactive array — the catalog doesn't change at runtime,
   so making it reactive bought nothing and tied us to Alpine's bind
   timing for #866 ("No widgets available" flash on alpine:init failure). #}
{# #982: visibility is CSS-driven via `[data-show-picker="1"]` on the
   ancestor `.dz-workspace[x-data="dzDashboardBuilder()"]` (set by
   dzDashboardBuilder's $watch on showPicker). Click-outside handling
   is a document-level listener installed in dzDashboardBuilder.init()
   rather than Alpine's `@click.away` — both moves remove Alpine
   bindings from this morphable child element so idiomorph can't trip
   on them during workspace nav (fourth ADR-0022 instance after
   #970 / #972 / #978).

   #963: data-card-catalog stays single-quoted (tojson emits Markup
   which bypasses autoescape, so inner `"` chars terminate a double-
   quoted attribute mid-value). #}
<div data-card-catalog='{{ (catalog or []) | tojson }}' class="dz-card-picker">
  <h4 class="dz-card-picker-title">Add a card</h4>
  {% for item in (catalog or []) %}
  {# #949: single-quote the @click attribute so the JSON-encoded
     `tojson` value (which carries its own double quotes) doesn't
     terminate the attribute mid-expression. Jinja's `tojson` filter
     emits Markup that bypasses autoescape, so it can't be relied on
     to entity-encode the inner `"`. Single-quoting the attribute is
     the convention used elsewhere in the framework where Alpine
     expressions may contain double quotes (toasts, pdf-viewer
     panels, dz-table directives). #}
  <button @click='addCard({{ item.name | tojson }})'
          data-test-id="dz-card-picker-entry"
          data-test-region="{{ item.name }}"
          class="dz-card-picker-entry">
    <span class="dz-card-picker-display-tag">{{ (item.display or '') | lower }}</span>
    <span class="dz-card-picker-title-text">{{ item.title }}</span>
    <span class="dz-card-picker-entity">{{ item.entity }}</span>
  </button>
  {% endfor %}
  {% if not (catalog or []) %}
  <div class="dz-card-picker-empty">No widgets available.</div>
  {% endif %}
</div>