{#
Title: Latest Posts Block Grid
Description: Grid layout pulling latest posts by selectable post type, with filters and optional background overrides.
Category: formatting
Icon: admin-post
Keywords: latest posts grid
Mode: preview
Align: full
SupportsAlign: full false
#}

{% extends '/views/parts/logic/block-settings.twig' %}

{% block blocksettings %}
    {% block latestpostsblockgrid %}
        {% set fc = fields.frontend_controls ?? {} %}

        {% set showFilters = (fc.enable_frontend_filters is defined and fc.enable_frontend_filters is not empty) %}

        {# This field name comes from "Enable infinite scroll / load more" => enable_infinite_scroll__load_more #}
        {% set enableLoadMore = (
            (fc.enable_infinite_scroll__load_more is defined and fc.enable_infinite_scroll__load_more is not empty)
            or
            (fc.enable_infinite_scroll_load_more is defined and fc.enable_infinite_scroll_load_more is not empty)
            ) %}

        {% set loadMoreMode = fc.load_more_mode ?? 'button' %}
        {% set loadMoreText = fc.load_more_button_text ?? 'Show more' %}

        {% set base = latest_posts_base ?? {} %}
        {% set ajaxCfg = ajax ?? {} %}

        <div class="block-grid latest-posts-block-grid {{ outer_classes }} {{ fields.text_center }}"
             data-lpgg="1"
             data-lpgg-ajax-url="{{ (ajaxCfg.url ?? '')|e('html_attr') }}"
             data-lpgg-action="{{ (ajaxCfg.action ?? '')|e('html_attr') }}"
             data-lpgg-nonce="{{ (ajaxCfg.nonce ?? '')|e('html_attr') }}"
             data-lpgg-base='{{ function("wp_json_encode", base)|e("html_attr") }}'
             data-lpgg-loadmore="{{ enableLoadMore ? '1' : '0' }}"
             data-lpgg-loadmore-mode="{{ (loadMoreMode ?? 'button')|e('html_attr') }}"
        >
            <div class="content align-content-center {{ inner_classes }}">
                {% if fields.main_header %}
                    <h1>{{ fields.main_header }}</h1>
                {% endif %}

                {% if showFilters %}
                    <div class="latest-posts-block-grid__filters" data-lpgg-filters>
                        {% set tax = fields.query.taxonomy ?? '' %}
                        {% set configuredTerms = fields.query.terms ?? [] %}
                        {% if tax and configuredTerms is iterable and configuredTerms is not empty %}
                            {% set allowedTerms = function('get_terms', {
                                taxonomy: tax,
                                include: configuredTerms,
                                hide_empty: false
                            }) %}

                            {% if allowedTerms %}
                                <div class="lpgg-filter lpgg-filter--terms" data-lpgg-term-filter>
                                    <button type="button" class="lpgg-pill is-active" data-lpgg-term="" aria-pressed="true">All</button>
                                    {% for t in allowedTerms %}
                                        <button type="button" class="lpgg-pill" data-lpgg-term="{{ t.term_id }}" aria-pressed="false">{{ t.name }}</button>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        {% endif %}

                        {% set allowedAuthorIds = base.allowed_author_ids ?? [] %}
                        {% if allowedAuthorIds is iterable and allowedAuthorIds is not empty %}
                            <div class="lpgg-filter lpgg-filter--authors" data-lpgg-author-filter>
                                <button type="button" class="lpgg-pill is-active" data-lpgg-author="" aria-pressed="true">All</button>
                                {% for uid in allowedAuthorIds %}
                                    {% set u = function('get_userdata', uid) %}
                                    {% if u %}
                                        <button type="button" class="lpgg-pill" data-lpgg-author="{{ uid }}" aria-pressed="false">{{ u.display_name }}</button>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}

                <div class="row row-cols-{{ fields.row_columns }}" data-lpgg-grid>
                    {{ include('blocks/general/latest_posts_block_grid/latest-posts-block-grid.items.twig', {
                        latest_posts: latest_posts,
                        post_overrides: post_overrides,
                        block_col_class: block_col_class
                    }) }}
                </div>

                {% if latest_posts is empty %}
                    <p data-lpgg-empty>No posts found.</p>
                {% endif %}

                {% if enableLoadMore %}
                    {% if loadMoreMode == 'button' %}
                        <div class="latest-posts-block-grid__more">
                            <button type="button" class="btn btn-primary" data-lpgg-more {% if not has_more %}disabled{% endif %}>
                                {{ loadMoreText }}
                            </button>
                        </div>
                    {% else %}
                        <div class="latest-posts-block-grid__sentinel" data-lpgg-sentinel></div>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    {% endblock %}
{% endblock %}