{% set steps = { "1": 1,"2": 2,"3": 3,"4": 4,"5": 5} %}

{% set cardCount = pimcore_input("card_count").getValue() | default("1") %}

{% set cardClass = pimcore_checkbox("cards_elevation").isChecked() ? "expandable": "" %}

{% if pimcore_checkbox('content-bg').isChecked() %}
    <div class="block filled">
        <div class="container-inner">
        {% else %}
    <div class="block">
        <div class="container-inner">
{% endif %}
        <h2 style="text-align: center; {{  pimcore_input("content-header_style").getData() }}" id="{{ pimcore_input("card_id").getData() }}">
            {{ pimcore_input("card-title", {
                placeholder: 'Überschrift'
            }) }}
        </h2>
        {% if (not pimcore_wysiwyg("card_intro").isEmpty()) or (editmode) %}
            {{ pimcore_wysiwyg("card_intro", {
                placeholder: 'Einleitung'
            }) }}
        {% endif %}
        <div class="grid" style="grid-template-columns: repeat({{ cardCount }}, 1fr)">
            {% for i in range(1, steps[cardCount]) %}
                {% set cardtitle = "card_title_" ~ i %}
                {% set cardname = "card_content_" ~ i %}

                {% if pimcore_checkbox("cards_elevation").isChecked() %}
                    <div style="text-align:center">
                        <div class="card {{ cardClass }}">
                            <h3> {{ pimcore_input(cardtitle, {
                                    placeholder: 'Kartentitel'
                                }) }}</h3>
                            <div class="card-body">
                                {{ pimcore_wysiwyg(cardname, {
                                    placeholder: 'Karteninhalt'
                                }) }}
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div >
                        <h3> {{ pimcore_input(cardtitle,{
                                placeholder: 'Kartentitel'
                            }) }}</h3>
                            {{ pimcore_wysiwyg(cardname, {
                                placeholder: 'Karteninhalt'
                            }) }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        {% if (not pimcore_wysiwyg("card_extro").isEmpty()) or (editmode) %}
            <div class="mt-2">
                {{ pimcore_wysiwyg("card_extro", {
                    placeholder: 'Legende'
                }) }}
            </div>
        {% endif %}

    </div>
</div>