<div class="section-{{ section.id }} section section--page-width">
  <div class="page-width tws-recommendations">
    
    <div class="tws-recommendations__title">
      <h3>{{ section.settings.title }}</h3>
    </div>
    
    <div class="tws-recommendations__body" id="tweakwise-recommendations" >      
      <div class="tw-skeleton__container">
        {% assign count =  8 %}
        {% if section.settings.view == 'carousel' %}
          {% assign count =  4 %}
        {% endif %}
        <div class="tw-skeleton__right is-{{section.settings.view}}">
          {% for i in (1..count) %}
          <div>
            <div class="tw-skeleton is-square"> </div>
            <div class="tw-skeleton is-low"> </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

{%- style -%}
  .tws-recommendations__title {
    padding: 20px;
    text-align: center;
  }
  .tws-recommendations__body{margin: 0 0 40px 0;}
  .tw-skeleton { background: #f2f2f2; margin-bottom: 20px; min-height: 1.5em; }
  .tw-skeleton.is-low { min-height: 1em; }
  .tw-skeleton.is-square { aspect-ratio: 1/1; margin-bottom: 7px; }
  .tw-skeleton.is-square + .tw-skeleton { margin-bottom: 10px; }
  .tw-skeleton__right.is-carousel { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; }
  .tw-skeleton__right.is-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; }
{%- endstyle -%}

{%  if section.settings.type != blank %}
<script>
  window.addEventListener("twn.recommendations.ready", function () {
    window.tweakwiseRecommendations({
      output: "#tweakwise-recommendations",
      instancekey: "{{settings.tweakwise_instancekey}}",
      view: "{{ section.settings.view }}",
{%  if section.settings.type == "related" %}
      related: {
        productId: "{{product.id}}",
        groupKey: "{{ section.settings.value }}"
      }
{% endif %}
{% if section.settings.type == "featured" %}
      featured: {
        id: "{{ section.settings.value }}"
      }
{%  endif %}
    });
  });
</script>
{%  endif %}

{% schema %}
  {
    "name": "Tweakwise Recommendations",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "default": "For you",
        "label": "Title",
      },
      {
        "type": "select",
        "id": "type",
        "default": "featured",
        "options": [
          { "value": "featured", "label": "Featured" },
          { "value": "related", "label": "Related" }
        ],
        "label": "Type"
      },
      {
        "type": "text",
        "id": "value",
        "default": "cart",
        "label": "Group key/Featured id"
      },
      {
        "type": "select",
        "id": "view",
        "default": "carousel",
        "options": [
          { "value": "carousel", "label": "Carousel" },
          { "value": "grid", "label": "Grid" }
        ],
        "label": "View"
      }
    ],
    "presets": [{
      "name": "Tweakwise Recommendations",
      "category": "Tweakwise"
    }]
  }
{% endschema %}