/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:0 Unexpected "-"
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Expected identifier but found "%"
Line 24:0 Unexpected "{"
Line 24:1 Expected identifier but found "%"
Line 35:0 Unexpected "{"
Line 35:1 Expected identifier but found "%"
... and 64 more hidden warnings

**/
{% comment %}
Dynamic Collection Page
- Left sidebar: Parent and child collections
- Right side: Products (AJAX-loaded when child clicked)
{% endcomment %}

{% assign current_collection = collection %}

{%- style -%}
/* Ensure product images don't get cropped on mobile */
@media (max-width: 989px) {
  .card__media img,
  .product-card__image img,
  .custom-product-card img {
    object-fit: scale-down !important;
    max-width: 100%;
    height: auto;
  }
}
{%- endstyle -%}

<div class="dynamic-collection-page page-width">
  <div class="dynamic-collection-layout">

    <!-- Sidebar -->
    <aside class="collection-sidebar">
      <h3 class="sidebar-title">Categories</h3>
      <ul class="sidebar-nav">
        {% comment %} Parent collections {% endcomment %}
        {% assign parent_collections = '' | split: '' %}
        {% for col in collections %}
          {% assign show_val = col.metafields.custom.show_in_navigations.value %}
          {% assign parent_val = col.metafields.custom.parent_collection.value %}
          {% if show_val == 'true' and parent_val == nil %}
            {% assign parent_collections = parent_collections | concat: [col] %}
          {% endif %}
        {% endfor %}

        {% for parent in parent_collections %}
          <li class="nav-item {% if current_collection.handle == parent.handle %}active-parent{% endif %}">
            <a href="{{ parent.url }}" class="nav-link parent-link {% if current_collection.handle == parent.handle %}active{% endif %}">
              {{ parent.title }}
            </a>

            {% comment %} Subcollections {% endcomment %}
            {% assign sub_collections = '' | split: '' %}
            {% for col in collections %}
              {% assign show_val = col.metafields.custom.show_in_navigations.value %}
              {% assign parent_val = col.metafields.custom.parent_collection.value %}
              {% if show_val == 'true' and parent_val and parent_val.handle == parent.handle %}
                {% assign sub_collections = sub_collections | concat: [col] %}
              {% endif %}
            {% endfor %}

            {% if sub_collections.size > 0 %}
              <ul class="sub-nav">
                <li class="sub-item">
                  <a href="{{ parent.url }}" class="sub-link {% unless current_collection.metafields.custom.parent_collection.value %}active{% endunless %}" data-handle="{{ parent.handle }}">
                    All Products
                  </a>
                </li>
                {% for sub in sub_collections %}
                  <li class="sub-item">
                    <a href="{{ sub.url }}" class="sub-link {% if current_collection.handle == sub.handle %}active{% endif %}" data-handle="{{ sub.handle }}">
                      {{ sub.title }} ({{ sub.products_count }})
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </aside>

    <!-- Products Grid -->
    <section class="collection-main">
      <div id="products-grid">
        {% render 'collection-ajax', collection: current_collection %}
      </div>
    </section>

  </div>
</div>

<style>
.dynamic-collection-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; margin: 30px 0; }
.collection-sidebar { background: #f9f9f9; padding: 25px; border-radius: 8px; position: sticky; top: 100px; }
.sidebar-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.nav-item { margin-bottom: 8px; }
.nav-link, .sub-link { display: block; padding: 12px 16px; text-decoration: none; color: #333; border-radius: 6px; transition: all 0.3s ease; }
.nav-link:hover, .nav-link.active, .sub-link:hover, .sub-link.active { background: #000; color: #fff; }
.sub-nav { list-style: none; padding-left: 15px; margin-top: 10px; border-left: 2px solid #e5e5e5; }
.sub-item { margin-bottom: 4px; }
.collection-main { min-height: 500px; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const subLinks = document.querySelectorAll('.sub-link');

  subLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const handle = this.dataset.handle;

      // Update active class
      document.querySelectorAll('.sub-link').forEach(l => l.classList.remove('active'));
      this.classList.add('active');

      // AJAX fetch
      fetch(`/collections/${handle}?view=ajax`)
        .then(res => res.text())
        .then(html => {
          document.getElementById('products-grid').innerHTML = html;

          // Re-run any lazy loading or JS if needed
          if (window.Shopify && Shopify?.theme) {
            Shopify.theme.init();
          }

          // Update URL without reload
          window.history.pushState({}, '', `/collections/${handle}`);
        })
        .catch(err => console.error('AJAX error:', err));
    });
  });
});

</script>