<div data-widget-id="{{ currentWidget.getWidgetId() }}" class="moto-widget moto-widget-blog-post_list moto-preset-default moto-widget-blog-post_list_layout_{{ currentWidget.properties.layout.name }} {{ currentWidget.getSpacing('classes') }} " data-widget="blog.post_list">
    {% if isPreview %}<div class="moto-widget-cover"></div>{% endif %}

    {% if currentWidget.isAllowShowContent() and currentWidget.getPaginator().getTotalItemCount() > 0 %}
        {% set headerPosts = currentWidget.getCurrentItems(0, 3) %}
        {% set otherPosts = currentWidget.getCurrentItems(3) %}
        <div class="moto-widget-blog-post_list__layout-tiled-header moto-widget-blog-post_list__layout-tiled-header_{{ headerPosts|length }}-posts">
            <div class="moto-widget-blog-post_list__tiled-list moto-blog-posts-list">
                {% for post in headerPosts %}
                <div class="moto-blog-posts-list-item moto-widget-blog-post_list__tiled-item">
                    <article style="{{ StyleHelper.generateWidgetInlineStyles(currentWidget.properties.layout.elements.post.properties.styles) }}">
                        {% if currentWidget.properties.layout.elements.post.children.image.visible and post.properties.feature_media.src and post.properties.feature_media.type == 'image' %}
                            <div class="moto-widget-blog-post_list__layout-image-wrapper">
                                <div class="moto-widget-blog-post_list__layout-image" style="background-image: url({{ Linker.img(post.properties.feature_media.src) }});"></div>
                            </div>
                        {% endif %}
                        <div class="moto-widget-blog-post_list__layout-content {{currentWidget.getSpacingClasses('layout.elements.post.children.content.properties.spacing')}}" style="{{ StyleHelper.generateWidgetInlineStyles(currentWidget.properties.layout.settings.descriptionStyles) }}">
                            <div class="moto-widget moto-widget-text moto-preset-default moto-spacing-top-small moto-spacing-right-auto moto-spacing-bottom-small moto-spacing-left-auto {{ currentWidget.getAlignClass('moto-align-', 'contentAlignment.title') }}" data-preset="default" data-widget="text">
                                <div class="moto-widget-text-content moto-widget-text-editable">
                                    <h2 class="{{ currentWidget.getDesignOption("title.font_style", "moto-text_system_7") }}">
                                        <a href="{{ post.getAbsoluteUrl() }}">{{ post.name }}</a>
                                    </h2>
                                </div>
                            </div>
                            {% if currentWidget.properties.layout.elements.post.children.content.children.description.visible %}
                                <div class="moto-blog-post-content moto-widget-text moto-preset-default moto-spacing-top-auto moto-spacing-right-auto moto-spacing-bottom-small moto-spacing-left-auto">
                                    {% filter page_html_content(post, post.type ~ ':short_description') %}
                                        {% include template_from_string(post.short_description) %}
                                    {% endfilter %}
                                </div>
                            {% endif %}
                            {% if currentWidget.properties.layout.elements.post.children.content.children.button.visible %}
                                {% if isServer %}
                                    {{ widget(currentWidget.getInnerWidget("button", post)) }}
                                {% else %}
                                    {% widget currentWidget.getInnerWidget("button", {"currentPage": post}) %}{% endWidget %}
                                {% endif %}
                            {% endif %}
                            {% if currentWidget.properties.layout.elements.post.children.content.children.date.visible or currentWidget.properties.layout.elements.post.children.content.children.author.visible %}
                                <div class="moto-widget moto-widget-row" data-widget="row">
                                    <div class="container-fluid">
                                        <div class="row">
                                            {% if currentWidget.properties.layout.elements.post.children.content.children.date.visible %}
                                                <div class="moto-cell col-sm" data-container="container">
                                                    {% if isServer %}
                                                        {{ widget(currentWidget.getInnerWidget("blog.post_published_on"), {"currentPage": post}) }}
                                                    {% else %}
                                                        {% widget currentWidget.getInnerWidget("blog.post_published_on", {"currentPage": post}) %}{% endWidget %}
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                            {% if currentWidget.properties.layout.elements.post.children.content.children.author.visible %}
                                                <div class="moto-cell col-sm" data-container="container">
                                                    {% if isServer %}
                                                        {{ widget(currentWidget.getInnerWidget("blog.post_author"), {"currentPage": post}) }}
                                                    {% else %}
                                                        {% widget currentWidget.getInnerWidget("blog.post_author", {"currentPage": post}) %}{% endWidget %}
                                                    {% endif %}
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </article>
                </div>
                {% endfor %}
            </div>
        </div>
        {% if otherPosts|length > 0 %}
            <div class="moto-widget moto-widget-row" data-widget="row">
                <div class="container-fluid">
                    <div class="row moto-blog-posts-list moto-widget-blog-post_list__tiled-list moto-widget-blog-post_list-layout_items-with-bottom-spacing">
                        {% for post in otherPosts %}
                            <div class="moto-cell col-sm-4 moto-blog-posts-list-item moto-widget-blog-post_list__tiled-item">
                                <article style="{{ StyleHelper.generateWidgetInlineStyles(currentWidget.properties.layout.elements.post.properties.styles) }}">
                                    {% if currentWidget.properties.layout.elements.post.children.image.visible and post.properties.feature_media.src and post.properties.feature_media.type == 'image' %}
                                        <div class="moto-widget-blog-post_list__layout-image-wrapper">
                                            <div class="moto-widget-blog-post_list__layout-image moto-widget-blog-post_list__layout-image_proportions-16-9" style="background-image: url({{ Linker.img(post.properties.feature_media.src) }});"></div>
                                        </div>
                                    {% endif %}
                                    <div class="moto-widget-blog-post_list__layout-content {{currentWidget.getSpacingClasses('layout.elements.post.children.content.properties.spacing')}}" style="{{ StyleHelper.generateWidgetInlineStyles(currentWidget.properties.layout.settings.descriptionStyles) }}">
                                        <div class="moto-widget moto-widget-text moto-preset-default moto-spacing-top-small moto-spacing-right-auto moto-spacing-bottom-small moto-spacing-left-auto {{ currentWidget.getAlignClass('moto-align-', 'contentAlignment.title') }}" data-preset="default" data-widget="text">
                                            <div class="moto-widget-text-content moto-widget-text-editable">
                                                <h2 class="{{ currentWidget.getDesignOption("title.font_style", "moto-text_system_7") }}">
                                                    <a href="{{ post.getAbsoluteUrl() }}">{{ post.name }}</a>
                                                </h2>
                                            </div>
                                        </div>
                                        {% if currentWidget.properties.layout.elements.post.children.content.children.description.visible %}
                                            <div class="moto-blog-post-content moto-widget-text moto-preset-default moto-spacing-top-auto moto-spacing-right-auto moto-spacing-bottom-small moto-spacing-left-auto">
                                                {% filter page_html_content(post, post.type ~ ':short_description') %}
                                                    {% include template_from_string(post.short_description) %}
                                                {% endfilter %}
                                            </div>
                                        {% endif %}
                                        {% if currentWidget.properties.layout.elements.post.children.content.children.button.visible %}
                                            {% if isServer %}
                                                {{ widget(currentWidget.getInnerWidget("button", post)) }}
                                            {% else %}
                                                {% widget currentWidget.getInnerWidget("button", {"currentPage": post}) %}{% endWidget %}
                                            {% endif %}
                                        {% endif %}
                                        {% if currentWidget.properties.layout.elements.post.children.content.children.date.visible or currentWidget.properties.layout.elements.post.children.content.children.author.visible %}
                                            <div class="moto-widget moto-widget-row" data-widget="row">
                                                <div class="container-fluid">
                                                    <div class="row">
                                                        {% if currentWidget.properties.layout.elements.post.children.content.children.date.visible %}
                                                            <div class="moto-cell col-sm" data-container="container">
                                                                {% if isServer %}
                                                                    {{ widget(currentWidget.getInnerWidget("blog.post_published_on"), {"currentPage": post}) }}
                                                                {% else %}
                                                                    {% widget currentWidget.getInnerWidget("blog.post_published_on", {"currentPage": post}) %}{% endWidget %}
                                                                {% endif %}
                                                            </div>
                                                        {% endif %}
                                                        {% if currentWidget.properties.layout.elements.post.children.content.children.author.visible %}
                                                            <div class="moto-cell col-sm" data-container="container">
                                                                {% if isServer %}
                                                                    {{ widget(currentWidget.getInnerWidget("blog.post_author"), {"currentPage": post}) }}
                                                                {% else %}
                                                                    {% widget currentWidget.getInnerWidget("blog.post_author", {"currentPage": post}) %}{% endWidget %}
                                                                {% endif %}
                                                            </div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </article>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}

        {% set PaginatorPages = currentWidget.getPaginatorPages() %}
        {% if PaginatorPages.pageCount > 1 %}
            <div class="moto-widget moto-widget-pagination moto-preset-default moto-spacing-top-small moto-spacing-bottom-small {{ currentWidget.getAlignClass('moto-align-', 'contentAlignment.pagination') }}" data-widget="pagination" data-preset="default" >
                {% if PaginatorPages.first != PaginatorPages.current %}
                    <ul class="moto-pagination-group moto-pagination-group-controls moto-pagination-group_left">
                        <li class="moto-pagination-item moto-pagination-item-control moto-pagination-item-control_first">
                            <a href="{{ currentPage.getAbsoluteUrl() }}" class="moto-pagination-link"><i class="moto-pagination-link-icon moto-pagination-link-text fa fa-angle-double-left"></i></a>
                        </li>
                        <li class="moto-pagination-item moto-pagination-item-control moto-pagination-item-control_previous">
                            {% if PaginatorPages.first != PaginatorPages.previous %}
                                <a href="{{ currentPage.getAbsoluteUrl({ page: PaginatorPages.previous }) }}" class="moto-pagination-link"><i class="moto-pagination-link-icon moto-pagination-link-text fa fa-angle-left"></i></a>
                            {% else %}
                                <a href="{{ currentPage.getAbsoluteUrl() }}" class="moto-pagination-link"><i class="moto-pagination-link-icon moto-pagination-link-text fa fa-angle-left"></i></a>
                            {% endif %}
                        </li>
                    </ul>
                {% endif %}
                <ul class="moto-pagination-group moto-pagination-group_pages">
                    {% for i in PaginatorPages.pagesInRange %}
                        <li class="moto-pagination-item moto-pagination-item-page">
                            {% if i == PaginatorPages.current %}
                                <span class="moto-pagination-link moto-pagination-link_active"><span class="moto-pagination-link-text">{{ i }}</span></span>
                            {% else %}
                                {% if i == 1 %}
                                    <a href="{{ currentPage.getAbsoluteUrl() }}" class="moto-pagination-link"><span class="moto-pagination-link-text">{{ i }}</span></a>
                                {% else %}
                                    <a href="{{ currentPage.getAbsoluteUrl({ page:i }) }}" class="moto-pagination-link"><span class="moto-pagination-link-text">{{ i }}</span></a>
                                {% endif %}
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
                {% if PaginatorPages.last != PaginatorPages.current %}
                    <ul class="moto-pagination-group moto-pagination-group-controls moto-pagination-group_right">
                        <li class="moto-pagination-item moto-pagination-item-control moto-pagination-item-control_next">
                            <a href="{{ currentPage.getAbsoluteUrl({ page: PaginatorPages.next }) }}" class="moto-pagination-link"><i class="moto-pagination-link-icon moto-pagination-link-text fa fa-angle-right"></i></a>
                        </li>
                        <li class="moto-pagination-item moto-pagination-item-control moto-pagination-item-control_last">
                            <a href="{{ currentPage.getAbsoluteUrl({ page: PaginatorPages.last }) }}" class="moto-pagination-link"><i class="moto-pagination-link-icon moto-pagination-link-text fa fa-angle-double-right"></i></a>
                        </li>
                    </ul>
                {% endif %}
            </div>
        {% endif %}
    {% elseif isPreview %}
        <div class="moto-widget-empty"></div>
    {% endif %}
</div>
