<div style="width: 100%;">
  <div class="empty">
  <span class="ic-circle">
    <iconify-icon icon="
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
  <path d="M3 7l9-4 9 4-9 4-9-4z"/>
  <path d="M3 12l9 4 9-4"/>
  <path d="M3 17l9 4 9-4"/>
</svg>
" width="22" height="22"></iconify-icon>
  </span>
  <h4 class="title">Sin movimientos</h4><p class="sub">Cuando registres entradas o salidas de stock aparecerán aquí.</p>
</div>
</div>

{% from "empty.jinja" import empty %}
<div style="width: 100%;">
  {{ empty("Sin movimientos", desc="Cuando registres entradas o salidas de stock aparecerán aquí.", icon=inv_icon) }}
</div>

<div style="width: 100%;">
  <Empty label="Sin movimientos" desc="Cuando registres entradas o salidas de stock aparecerán aquí." icon="inv_icon" />
</div>

<div style="width: 100%;">
  <div class="empty">
  <span class="ic-circle">
    <iconify-icon icon="
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
  <path d="M3 7l9-4 9 4-9 4-9-4z"/>
  <path d="M3 12l9 4 9-4"/>
  <path d="M3 17l9 4 9-4"/>
</svg>
" width="22" height="22"></iconify-icon>
  </span>
  <h4 class="title">Sin movimientos de inventario</h4><p class="sub">Cuando registres entradas o salidas de stock aparecerán aquí. Puedes empezar importando un CSV o creando un movimiento manual.</p>
  <div class="actions">
<button
  type="button"
  class="btn secondary"
  >Importar CSV</button>
<button
  type="button"
  class="btn primary"
  >Nuevo movimiento</button>
</div>
</div>
</div>

{% from "button.jinja" import button %}
{% from "empty.jinja" import empty %}
{% set actions %}
{{ button("Importar CSV", variant="secondary") }}
{{ button("Nuevo movimiento", variant="primary") }}
{% endset %}
<div style="width: 100%;">
  {{ empty(
    "Sin movimientos de inventario",
    desc="Cuando registres entradas o salidas de stock aparecerán aquí. Puedes empezar importando un CSV o creando un movimiento manual.",
    icon=inv_icon,
    actions=actions
  ) }}
</div>

{% set actions %}
<Button label="Importar CSV" variant="secondary" />
<Button label="Nuevo movimiento" variant="primary" />
{% endset %}
<div style="width: 100%;">
  <Empty label="Sin movimientos de inventario" desc="Cuando registres entradas o salidas de stock aparecerán aquí. Puedes empezar importando un CSV o creando un movimiento manual." icon="inv_icon" actions="actions" />
</div>

<div style="width: 100%;">
  <div class="empty compact">
  <span class="ic-circle">
    <iconify-icon icon="
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
" width="22" height="22"></iconify-icon>
  </span>
  <h4 class="title">Todo al día</h4><p class="sub">No tienes alertas activas.</p>
</div>
</div>

{% from "empty.jinja" import empty %}
<div style="width: 100%;">
  {{ empty("Todo al día", desc="No tienes alertas activas.", icon=bell_icon, compact=True) }}
</div>

<div style="width: 100%;">
  <Empty label="Todo al día" desc="No tienes alertas activas." icon="bell_icon" compact />
</div>

<div style="width: 100%;">
  <div class="empty compact">
  <span class="ic-circle">
    <iconify-icon icon="
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
" width="22" height="22"></iconify-icon>
  </span>
  <h4 class="title">Sin resultados para «xyz»</h4><p class="sub">Prueba con otro término o revisa los filtros.</p>
  <div class="actions"><button
  type="button"
  class="btn ghost sm"
  >Limpiar filtros</button></div>
</div>
</div>

{% from "empty.jinja" import empty %}
{% set clear_action = button("Limpiar filtros", variant="ghost", size="sm") %}
<div style="width: 100%;">
  {{ empty(
    "Sin resultados para «xyz»",
    desc="Prueba con otro término o revisa los filtros.",
    icon=search_icon,
    actions=clear_action,
    compact=True
  ) }}
</div>

{% set clear_action = button("Limpiar filtros", variant="ghost", size="sm") %}
<div style="width: 100%;">
  <Empty label="Sin resultados para «xyz»" desc="Prueba con otro término o revisa los filtros." icon="search_icon" actions="clear_action" compact />
</div>