{% if variant is not defined %}
    {% set variant = 'default' %}
{% endif %}

<div class="contained-list contained-list--on-page">
  {% if title is defined %}
  <div class="contained-list__header">
    <div id="contained-list-header" class="contained-list__label">{{ title|trans }}</div>
    <div class="contained-list__action layout-constraint--size__min-sm layout-constraint--size__max-xl"></div>
  </div>
  {% endif %}
  <ul role="list" aria-labelledby="contained-list-header">
    {% for item in items %}

{# === DEFAULT VARIANT === #}
{% if variant == 'default' %}
    <li class="contained-list-item">
      <div class="contained-list-item__content">
        <div class="d-flex ai-center">
          <div>{{ item.label|trans }}</div>
          <i class="{{ item.icon }} ml-sm" aria-hidden="true"></i>
        </div>
      </div>
    </li>

{# === ACTIONS VARIANT === #}
{% elseif variant == 'actions' %}
    <li class="contained-list-item contained-list-item--with-action">
      <div class="contained-list-item__content">
        <div class="d-flex ai-center">
          <div>{{ item.label|trans }}</div>
          <i class="{{ item.icon }} ml-sm" aria-hidden="true"></i>
        </div>
      </div>
      <div class="contained-list-item__action layout-constraint--size__min-sm layout-constraint--size__max-lg">
        {% include '@MauticCore/Helper/button.html.twig' with {
            'buttons': [item.button|merge({
                'icon_only': true,
                'variant': 'ghost'
            })]
        } %}
      </div>
    </li>

{# === INTERACTIVE VARIANT === #}
{% elseif variant == 'interactive' %}
    <li class="contained-list-item contained-list-item--clickable">
      {% if item.link %}
      <a class="contained-list-item__content" href="{{ item.link }}">
        <div class="d-flex jc-space-between ai-center">
            <div>{{ item.label|trans }}</div>
            <i class="{{ item.icon }} ri-lg text-interactive ml-md" aria-hidden="true"></i>
        </div>
      </a>
      {% else %}
      <button class="contained-list-item__content" type="button" {% if item.disabled %}disabled{% endif %}>
        <div>{{ item.label }}</div>
      </button>
      {% endif %}
    </li>

{# === INTERACTIVE-ACTIONS VARIANT === #}
{% elseif variant == 'interactive-actions' %}
    <li class="contained-list-item contained-list-item--clickable contained-list-item--with-action">
      {% if item.link %}
      <a class="contained-list-item__content" href="{{ item.link }}">
        <div class="d-flex ai-center">
          <div>{{ item.label|trans }}</div>
          <i class="{{ item.icon }} ml-sm" aria-hidden="true"></i>
        </div>
      </a>
      {% endif %}
      <div class="contained-list-item__action layout-constraint--size__min-sm layout-constraint--size__max-lg">
        {% include '@MauticCore/Helper/button.html.twig' with {
            'buttons': [item.button|merge({
                'icon_only': true,
                'variant': 'ghost'
            })]
        } %}
      </div>
    </li>

{% endif %}
    {% endfor %}
  </ul>
</div> 