<%
let items
if (!opt.items) {
  const search = opt.search || new _.EcomSearch()
  if (opt.sort) {
    search.setSortOrder(opt.sort)
  }
  if (opt.page_size) {
    search.setPageSize(opt.page_size)
  }
  try {
    await search.fetch()
    items = search.getItems()
  } catch (err) {
    if (_.pageName === 'home' || (err.response && err.response.status === 404)) {
      items = []
      console.error(err)
    } else {
      throw err
    }
  }
} else {
  items = opt.items
}
%>

<section class="retail-grid">
  <div class="container">
    <div
      id="search-engine"
      <% if (opt.category_names) { %>
        data-categories="<%= JSON.stringify(opt.category_names) %>"
      <% } %>
      <% if (opt.brand_names) { %>
        data-brands="<%= JSON.stringify(opt.brand_names) %>"
      <% } %>
      <% if (opt.sort) { %>
        data-sort="<%= opt.sort %>"
      <% } %>
      <% if (opt.disable_filters) { %>
        data-disable-filters="true"
      <% } %>
      <% if (opt.disable_load_more) { %>
        data-disable-load-more="true"
      <% } %>
    >
      <% if (items.length) { %>
        <div id="search-engine-dock">
          <!--
            `SearchEngine` should be hydrated here:
            https://developers.e-com.plus/storefront/@ecomplus/storefront-components/docs/SearchEngine.html
          -->
        </div>

        <div id="search-engine-snap">
          <article class="search-engine__retail">
            <div class="row">
              <% for (let i = 0; i < items.length; i++) { %>
                <div class="col-6 col-md-4 col-lg-3">
                  <%- await include('@/sections/inc/product-item', {
                    _, opt: { item: items[i] }
                  }) %>
                </div>
              <% } %>
            </div>
          </article>
        </div>
      <% } %>
    </div>

    <div id="search-pagination">
      <!--
        `APagination` may be rendered here when enabled:
        https://developers.e-com.plus/storefront/@ecomplus/storefront-components/docs/APagination.html
      -->
    </div>
  </div>
</section>
