<div data-widget-id="{{ currentWidget.getWidgetId() }}" class="moto-widget moto-widget-blog-recent_posts moto-preset-default {{ currentWidget.getSpacing('classes') }} {{ currentWidget.getVisibleOn('classes') }}" data-widget="blog.recent_posts">
    {% if isPreview %}<div class="moto-widget-cover"></div>{% endif %}
    {% if currentWidget.posts.meta.total > 0 %}
        <div class="moto-widget-blog-recent_posts-title">
            <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" data-preset="default" data-spacing="aasa">
                <div class="moto-widget-text-content moto-widget-text-editable">
                    <p class="{{ currentWidget.getDesignOption('heading.font_style', 'moto-text_system_7') }}">{{ currentWidget.properties.label|default('Recent Posts') }}</p>
                </div>
            </div>
        </div>

    <div class="moto-widget moto-widget-row" data-widget="row">
        <div class="container-fluid">
            <div class="row moto-widget-blog-recent_posts-list">
            {% for post in currentWidget.posts.records %}

                <div class="moto-cell col-sm-{{currentWidget.getColumnWidth() }} moto-widget-blog-recent_posts-item">
                    <div class="moto-widget-blog-recent_posts-item__content {{ currentWidget.getSpacingClasses('layout.elements.post.properties.spacing') }}">

                    {% 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-recent_posts-item-preview">
                            {% if isServer %}
                                {{ widget(currentWidget.getInnerWidget("image", post)) }}
                            {% else %}
                                {% widget currentWidget.getInnerWidget("image", {"currentPage": post}) %}{% endWidget %}
                            {% endif %}
                        </div>
                    {% endif %}

                    <div class="moto-widget-blog-recent_posts-item-title">
                        <div class="moto-widget moto-widget-text moto-spacing-top-auto moto-spacing-right-auto moto-spacing-bottom-small moto-spacing-left-auto {{ currentWidget.getAlignClass('moto-align-', 'style.title.align') }}" data-preset="default" data-spacing="aasa">
                            <div class="moto-widget-text-content moto-widget-text-editable">
                                <h2 class="blog-post-title {{ currentWidget.getDesignOption('title.font_style', 'moto-text_system_9') }}">
                                    <a href="{% if isPreview %}#{% else %}{{ post.getAbsoluteUrl() }}{% endif %}">{{ post.name }}</a>
                                </h2>
                            </div>
                        </div>
                    </div>

                    {% if currentWidget.properties.layout.elements.post.children.date.visible or currentWidget.properties.layout.elements.post.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.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.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 %}


                    {% if currentWidget.properties.layout.elements.post.children.description.visible %}
                        <div class="moto-widget-blog-recent_posts-item__post_description moto-widget-text 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.button.visible %}
                        {% if isServer %}
                            {{ widget(currentWidget.getInnerWidget("button", post)) }}
                        {% else %}
                            {% widget currentWidget.getInnerWidget("button", {"currentPage": post}) %}{% endWidget %}
                        {% endif %}
                    {% endif %}

                    </div>
                </div>

            {% endfor %}
            </div>
        </div>
    </div>

    {% else %}
        {% if isPreview %}<div class="moto-widget-empty"></div>{% endif %}
    {% endif %}
</div>