<div id="{{ currentWidget.getWidgetId() }}" class="moto-widget moto-widget-google-search-result moto-preset-{{ currentWidget.properties.preset }} {{ currentWidget.getSpacing('classes') }} {{ currentWidget.getVisibleOn('classes') }} {{ currentWidget.getAlignClass() }} {{ currentWidget.getAnimationClasses() }}" data-widget="{{ currentWidget.getName() }}">
    {% if isPreview %}<div class="moto-widget-cover"></div>{% endif %}
    <div class="moto-widget-google-search-result__wrapper">
        <div class="moto-widget-google-search-result__content"{% if not isPreview %} data-token="{{ currentWidget.getTokenRequest() }}" data-settings="{{ currentWidget.exportFrontendSettings()|json_encode }}"{% endif %}>

            <div class="moto-widget-loader ng-cloak" data-ng-show="Loading">
                <div class="moto-widget-loader__indicator"></div>
            </div>

            <div class="moto-widget-google-search-result__results{% if not isPreview %} ng-cloak{% endif %}" data-ng-show="!Loading">
                <div class="moto-widget-google-search-result__no-results-blank" data-ng-class="settings.item.textStyles.noResultsMessage" data-ng-show="!resultItems || !resultItems.length">{{ currentWidget.properties.noResultsMessage }}</div>
                {% if isPreview %}
                    {% set previewFrontendSettings = currentWidget.exportFrontendSettings() %}
                    {% for item in currentWidget.getBlankResults() %}
                        <div class="moto-widget-google-search-result__item moto-widget moto-widget-text {{ previewFrontendSettings.item.classes }}" data-widget="text" data-preset="default">
                            <p class="moto-widget-google-search-result__item-title {{ previewFrontendSettings.item.textStyles.title }}"><a href="#">{{ item.title }}</a></p>
                            <span class="{{ previewFrontendSettings.item.textStyles.link }}"><a href="#" class="moto-widget-google-search-result__item-link">{{ item.link }}</a></span>
                            <p class="moto-widget-google-search-result__item-snippet {{ previewFrontendSettings.item.textStyles.snippet }}">{{ currentWidget.getItemSnippet(item) }}</p>
                        </div>
                        {% if not loop.last and previewFrontendSettings.divider.enabled %}
                            <div class="moto-widget moto-widget-divider {{ previewFrontendSettings.divider.classes }}" data-widget="divider_horizontal" data-preset="{{ previewFrontendSettings.divider.preset }}">
                                <hr class="moto-widget-divider-line" style="width:100%;">
                            </div>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <div class="moto-widget-google-search-result__item" data-ng-repeat-start="item in resultItems" data-ng-class="settings.item.classes">
                        <p class="moto-widget-google-search-result__item-title" data-ng-class="settings.item.textStyles.title"><a ng-href="{{ '{{ item.link }}' }}" target="{{ '{{ settings.link.target }}' }}" data-ng-bind="item.title"></a></p>
                        <span data-ng-class="settings.item.textStyles.link"><a ng-href="{{ '{{ item.link }}' }}" target="{{ '{{ settings.link.target }}' }}" class="moto-widget-google-search-result__item-link" data-ng-bind="item.link|motoTruncateString:80" title="{{ '{{ item.link }}' }}"></a></span>
                        <p class="moto-widget-google-search-result__item-snippet" data-ng-class="settings.item.textStyles.snippet" {% if (currentWidget.properties.useHtmlSnippet) %}data-ng-bind-html="item.htmlSnippet"{% else %}data-ng-bind="item.snippet"{% endif %}></p>
                    </div>
                    <div class="moto-widget-divider" data-ng-repeat-end="" data-ng-class="settings.divider.classes" data-ng-hide="$last || !settings.divider.enabled">
                        <hr class="moto-widget-divider-line" style="width:100%;">
                    </div>
                {% endif %}
            </div>

            <div class="moto-widget-google-search-result__pagination{% if not isPreview %} ng-cloak{% endif %}" data-ng-hide="Loading">
            {% if isPreview %}
                {% set previewFrontendSettings = currentWidget.exportFrontendSettings() %}
                <div class="moto-widget moto-widget-pagination moto-preset-default clearfix" data-widget="pagination" data-preset="default">
                    <ul class="moto-pagination-group moto-pagination-group_pages">
                        <li class="moto-pagination-item moto-pagination-item-page"><a href="#" class="moto-pagination-link moto-pagination-link_active"><span class="moto-pagination-link-text">1</span></a></li>
                        <li class="moto-pagination-item moto-pagination-item-page"><a href="#" class="moto-pagination-link"><span class="moto-pagination-link-text">2</span></a></li>
                        <li class="moto-pagination-item moto-pagination-item-page"><a href="#" class="moto-pagination-link"><span class="moto-pagination-link-text">3</span></a></li>
                    </ul>
                    <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="#" 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="#" class="moto-pagination-link"><i class="moto-pagination-link-icon moto-pagination-link-text fa fa-angle-double-right"></i></a></li>
                    </ul>
                </div>
            {% else %}
                <div data-moto-website-pagination="" data-paginator="Paginator"></div>
            {% endif %}
            </div>
        </div>
    </div>
</div>