{% set schema = bolt.data.components["@bolt-components-action-blocks"].schema %}

{% if enable_json_schema_validation %}
  {{ validate_data_schema(schema, _self) | raw }}
{% endif %}

{# DEPRECATED: maxItemsPerRow has been renamed to max_items_per_row #}
{% if maxItemsPerRow %}
  {% set max_items_per_row = maxItemsPerRow %}
{% endif %}

{# DEPRECATED: align has been renamed to valign #}
{% if align == "top" %}
  {% set valign = "start" %}
{% elseif align == "bottom" %}
  {% set valign = "end" %}
{% elseif align == "center" %}
  {% set valign = align %}
{% endif %}

{# DEPRECATED: use borderless instead #}
{% if border is same as(true) %}
  {% set borderless = false %}
{% elseif border is same as(false) %}
  {% set borderless = true %}
{% endif %}

{# DEPRECATED: 'contentItems' has been renamed 'items'. #}
{% if contentItems %}
  {% set items = contentItems %}
{% endif %}

{# DEPRECATED.  `children` has been renamed to `content` #}
{% if children %}
  {% set content = children %}
{% endif %}

{# Variables #}
{% set this = init(schema) %}
{% set inner_attributes = create_attribute({}) %}

{# Array of classes based on the defined + default props #}
{% set classes = [
  "c-bolt-action-blocks",
  this.data.spacing.value ? "c-bolt-action-blocks--spacing-" ~ this.data.spacing.value : "",
  this.data.valign.value ? "c-bolt-action-blocks--valign-" ~ this.data.valign.value : "",
  this.data.max_items_per_row.value ? "c-bolt-action-blocks--item-max-" ~ this.data.max_items_per_row.value : "",
  this.data.borderless.value ? "c-bolt-action-blocks--borderless" : "",
] %}

{#
  Sort classes passed in via attributes into two groups:
  1. Those that should be applied to the inner tag (namely, "is-" and "has-" classes)
  2. Those that should be applied to the outer custom element (everything else EXCEPT c-bolt-* classes, which should never be passed in via attributes)
#}
{% set outer_classes = [] %}
{% set inner_classes = classes %}

{% for class in this.props['class'] %}
  {% if class starts with "is-" or class starts with "has-" %}
    {% set inner_classes = inner_classes|merge([class]) %}
  {% elseif class starts with "c-bolt-" == false %}
    {% set outer_classes = outer_classes|merge([class]) %}
  {% endif %}
{% endfor %}

<bolt-action-blocks
  {% if outer_classes %} class="{{ outer_classes|join(' ') }}" {% endif %}
  {{ this.props|without("items")|without("class") }}
>
  <ul {{ inner_attributes.addClass(inner_classes) }}>
    {% if content %}
      {{ content }}
    {% else %}
      {% for item in items %}
        <li class="c-bolt-action-blocks__item">
          {% include "@bolt-components-action-blocks/action-block.twig" with item only %}
        </li>
      {% endfor %}
    {% endif %}
  </ul>
</bolt-action-blocks>