{% set filled = "" %}
{% set variant = "dynamic" %}

{% set id = "masonary_" ~ info.getIndex() %}
{% set cols = pimcore_numeric('masonary_cols').getData() %}
{% set rows = pimcore_numeric('masonary_rows').getData() %}
{% set shadow = "" %}

<style>
    #{{ id }} .container-inner .container-grid {
        grid-template-columns: repeat({{ cols }},  1fr);
        grid-template-rows: repeat({{ rows }}, 1fr);
    }
</style>

{% if pimcore_checkbox('masonary_bg_fill').isChecked() %}
    {% set filled = 'filled' %}
{% endif %}
{%  if pimcore_checkbox('masonary_elevation').isChecked()  %}
    {% set shadow = 'filled' %}
{% endif %}

{% if pimcore_checkbox('masonary_variant').isChecked() %}
    {% set  variant  = 'static' %}
{% endif %}


<div class="block masonary {{ filled }} {{ variant  }}" id="{{ id }}">

    <div class="container-inner">

        {% if pimcore_input('masonary_title').isEmpty() != true %}
            <h2 id="{{ pimcore_input("masonary_id").getData() }}">{{ pimcore_input('masonary_title').getData() }}</h2>
        {% endif %}

        {% if pimcore_wysiwyg('masonary_content').isEmpty() != true %}

                {{ pimcore_wysiwyg('masonary_content').getData() | raw }}
            <p style="margin-bottom: 2em"></p>
        {% endif %}

        <div class="container-grid">
            {% for i in 1..10 %}
                {% set prefix = "masonary_" ~ i %}
                {% if pimcore_checkbox( prefix ~"_col_show").isChecked() %}

                    {% set prefix = "masonary_" ~ i %}

                    {% set colstart = "grid-column-start:" ~ pimcore_numeric(prefix ~"_col_start" ).getData() | default('auto') %}
                    {% set colend =  "grid-column-end:" ~ pimcore_numeric(prefix ~"_col_end" ).getData() | default('auto') %}
                    {% set rowstart = "grid-row-start:" ~ pimcore_numeric(prefix ~"_row_start" ).getData() | default('auto') %}
                    {% set rowend = "grid-row-end:" ~ pimcore_numeric(prefix ~"_row_end" ).getData() | default('auto') %}
                    {% set bgcolor = "background:" ~ pimcore_input(prefix ~"_bg_color" ).getData() %}
                    {% set textcolor = "color:" ~ pimcore_input(prefix ~"_text_color" ).getData() %}


                    <div class="masonary-card" style="{{ colstart }}; {{ colend }}; {{ rowstart }}; {{ rowend }}; {{ bgcolor }}">

                        {% if pimcore_input(prefix ~"_title" ).isEmpty() != true %}
                            <h3 style="{{ textcolor }}">
                                {{ pimcore_input(prefix ~"_title" ).getData() }}
                            </h3>
                        {% endif %}
                        {% if pimcore_wysiwyg(prefix ~"_intro" ).isEmpty() != true %}
                            <div class="masonary-intro" style="{{ textcolor }}">
                                {{ pimcore_wysiwyg(prefix ~"_intro" ).getData() | raw}}
                            </div>
                        {% endif %}
                        {% if pimcore_wysiwyg(prefix ~"_content" ).isEmpty() != true %}
                            <div class="masonary-content" style="{{ textcolor }}">
                                {{ pimcore_wysiwyg(prefix ~"_content" ).getData() | raw}}
                            </div>
                        {% endif %}
                        {%  if pimcore_relation(prefix ~ '_extern').isEmpty() != true %}
                            <div class="masonary-dynamic" style="{{ textcolor }}">
                                {{  pimcore_inc(pimcore_relation(prefix ~ '_extern').getData()['id']) }}
                            </div>
                        {%  endif %}
                        <div class="masonary-close">Schließen</div>
                    </div>
                {% endif %}
            {% endfor %}
            <script>
                $("#{{ id }}.dynamic .masonary-card").on("click", function(e) {

                    var card = $(this);
                    card.parent().find(".masonary-card").hide();
                    card.addClass('active').show();
                    card.find('.masonary-close').on("click", function(e) {
                        e.stopPropagation();
                        card.parent().find(".masonary-card").show();
                        card.removeClass("active");
                    })
                });
            </script>
        </div>
    </div>
</div>