{#
 # Template pour un container (nouveau système de page builder)
 # Un container définit la disposition globale (largeur, colonnes, arrière-plan)
 #}

{% set width = config.width|default('boxed') %}
{% set layout = config.layout|default('one-column') %}
{% set gap = config.gap|default('30px') %}
{% set columnRatio = config.columnRatio|default('50-50') %}
{% set backgroundColor = config.backgroundColor|default('transparent') %}
{% set backgroundImage = config.backgroundImage|default('') %}
{% set padding = config.padding|default('60px 0') %}

<div class="izibrick-container container-{{ width }}"
     style="
         background-color: {{ backgroundColor }};
         {% if backgroundImage %}
         background-image: url({{ backgroundImage }});
         background-size: cover;
         background-position: center;
         {% endif %}
         padding: {{ padding }};
     ">
    <div class="container-inner">
        <div class="columns columns-{{ layout }}"
             style="gap: {{ gap }};"
             data-ratio="{{ columnRatio }}">

            {% for column in columns %}
                <div class="column" data-column-index="{{ loop.index0 }}">
                    {% if column.widgets is defined and column.widgets is not empty %}
                        {% for widget in column.widgets %}
                            <div class="widget-wrapper">
                                {{ renderer.renderWidget(widget)|raw }}
                            </div>
                        {% endfor %}
                    {% else %}
                        {# Colonne vide #}
                        <div class="column-empty" style="min-height: 100px;"></div>
                    {% endif %}
                </div>
            {% endfor %}

        </div>
    </div>
</div>