{#
Sample markup data:
{
"tx-xx-title": {
"text": "Pros and cons title"
},
"tx-xx-1": {
"text": "Pros"
},
"tx-xx-1-desc": {
"text": "Lorem ipsum dolor sit amet, consectetur 1-desc"
},
"ic-xx-1": {
"icon": {
"file": "harvest-farmer-technology-2--nature-farming--24x24",
"name": "technology-2",
"list": "24px"
}
},
"tx-xx-2": {
"text": "Cons"
},
"tx-xx-2-desc": {
"text": "Lorem ipsum dolor sit amet, consectetur 2-desc"
},
"ic-xx-2": {
"icon": {
"file": "file-copyright-tm--files-folders--24x24",
"name": "technology-2",
"list": "24px"
}
},
"tx-xx-1-1": {
"text": "Lorem ipsum 1-1"
},
"tx-xx-1-1-desc": {
"text": "Lorem ipsum 1-1 desc"
},
"tx-xx-1-1-percentage": {
"text": "80.3%"
},
"ic-xx-1-1": {
"icon": {
"file": "official-building-3--landmarks--24x24",
"list": "24px"
}
},
"tx-xx-1-2": {
"text": "Lorem ipsum 1-2"
},
"tx-xx-1-2-desc": {
"text": "Lorem ipsum 1-2 desc"
},
"tx-xx-1-2-percentage": {
"text": "60.3%"
},
"ic-xx-1-2": {
"icon": {
"file": "harvest-farmer-technology-2--nature-farming--24x24",
"name": "technology-2",
"list": "24px"
}
},
"tx-xx-1-3": {
"text": "Lorem ipsum 1-3"
},
"tx-xx-1-3-desc": {
"text": "Lorem ipsum 1-3 desc"
},
"tx-xx-1-3-percentage": {
"text": "20.3%"
},
"ic-xx-1-3": {
"icon": {
"file": "school-teacher-music--school-learning--24x24",
"list": "24px"
}
},
"tx-xx-1-4": {
"text": "Lorem ipsum 1-4"
},
"tx-xx-1-4-desc": {
"text": "Lorem ipsum 1-4 desc"
},
"tx-xx-1-4-percentage": {
"text": "60%"
},
"ic-xx-1-4": {
"icon": {
"file": "history-sphinx-1--culture-religion--24x24",
"list": "24px"
}
},
"tx-xx-1-5": {
"text": "Lorem ipsum 1-5"
},
"tx-xx-1-5-desc": {
"text": "Lorem ipsum 1-5 desc"
},
"tx-xx-1-5-percentage": {
"text": "92%"
},
"ic-xx-1-5": {
"icon": {
"file": "user-friends-1--users--24x24",
"list": "24px"
}
},
"tx-xx-1-6": {
"text": "Lorem ipsum 1-6"
},
"tx-xx-1-6-desc": {
"text": "Lorem ipsum 1-6 desc"
},
"tx-xx-1-6-percentage": {
"text": "1%"
},
"ic-xx-1-6": {
"icon": {
"file": "file-copyright-tm--files-folders--24x24",
"list": "24px"
}
},
"tx-xx-2-1": {
"text": "Lorem ipsum 2-1"
},
"tx-xx-2-1-desc": {
"text": "Lorem ipsum 2-1 desc"
},
"tx-xx-2-1-percentage": {
"text": "10%"
},
"ic-xx-2-1": {
"icon": {
"file": "award-ribbon-star--social-medias-rewards-rating--24x24",
"list": "24px"
}
},
"tx-xx-2-2": {
"text": "Lorem ipsum 2-2"
},
"tx-xx-2-2-desc": {
"text": "Lorem ipsum 2-2 desc"
},
"tx-xx-2-2-percentage": {
"text": "10%"
},
"ic-xx-2-2": {
"icon": {
"file": "single-woman-actions-flag--users--24x24",
"list": "24px"
}
},
"tx-xx-2-3": {
"text": "Lorem ipsum 2-3"
},
"tx-xx-2-3-desc": {
"text": "Lorem ipsum 2-3 desc"
},
"tx-xx-2-3-percentage": {
"text": "10%"
},
"ic-xx-2-3": {
"icon": {
"file": "history-sphinx-1--culture-religion--24x24",
"list": "24px"
}
},
"tx-xx-2-4": {
"text": "Lorem ipsum 2-4"
},
"tx-xx-2-4-desc": {
"text": "Lorem ipsum 2-4 desc"
},
"tx-xx-2-4-percentage": {
"text": "10%"
},
"ic-xx-2-4": {
"icon": {
"file": "amphibian-chameleon--pets-animals--24x24",
"list": "24px"
}
},
"brick-1": {
"color": "green"
},
"brick-2": {
"color": "blue"
}
}
#}
{% set ns = namespace(left=0, right=0) %}
{% for i in range(20) %}
{% if uniquePathsAt(elements, '1-' ~ i ~ '$') | length != 0 %}
{% set ns.left = i %}
{% endif %}
{% if uniquePathsAt(elements, '2-' ~ i ~ '$') | length != 0 %}
{% set ns.right = i %}
{% endif %}
{% endfor %}
{% macro item_left(index, count) -%}
{% set id = '1-'~index %}
{% if index == count %}
{% endif %}
{%- endmacro %}
{% macro item_right(index, count) -%}
{% set id = '2-'~index %}
{% if index == count %}
{% endif %}
{%- endmacro %}