{# API #}
{%- set props = props | default([]) -%}
{%- set _cols = props.cols | default(null) -%}
{%- set _elementType = props.elementType | default('div') -%}
{%- set _spacing = props.spacing | default(null) -%}
{%- set _spacingX = props.spacingX | default(null) -%}
{%- set _spacingY = props.spacingY | default(null) -%}
{%- set _alignmentX = props.alignmentX | default('stretch') -%}
{%- set _alignmentY = props.alignmentY | default('stretch') -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Grid' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _colsClasses = [] -%}
{%- if _cols is iterable -%}
    {%- for breakpoint, breakpointValue in _cols -%}
        {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
        {%- set _colsClasses = _colsClasses | merge([ _spiritClassPrefix ~ 'Grid' ~ infix ~ '--cols-' ~ breakpointValue ]) -%}
    {%- endfor -%}
{%- elseif _cols is not null -%}
    {%- set _colsClasses = [_spiritClassPrefix ~ 'Grid--cols-' ~ _cols] -%}
{%- endif -%}

{%- set _alignmentXClasses = [] -%}
{%- if _alignmentX is iterable and _alignmentX is not null -%}
    {%- set hasMobile = false -%}
    {%- for breakpoint, breakpointValue in _alignmentX -%}
        {%- if breakpoint == 'mobile' -%}
            {%- set hasMobile = true -%}
        {%- endif -%}
    {%- endfor -%}
    {%- if not hasMobile -%}
        {%- set _alignmentX = { 'mobile': 'stretch' } | merge(_alignmentX) -%}
    {%- endif -%}
    {%- for breakpoint, breakpointValue in _alignmentX -%}
        {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
        {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%}
        {%- set _alignmentXClasses = _alignmentXClasses | merge([ _spiritClassPrefix ~ 'Grid' ~ infix ~ '--alignmentX' ~ breakpointValueCapitalized ]) -%}
    {%- endfor -%}
{%- elseif _alignmentX is not null -%}
    {%- set _alignmentXCapitalized = _alignmentX[:1] | upper ~ _alignmentX[1:] -%}
    {%- set _alignmentXClasses = [ _spiritClassPrefix ~ 'Grid--alignmentX' ~ _alignmentXCapitalized ] -%}
{%- endif -%}

{%- set _alignmentYClasses = [] -%}
{%- if _alignmentY is iterable and _alignmentY is not null -%}
    {%- set hasMobile = false -%}
    {%- for breakpoint, breakpointValue in _alignmentY -%}
        {%- if breakpoint == 'mobile' -%}
            {%- set hasMobile = true -%}
        {%- endif -%}
    {%- endfor -%}
    {%- if not hasMobile -%}
        {%- set _alignmentY = { 'mobile': 'stretch' } | merge(_alignmentY) -%}
    {%- endif -%}
    {%- for breakpoint, breakpointValue in _alignmentY -%}
        {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
        {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%}
        {%- set _alignmentYClasses = _alignmentYClasses | merge([ _spiritClassPrefix ~ 'Grid' ~ infix ~ '--alignmentY' ~ breakpointValueCapitalized ]) -%}
    {%- endfor -%}
{%- elseif _alignmentY is not null -%}
    {%- set _alignmentYCapitalized = _alignmentY[:1] | upper ~ _alignmentY[1:] -%}
    {%- set _alignmentYClasses = [ _spiritClassPrefix ~ 'Grid--alignmentY' ~ _alignmentYCapitalized ] -%}
{%- endif -%}


{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_colsClasses, _alignmentXClasses, _alignmentYClasses) -%}
{%- set _style = '' -%}

{%- if _spacing is iterable -%}
    {%- for breakpoint, breakpointValue in _spacing -%}
        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
        {%- set _style =
            _style ~
                '--grid-spacing-x' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');
                --grid-spacing-y' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');'
        -%}
    {%- endfor -%}
{%- elseif _spacing -%}
    {%- set _style =
        _style ~
            '--grid-spacing-x: var(--spirit-' ~ _spacing ~ ');
            --grid-spacing-y: var(--spirit-' ~ _spacing ~ ');'
    -%}
{%- endif -%}

{%- if _spacingX is iterable -%}
    {%- for breakpoint, breakpointValue in _spacingX -%}
        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
        {%- set _style = _style ~ '--grid-spacing-x' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');' -%}
    {%- endfor -%}
{%- elseif _spacingX -%}
    {%- set _style = _style ~ '--grid-spacing-x: var(--spirit-' ~ _spacingX ~ ');' -%}
{%- endif -%}

{%- if _spacingY is iterable -%}
    {%- for breakpoint, breakpointValue in _spacingY -%}
        {%- set suffix = (breakpoint == 'mobile') ? '' : '-' ~ breakpoint -%}
        {%- set _style = _style ~ '--grid-spacing-y' ~ suffix ~ ': var(--spirit-' ~ breakpointValue ~ ');' -%}
    {%- endfor -%}
{%- elseif _spacingY -%}
    {%- set _style = _style ~ '--grid-spacing-y: var(--spirit-' ~ _spacingY ~ ');' -%}
{%- endif -%}

{# Attributes #}
{%- set _styleAttr = _style or (_styleProps.style is not same as(null)) ? 'style="' ~ _style ~ _styleProps.style | join() ~ '"' -%}

<{{ _elementType }}
    {{ mainProps(props) }}
    {{ classProp(_classNames) }}
    {{ _styleAttr | raw }}
>
    {%- block content %}{% endblock -%}
</{{ _elementType }}>
