<!-- 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 row_class =  "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 xl:flex xl:flex-row md:py-12 lg:py-16"%}

<!-- aligns columns depending on col number-->
{% if 2 < columns | length %}
    {% set row_class = row_class ~ " lg:items-start" %}
{% else %} 
    {% set row_class = row_class ~ " lg:items-center" %}
{% endif %}

{% set col_class = "flex-1 mb-8 md:mb-0 md:mx-8" %}

{% if style %}

    {% if "center" in style %}
        {% set row_class = row_class ~ " text-center mx-auto justify-center" %}
        {% set col_class = col_class ~ " flex-1 m-4 lg:m-0" %}
    {% endif %}

    <!-- makes row full screen width, strips margins -->
    {% if "lean" in style %}
        {% set row_class = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20" %}
        {% set col_class = "flex-1 m-4 lg:m-0" %}
    {% endif %}

        <!-- makes row full screen width, strips margins -->
    {% if "narrow" in style %}
        {% set row_class = row_class ~ " lg:max-w-3xl" %}
    {% elif "moderate" in style %}
        {% set row_class = row_class ~ " lg:m-20" %}
    {% endif %}

{% endif %}

<!-- makes row full screen width and adds background img -->
{% set styles = ""  %}
{% if bgPath %}
    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover"  %}
    {% set row_class = row_class ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
{% endif %}
{% if bgColor %}
    {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
    {% set row_class = row_class ~ "w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 lg:py-40 p-8 sm:p-12 md:p-16 lg:p-20" %}
{% endif %}



<div class="{{row_class}}" style="{{styles}}">
    {% 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 | safe }}
            </div>

        {% else %}
            <div class="{{col_class}}">
                <!-- handles mermaid markdown content display -->
                {% if "{% mermaid() %}" in column %}
                    {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
                    {% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
                    <div class="mermaid">
                        {{mermaid_content | safe }}
                    </div> 
                {% else %}
                    {{ column | safe }}
                {% endif %}
            </div>
        {% endif %}
    {% endfor %}
</div>