{# Action grid region — v0.61.54 (#891).

   CTA cards on dashboards. One card per `actions:` entry; each carries
   a label, optional icon, optional count badge (resolved per-card via
   `_fetch_count_metric` at request time), and a click target.

   Tone tokens map to design palette:
     - positive  → success surface
     - warning   → warning surface
     - destructive → destructive surface
     - accent    → primary tint
     - neutral   → muted (default)

   Card safety: region emits zero chrome + zero title. The dashboard
   slot owns both via region_card.

   v0.62 CSS refactor: inline Tailwind → semantic .dz-action-* classes
   (components/regions.css). Per-card tone tints + count-badge tints
   still routed through dz-tones.css keyed off data-dz-tone /
   data-dz-tone-badge (unchanged from #906 fix). Hover affordance now
   gated on the wrapper element (a.dz-action-card vs div.dz-action-card)
   via CSS rather than duplicated inline. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
<div class="dz-action-grid-region">
  {% if action_card_data and action_card_data | length > 0 %}
    <div class="dz-action-grid">
      {% for card in action_card_data %}
        {% set _tone = card.tone | default('neutral') or 'neutral' %}
        {# Explicit if/else for the wrapper element so the tag name is
           never an interpolated value. Body is duplicated inside each
           branch — small price for an unambiguous template. #}
        {% if card.url %}
        <a href="{{ card.url }}" class="dz-action-card" data-dz-tone="{{ _tone }}">
          <div class="dz-action-card-row">
            {% if card.icon %}
              <span class="dz-action-card-icon" data-lucide="{{ card.icon }}" aria-hidden="true"></span>
            {% else %}
              <span class="dz-action-card-icon-spacer"></span>
            {% endif %}
            {% if card.count is not none %}
              <span class="dz-action-card-count" data-dz-tone-badge="{{ _tone }}">{{ card.count }}</span>
            {% endif %}
          </div>
          <span class="dz-action-card-label">{{ card.label }}</span>
        </a>
        {% else %}
        <div class="dz-action-card" data-dz-tone="{{ _tone }}">
          <div class="dz-action-card-row">
            {% if card.icon %}
              <span class="dz-action-card-icon" data-lucide="{{ card.icon }}" aria-hidden="true"></span>
            {% else %}
              <span class="dz-action-card-icon-spacer"></span>
            {% endif %}
            {% if card.count is not none %}
              <span class="dz-action-card-count" data-dz-tone-badge="{{ _tone }}">{{ card.count }}</span>
            {% endif %}
          </div>
          <span class="dz-action-card-label">{{ card.label }}</span>
        </div>
        {% endif %}
      {% endfor %}
    </div>
  {% else %}
    <p class="dz-empty-dense" role="status">{{ empty_message | default("No actions available.") }}</p>
  {% endif %}
</div>
{% endcall %}