<!-- 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="|||") %}

<!-- aligns columns depending on col number-->

{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
{% set column_classes = "flex-1 m-2 lg:m-4" %}

<!-- makes row full screen width and adds background img -->

<div class="{{classes}}">
    {% for column in columns%} 
        <!-- Hides empty columns if displayed vertically in small screen -->
        {% if column | as_str | length < 10 %} 
            <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
                {{column | split(pat="{% button() %}") | slice(end=1)}}
                {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
                    {% set body = button %}
                    {% include "shortcodes/button.html" %}               
                {% endfor %}
            </div>
        {% else %}
            <div class="{{column_classes}}">
                {{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
                <hr class="border-t-2 mt-2">
                <br/>
                {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
                    {% set body = button %}
                    {% include "shortcodes/button.html" %}               
                {% endfor %}
            </div>
        {% endif %}
    {% endfor %}
</div>