{%- comment -%}
Redirect ONLY the PNW Golf Magazine ad link traffic (specific UTMs)
without impacting normal /collections/closeouts visitors.
{%- endcomment -%}

{% if collection and collection.handle == 'closeouts' %}
  <script>
  (function () {
    try {
      var params = new URLSearchParams(window.location.search);
      var source = params.get('utm_source');
      var medium = params.get('utm_medium');
      var campaign = params.get('utm_campaign');

      if (source === 'pnw-golf-magazine' && medium === 'magazine' && campaign === 'GD-2-24-26') {
        var dest = '/pages/pnw-golf-magazine'; // e.g. '/pages/sale' or '/collections/new-closeouts'
        // keep UTMs so your tracking still works
        var qs = params.toString();
        window.location.replace(dest + (qs ? ('?' + qs) : ''));
      }
    } catch (e) {}
  })();
  </script>
{% endif %}

{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'collection-ad.css' | asset_url | stylesheet_tag }}

{%- unless section.settings.quick_add == 'none' -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
{%- endunless -%}

{%- if section.settings.quick_add == 'standard' -%}
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{% comment %}
  {%- if section.settings.quick_add == 'bulk' -%}
  <script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}

  filter_type: horizontal, vertical, drawer
{% endcomment %}


{% liquid
  assign filter_type = 'vertical'
  if template.suffix == 'full-view'
    assign filter_type = 'horizontal'
  endif
  assign collection_ad = collection.metafields.custom.collection_ad.value
  if collection_ad != blank and collection_ad.image != blank
    if collection_ad.double_column
      assign products_per_page = products_per_page | plus: 2
    else
      assign products_per_page = products_per_page | plus: 1
    endif
  endif
%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }} {{ filter_type }}-type">
  {%- paginate collection.products by section.settings.products_per_page -%}
    {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
    {%- if section.settings.enable_sorting and filter_type == 'vertical' -%}
      <div class="facets-vertical facets-filter-verticle page-width">
        <div class="facets-collection-title facets__form-vertical">
          <h1 class="h2">{{ collection.title | split: '/' | last }}</h1>
        </div>

        <div class="facet-filters-form__wrapper">
          {% if collection.metafields.custom.quick_filters != blank %}
            <div class="verticle-quick-filters">
              <span class="h5 quick-filter-label">{{ "Quick Filters" | upcase }}</span>
              <div class="quick_filters">
                {% assign quick_filters = collection.metafields.custom.quick_filters.value %}

                {% for quick_filter in quick_filters %}
                  <a href="{{ quick_filter.link }}" class="button button--secondary quick_filter_button">
                    {{ quick_filter.text }}
                  </a>
                {% endfor %}
              </div>
            </div>
          {% endif %}
          {% render 'main-facet-filters-form'
            , collection: collection
            , visibility: 'small-hide'
            , id: 'FacetSortForm' %}
        </div>
      </div>
    {%- endif -%}

    <div class="{% if filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
      {{ 'component-facets.css' | asset_url | stylesheet_tag }}
      <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
      {%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
        <aside
          aria-label="{{ 'products.facets.filter_by_label' | t }}"
          class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if filter_type != 'vertical' %} page-width{% endif %}"
          id="main-collection-filters"
          data-id="{{ section.id }}">
          {% render 'facets'
            , results: collection
            , enable_filtering: section.settings.enable_filtering
            , enable_sorting: section.settings.enable_sorting
            , filter_type: filter_type
            , paginate: paginate
          %}
        </aside>
      {%- endif -%}

      <div
        class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        id="ProductGridContainer"
        {% if settings.animations_reveal_on_scroll %}
        data-cascade
        {% endif %}>
        {%- if collection.products.size == 0 -%}
          <div
            class="collection collection--empty page-width"
            id="product-grid"
            data-id="{{ section.id }}">
            <div class="loading-overlay gradient"></div>
            <div class="title-wrapper center">
              <h2 class="title title--primary">
                {{ 'sections.collection_template.empty' | t -}}
                <br>
                {{
                  'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: 'underlined-link link'
                }}
              </h2>
            </div>
          </div>
        {%- else -%}
          <div class="collection{% if filter_type != 'vertical' %} page-width{% endif %}">
            <div class="loading-overlay gradient"></div>
            <ul
              id="product-grid"
              data-id="{{ section.id }}"
              class="
                grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
                grid--{{ section.settings.columns_desktop }}-col-desktop
                {% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %}
              ">
              {% assign skip_card_product_styles = false %}
              {%- for product in collection.products -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}
                <li
                  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                  data-cascade
                  style="--animation-order: {{ forloop.index }};"
                  {% endif %}>
                  {% render 'card-product'
                    , card_product: product
                    , media_aspect_ratio: section.settings.image_ratio
                    , show_secondary_image: section.settings.show_secondary_image
                    , show_vendor: section.settings.show_vendor
                    , show_rating: section.settings.show_rating
                    , lazy_load: lazy_load
                    , skip_styles: skip_card_product_styles
                    , quick_add: section.settings.quick_add
                    , section_id: section.id
                  %}
                </li>
                {% if collection_ad != blank and paginate.current_page == 1 %}
                  {% assign add_to_show = forloop.index %}
                  {% assign ad_position = collection_ad.ad_position %}
                  {% if add_to_show == ad_position and collection_ad.image != blank %}
                    <li class="grid__item grid__item-double-column collection-ad-card gradient color-{{ section.settings.ad_color_scheme }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
                      {% if collection_ad.image != blank %}
                        <div class="collection-add-card-image">
                          {{ collection_ad.image | image_url: width: collection_ad.image.width | image_tag: loading: "lazy", alt: "Collection ad" }}
                        </div>
                      {% endif %}
                      <div class="collection-ad-content">
                        <div class="collection-add-text">
                          {% if collection_ad.title != blank %}
                            <h2 class="collection-add-headline h4"
                                style="color: {{ section.settings.ad_title_color }};">
                              {{ collection_ad.title }}
                            </h2>
                          {% endif %}
                          {% if collection_ad.description != blank %}
                           <p style="color: {{ section.settings.ad_description_color }};">
                            {{ collection_ad.description }}
                          </p>
                          {% endif %}
                        </div>
                        {% if collection_ad.button_link != blank and collection_ad.button_text != blank %}
                          <div class="collection-ad-btn">
                            <a
                              class="button collection-ad-button button--text animate-arrow h5"
                              href="{{ collection_ad.button_link }}"
                              aria-label="{{ collection_ad.button_text }}"
                              style="background-color: {{ section.settings.ad_button_bg }}; color: {{ section.settings.ad_button_text_color }}; {% if section.settings.ad_button_bg != 'rgba(0,0,0,0)' %}   padding: 10px;border-radius: 100px;{% endif %}"
                            >
                              {{ collection_ad.button_text }}
                              {{ 'icon-arrow.svg' | inline_asset_content }}
                            </a>
                          </div>
                        {% endif %}
                      </div>
                    </li>
                  {% endif %}
                {% endif %}
                {%- assign skip_card_product_styles = true -%}
              {%- endfor -%}
            </ul>

            {%- if paginate.pages > 1 -%}
              {% render 'pagination'
                , paginate: paginate
                , anchor: '' %}
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  {%- endpaginate -%}
</div>

<script type="module">
  import { InfiniScroll } from '{{ 'infinitescroll.js' | asset_url}}';

  function loadInfinite(e) {
    e = window.event || e;
    let target = e.target;
    e.preventDefault();
    InfiniScroll({
      itemsContainerSelector: '#product-grid',
      paginationContainerSelector: '#AjaxinatePagination',
      offset: 0,
      loadingText: 'Loading…',
      debug: false,
      callback: function(data) {
      }
    }).start();
    document.dispatchEvent(new CustomEvent('scroll'))
  }

  const firstLoad = document.querySelector('.pagination__first-page#AjaxinatePagination');
  if (firstLoad) {
    let firstLoadLink = firstLoad.querySelector('a');
    firstLoadLink.addEventListener('click', loadInfinite);
  }
</script>

{% schema %}
  {
    "name": "t:sections.main-collection-product-grid.name",
    "class": "section",
    "settings": [
      {
        "type": "range",
        "id": "products_per_page",
        "min": 8,
        "max": 36,
        "step": 4,
        "default": 16,
        "label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
      },
      {
        "type": "range",
        "id": "columns_desktop",
        "min": 1,
        "max": 6,
        "step": 1,
        "default": 4,
        "label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
      },
      {
        "type": "select",
        "id": "columns_mobile",
        "default": "2",
        "label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
        "options": [
          {
            "value": "1",
            "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
          },
          {
            "value": "2",
            "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
          }
        ]
      },
      {
        "type": "select",
        "id": "color_scheme",
        "options": [
          {
            "value": "accent-1",
            "label": "t:sections.all.colors.accent_1.label"
          },
          {
            "value": "accent-2",
            "label": "t:sections.all.colors.accent_2.label"
          },
          {
            "value": "background-1",
            "label": "t:sections.all.colors.background_1.label"
          },
          {
            "value": "background-2",
            "label": "t:sections.all.colors.background_2.label"
          },
          {
            "value": "inverse",
            "label": "t:sections.all.colors.inverse.label"
          }
        ],
        "default": "background-1",
        "label": "t:sections.all.colors.label"
      },
      {
        "type": "select",
        "id": "ad_color_scheme",
        "options": [
          {
            "value": "accent-1",
            "label": "t:sections.all.colors.accent_1.label"
          },
          {
            "value": "accent-2",
            "label": "t:sections.all.colors.accent_2.label"
          },
          {
            "value": "background-1",
            "label": "t:sections.all.colors.background_1.label"
          },
          {
            "value": "background-2",
            "label": "t:sections.all.colors.background_2.label"
          },
          {
            "value": "inverse",
            "label": "t:sections.all.colors.inverse.label"
          }
        ],
        "default": "inverse",
        "label": "Ad color scheme"
      },
      {
        "type": "header",
        "content": "Collection Ad Styling"
      },
      {
        "type": "color",
        "id": "ad_title_color",
        "label": "Ad title color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "ad_description_color",
        "label": "Ad description color",
        "default": "#666666"
      },
      {
        "type": "color",
        "id": "ad_button_bg",
        "label": "Ad button background color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "ad_button_text_color",
        "label": "Ad button text color",
        "default": "#ffffff"
      },
      {
        "type": "header",
        "content": "t:sections.main-collection-product-grid.settings.header__3.content"
      },
      {
        "type": "select",
        "id": "image_ratio",
        "options": [
          {
            "value": "adapt",
            "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
          },
          {
            "value": "portrait",
            "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
          },
          {
            "value": "square",
            "label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
          }
        ],
        "default": "adapt",
        "label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
      },
      {
        "type": "checkbox",
        "id": "show_secondary_image",
        "default": false,
        "label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "default": false,
        "label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
      },
      {
        "type": "checkbox",
        "id": "show_rating",
        "default": false,
        "label": "t:sections.main-collection-product-grid.settings.show_rating.label",
        "info": "t:sections.main-collection-product-grid.settings.show_rating.info"
      },
      {
        "type": "select",
        "id": "quick_add",
        "default": "none",
        "label": "t:sections.main-collection-product-grid.settings.quick_add.label",
        "options": [
          {
            "value": "none",
            "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
          },
          {
            "value": "standard",
            "label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
          }
        ]
      },
      {
        "type": "header",
        "content": "t:sections.main-collection-product-grid.settings.header__1.content"
      },
      {
        "type": "checkbox",
        "id": "enable_filtering",
        "default": true,
        "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
        "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
      },
      {
        "type": "checkbox",
        "id": "enable_sorting",
        "default": true,
        "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
      },
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ]
  }
{% endschema %}