{#
Title: Basic Title & Link Block Grid
Description: Repeater block for links with title, description, link and optional background. Grid layout
Category: formatting
Icon: admin-comments
Keywords: page link block grid
Mode: preview
Align: full
SupportsAlign: full false
#}
{% extends '/views/parts/logic/block-settings.twig' %}

{% block blocksettings %}
    {% block BasicTitleLinkBlockGrid %}
        {% set column_settings = fields.column_settings|default([]) %}
        {% set row_columns = fields.row_columns|default(2) %}

        {% set col_classes = [] %}
        {% if column_settings is iterable and column_settings is not empty %}
            {% for setting in column_settings %}
                {% set break_selector = setting.break_selector|default('') %}
                {% set column_width = setting.column_width|default(12) %}

                {% if column_width < 1 %}
                    {% set column_width = 1 %}
                {% elseif column_width > 12 %}
                    {% set column_width = 12 %}
                {% endif %}

                {% set col_classes = col_classes|merge(['col-' ~ break_selector ~ column_width]) %}
            {% endfor %}
        {% else %}
            {% set fallback_map = {
                1: 12,
                2: 6,
                3: 4,
                4: 3,
                6: 2
            } %}
            {% set fallback_width = fallback_map[row_columns]|default(6) %}
            {% set col_classes = ['col-12', 'col-md-' ~ fallback_width] %}
        {% endif %}

        {% set default_col_class = col_classes|join(' ') %}

        <section class="block-grid basic-title-link-block-grid {{ outer_classes }} {{ fields.text_center }}">
            <div class="content align-content-center {{ inner_classes }}">
                {% if fields.main_header %}
                    <h1>{{ fields.main_header }}</h1>
                {% endif %}

                <div class="row basic-title-link-block-grid__row">
                    {% for block in fields.blocks|default([]) %}
                        {% set item_col_class = block.custom_grid_class|default(default_col_class) %}

                        {% set background_image_url = '' %}
                        {% if block.background_image %}
                            {% if block.background_image is iterable and block.background_image.url is defined %}
                                {% set background_image_url = block.background_image.url %}
                            {% elseif block.background_image matches '/^\\d+$/' %}
                                {% set background_image_url = function('wp_get_attachment_url', block.background_image.ID) %}
                            {% else %}
                                {% set background_image_url = block.background_image %}
                            {% endif %}
                        {% endif %}

                        {% set button = block.button ?? null %}

                        <div class="{{ item_col_class }} basic-title-link-block-grid__col">
                            <article
                                    class="basic-title-link-block-grid__item"
                                    {% if background_image_url %}
                                        style="background-image: url('{{ background_image_url }}');"
                                    {% endif %}
                            >
                                {% if block.header %}
                                    <h3>{{ block.header }}</h3>
                                {% endif %}

                                {% if block.description %}
                                    <div class="description">
                                        {{ block.description }}
                                    </div>
                                {% endif %}

                                {% if button and button.url %}
                                    {{ include('views/parts/button.twig') }}
                                {% endif %}
                            </article>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    {% endblock %}
{% endblock %}