<!-- row shortcode 
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.

Parameters: 
- style: 
    - lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->


{% set columns = body | safe | markdown | split(pat="|||") %}
{% set classes =  "relative pt-12 flex flex-col md:flex-row lg:flex-row p-8 sm:p-12 md:p-16 lg:p-20 lg:py-16"%}

{% if 2 < columns | length %}
    {% set classes = classes ~ " lg:items-start" %}
{% else %} 
    {% set classes = classes ~ " lg:items-center" %}
{% endif %}

{% set column_classes = "flex-1 lg:mx-8" %}

{% if style %}

{% if "lean" in style %}
    {% set classes = "relative flex flex-col lg:flex-row items-baseline w-full" %}
    {% set column_classes = "flex-1" %}
{% endif %}

{% if "center" in style %}
    {% set classes = classes ~ " text-center" %}
{% endif %}

{% endif %}

{% set styles = ""  %}

{% if bgPath %}
    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover"  %}
    {% set classes = classes ~ " lg:py-40"  %}
{% endif %}

<div class="{{classes}}" style="{{styles}}">
{% for column in columns%} 
<div class="{{column_classes}}">
    {{ column | safe }}
</div>
{% endfor %}
</div>