{# Macro empty_state
   Uso:
     {% from "core/components/empty_state.html" import empty_state %}
     {{ empty_state(
         icon_name="package",
         title="Sin apps todavía",
         description="Crea un proyecto o ejecuta dg up.",
         cta_label="Crear proyecto",
         cta_href="/projects/new",
         cta_icon="plus"
     ) }}

   tone      → tono del tile del icono (neutral por defecto).
   compact   → menos aire vertical, para estados vacíos dentro de una tarjeta.
   cta_attrs → atributos extra (sin escapar) del CTA. Sin cta_href y con ellos, el CTA es
               un <button type="button">, para acciones que abren un modal:
                 cta_label="Añadir usuario", cta_icon="user-plus",
                 cta_attrs='onclick="openModal(\'add-member-modal\')"'
#}
{% from "core/components/icon.html" import icon as _icon, icon_tile as _icon_tile %}

{% macro empty_state(title, description="", icon_name="package", cta_label="", cta_href="", tone="neutral", compact=false, cta_icon=none, cta_attrs="") %}
<div class="dg-empty{% if compact %} dg-empty-compact{% endif %}">
  {{ _icon_tile(icon_name, tone=tone, size="lg") }}
  <p class="dg-empty-title">{{ title }}</p>
  {%- if description %}
  <p class="dg-empty-desc">{{ description }}</p>
  {%- endif %}
  {%- if cta_label and cta_href %}
  <a href="{{ cta_href }}" class="btn-primary dg-empty-cta"{% if cta_attrs %} {{ cta_attrs | safe }}{% endif %}>{% if cta_icon %}{{ _icon(cta_icon) }}{% endif %}{{ cta_label }}</a>
  {%- elif cta_label and cta_attrs %}
  <button type="button" class="btn-primary dg-empty-cta"{% if cta_attrs %} {{ cta_attrs | safe }}{% endif %}>{% if cta_icon %}{{ _icon(cta_icon) }}{% endif %}{{ cta_label }}</button>
  {%- endif %}
</div>
{%- endmacro %}