{% comment %}
  Dynasort search results (Chunk S2) — the storefront takeover of the theme's
  search RESULTS page grid. Pilot: hand-add this as sections/dynasort-search-results.liquid
  and point templates/search.json at it instead of the theme's main-search section.

  Model: relevance decides MEMBERSHIP, the recipe decides ORDER. The section reads
  the query server-side ({{ search.terms }}), calls the App Proxy
  (/apps/dynasort/search → proxy-search.php), and renders the recipe-ranked §9
  cards — Shopify's Storefront search supplies the matched set, we reorder + render.

  We OWN the grid + simple client-side pagination over the returned set (≤250),
  plus a sort select and a faceted filter bar/sidebar (groups = the merchant's
  Search & Discovery filter config via Storefront productFilters; layout and
  counts are app-side settings.filters). DEFERRED: collection-scoped search.
  Cards reuse the recommendation card contract (rec_card_from_product) so the
  markup/CSS mirror the recs widget; presentation settings come from the app
  admin (SearchPage.js) on every serve response.
{% endcomment %}

<div
  class="dynasort-search dynasort-search--grid"
  id="ds-search-{{ block.id }}"
  data-dynasort-search
  data-q="{{ search.terms | escape }}"
  data-per-page="{{ block.settings.per_page | default: 24 }}"
  data-hide-native-pagination="{{ block.settings.hide_native_pagination }}"
  data-t-filter="{{ 'search.filter' | t | escape }}"
  data-t-filters-toggle="{{ 'search.filters_toggle' | t | escape }}"
  data-t-clear="{{ 'search.clear_all' | t | escape }}"
  data-t-apply="{{ 'search.apply' | t | escape }}"
  data-t-page-of="{{ 'search.page_of' | t | escape }}"
  data-t-results-for="{{ 'search.results_for' | t | escape }}"
  data-t-result-for="{{ 'search.result_for' | t | escape }}"
  data-t-no-results="{{ 'search.no_results' | t | escape }}"
  data-t-added="{{ 'search.added' | t | escape }}"
  data-t-add-to-cart="{{ 'search.add_to_cart' | t | escape }}"
  data-t-choose-options="{{ 'search.choose_options' | t | escape }}"
  data-t-save="{{ 'search.save' | t | escape }}"
  data-t-save-up-to="{{ 'search.save_up_to' | t | escape }}"
  data-t-reveal-price="{{ 'search.reveal_price' | t | escape }}"
  data-show-vendor="{{ block.settings.show_vendor }}"
  data-show-buttons="{{ block.settings.show_buttons }}"
  style="--ds-cols-mobile: {{ block.settings.columns_mobile | default: 2 }}; --ds-cols-tablet: {{ block.settings.columns_tablet | default: 3 }}; --ds-cols-desktop: {{ block.settings.columns_desktop | default: 4 }};"
  hidden
>
  <div class="dynasort-search__toolbar">
    {% if block.settings.show_summary %}
      <p class="dynasort-search__summary" data-summary hidden></p>
    {% endif %}
    <select class="dynasort-search__sort" data-sort hidden aria-label="{{ 'sort.label' | t }}">
      <option value="">{{ 'sort.relevance' | t }}</option>
      <option value="price-ascending">{{ 'sort.price_ascending' | t }}</option>
      <option value="price-descending">{{ 'sort.price_descending' | t }}</option>
    </select>
  </div>
  <div class="dynasort-search__filters" data-filters hidden></div>
  <div class="dynasort-search__grid" data-grid aria-live="polite"></div>
  <div class="dynasort-search__pager" data-pager hidden>
    <button type="button" class="dynasort-search__page-btn" data-page-prev>&#8249; {{ 'pagination.previous' | t }}</button>
    <span class="dynasort-search__page-info" data-page-info></span>
    <button type="button" class="dynasort-search__page-btn" data-page-next>{{ 'pagination.next' | t }} &#8250;</button>
  </div>
  <p class="dynasort-search__empty" data-empty hidden></p>
</div>

{{ 'dynasort-search.css' | asset_url | stylesheet_tag }}
<script src="{{ 'dynasort-search.js' | asset_url }}" defer="defer"></script>

{% schema %}
{
  "target": "section",
  "name": "Dynasort Search Results",
  "settings": [
    { "type": "paragraph", "content": "Replaces the theme's search results grid with Dynasort recipe-ranked results. Shopify still decides which products match; the active Search recipe decides their order. Results per page, column layout, and the filter bar (layout, counts, on/off) are controlled in Dynasort under Search. Filter groups come from Shopify's Search & Discovery app (Filters section)." },
    { "type": "checkbox", "id": "show_summary", "label": "Show results summary", "default": true },
    { "type": "checkbox", "id": "show_vendor", "label": "Show product vendor", "default": false, "info": "Adds the vendor above each product title, like themes that show the brand on their result cards." },
    { "type": "checkbox", "id": "show_buttons", "label": "Show buy buttons", "default": false, "info": "Adds an always-visible button under each card: Add to cart for single-variant products, Choose options linking to the product page otherwise." },
    { "type": "checkbox", "id": "hide_native_pagination", "label": "Hide the theme's own pagination", "info": "Dynasort pages over the full ranked result set itself, so the theme's page links would reload the page without changing the results.", "default": true }
  ]
}
{% endschema %}
