<!-- 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 md:flex md:flex-row md:py-4 lg:py-8"%}

<!-- 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-20 lg:mb-0 " %}

{% if style %}

    {% if "center" in style %}
        {% set row_class = row_class ~ " text-center items-center mx-auto justify-center " %}
        {% set col_class = col_class ~ " flex-1 " %}
    {% endif %}

    <!-- makes row full screen width, strips margins -->
    {% if "lean" in style %}
        {% if "lean-left" in style %}
            {% set col_class = col_class ~ " last:px-20 lg:max-w-[50%] " %}
            {% set row_class = row_class ~ " sm:gap-0 " %}
        {% elif "lean-right" in style %}
            {% set col_class = col_class ~ " first:px-20 lg:max-w-[50%] " %}
            {% set row_class = row_class ~ " sm:gap-0 " %}
        {% else %}
            {% set row_class = row_class ~ " md:py-0 " %}
            {% set col_class = col_class ~ " lg:m-0" %}
        {% endif %}    
    {% else %}
        {% set row_class = row_class ~ " mx-8" %}
        {% set col_class = col_class ~ " lg:mx-8 " %}
    {% endif %}

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

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

    {% if "invert-color" in style %}

                {% set row_class = row_class ~ " text-white lg:text-white " %}

    {% endif %}

    {% else %}
        {% set row_class = row_class ~ " mx-12 " %}
{% endif %}

{% set anchor_link = ""%}
{% if anchor %}
    {% set anchor_link = anchor %}
{% endif %}


<!-- makes row full screen width and adds background img -->
{% set styles = ""  %}
{% set div_class = " " %}
{% if bgPath %}
    {% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover; background-position: center;"  %}
    {% if "#desktop" in bgPath %}
        {% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %}
        {% set row_class = row_class | replace(from='text-white', to='text-black') %}
        {% if "invert-color" in style %}
            {% if "#desktop" in bgPath %}
                {% set row_class = row_class ~ " lg:text-white " %}
            {% endif %}
        {% endif %}
    {% endif %}
{% endif %}
{% if bgStyle %}
    {% if "full" in bgStyle %}
        {% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;"  %}
    {% endif %}
{% endif %}
{% if bgColor %}
    {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
    {% set row_class = row_class ~ " py-0 " %}
{% endif %}


<div id="{{anchor_link}}" class="{{'w-screen justify-center flex ' ~ div_class}}" style="{{styles}}">
    <div class="{{row_class}}" style="width: -webkit-fill-available"> 
        {% 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>
</div>