{#
  Empty State Component

  Params:
    icon:         string (required) — Font Awesome class e.g. 'fa-inbox'
    title:        string (required)
    description:  string (optional)
    action_label: string (optional) — CTA button text
    action_url:   string (optional) — CTA button link
    action_icon:  string (optional) — CTA button icon
    class:        string (optional)
#}
<div class="m-empty-state{{ class is defined and class ? ' ' ~ class : '' }}">
    <div class="m-empty-state__icon">
        <i class="fas {{ icon }}" aria-hidden="true"></i>
    </div>

    <h3 class="m-empty-state__title">{{ title }}</h3>

    {% if description is defined and description %}
        <p class="m-empty-state__description">{{ description }}</p>
    {% endif %}

    {% if action_url is defined and action_url %}
        <a href="{{ action_url }}" class="btn btn--primary">
            {% if action_icon is defined and action_icon %}
                <i class="fas {{ action_icon }}" aria-hidden="true"></i>
            {% endif %}
            {{ action_label|default('Action') }}
        </a>
    {% endif %}
</div>