{#
  Unified empty-state component (Phase 10.2).

  One consistent "no content" design across CampusCart. Presentation only — it
  renders whatever icon / copy / CTAs the page passes; it holds no logic.

  Params:
    icon            - Bootstrap icon class (e.g. 'bi-bookmark-heart'). Optional
                      when an illustration slot is provided via {% call %}.
    title           - short heading (required).
    description     - one or two lines of body copy (optional).
    cta_label/url   - primary call to action (optional). cta_icon optional.
    secondary_label/url - optional secondary action (outline button).
    reset_label/url - optional "reset filters" action (compact outline button).
    compact         - true for in-card / table-cell empties (no card chrome,
                      smaller icon, non-heading title so it's valid inside a <td>).

  Illustration slot (overrides the icon):
    {% call empty_state('', 'Title', 'Description') %}<img …>{% endcall %}

  Usage:
    {% from "components/empty_state.html" import empty_state %}
    {{ empty_state('bi-bookmark-heart', "You haven't saved anything yet.",
         'Save listings you like to find them again later.',
         cta_label='Browse Marketplace', cta_url=url_for('main.marketplace'),
         cta_icon='bi-shop') }}
#}

{% macro empty_state(icon, title, description=None,
                     cta_label=None, cta_url=None, cta_icon=None,
                     secondary_label=None, secondary_url=None,
                     reset_label=None, reset_url=None,
                     compact=false) %}
  <div class="empty-state-card {{ 'empty-state-card--compact' if compact }}">
    <div class="empty-state-figure" aria-hidden="true">
      {% if caller %}{{ caller() }}
      {% elif icon %}<span class="empty-state-ico"><i class="bi {{ icon }}"></i></span>{% endif %}
    </div>
    {% if compact %}
      <p class="empty-state-title">{{ title }}</p>
    {% else %}
      <h2 class="empty-state-title">{{ title }}</h2>
    {% endif %}
    {% if description %}<p class="empty-state-desc">{{ description }}</p>{% endif %}
    {% if (cta_label and cta_url) or (secondary_label and secondary_url) or (reset_label and reset_url) %}
      <div class="empty-state-actions">
        {% if cta_label and cta_url %}
          <a class="btn btn-primary empty-state-cta" href="{{ cta_url }}">{% if cta_icon %}<i class="bi {{ cta_icon }} me-1" aria-hidden="true"></i> {% endif %}{{ cta_label }}</a>
        {% endif %}
        {% if secondary_label and secondary_url %}
          <a class="btn btn-outline-secondary empty-state-cta" href="{{ secondary_url }}">{{ secondary_label }}</a>
        {% endif %}
        {% if reset_label and reset_url %}
          <a class="btn btn-outline-secondary btn-sm empty-state-cta" href="{{ reset_url }}"><i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i> {{ reset_label }}</a>
        {% endif %}
      </div>
    {% endif %}
  </div>
{% endmacro %}