{% if section.settings.template-type == 'template-collections-stories' %}
  {% assign min_height = 130 %}
{% else %}
  {% assign min_height = section.settings.min-height %}
{% endif %}

<div class="whatmore-base" style="min-height: {{ min_height }}px;">
  <div id="whatmoreShopId" data-wh="{{ shop.id }}"> </div>
  <div id="whatmoreCollectionId" data-wh="{{ collection.id }}"> </div>
  <div id="whatmorePageId" data-wh="{{ page.id }}"> </div>
  {%- if section.settings.collectionHeading -%}
      <div id="whatmoreCollectionHeading" data-wh="{{ section.settings.collectionHeading }}"> </div>
  {%- endif -%}
  {%- if section.settings.color-secondary  -%}
      <div id="whatmoreSecondaryColor" data-wh="{{ section.settings.color-secondary }}"> </div>
  {%- endif -%}

  {%- if section.settings.tile-size  -%}
    <div id="whatmoreCollectionsTileSize" data-wh="{{ section.settings.tile-size }}"> </div>
  {%- endif -%}
    {%- if section.settings.tile-size  -%}
    <div id="whatmoreCollectionsTileSizePortrait" data-wh="{{ section.settings.tile-size-portrait }}"> </div>
  {%- endif -%}

  {%- if section.settings.primary-font  -%}
      {% assign primary_font = section.settings.primary-font %}

      <div id="whatmorePrimaryFont" data-wh={{primary_font}}> </div>
  {%- endif -%}

  {%- if section.settings.ui-theme  -%}
    <div id="whatmoreUITheme" data-wh="{{ section.settings.ui-theme }}"> </div>
  {%- endif -%}

  {%- if section.settings.template-type  -%}
    <div class="whatmore-template-type" data-wh="{{ section.settings.template-type }}"> </div>
  {%- endif -%}

  {% if request.design_mode %}
    <div id="whatmoreIsInDesignMode" data-wh='true'> </div>
  {% else %}
    <div id="whatmoreIsInDesignMode" data-wh='false'> </div>
  {% endif %}
  <div class="whatmore-widget" data-wh="collection"></div>

  <div class="whatmore-render-root"></div>

</div>

{% schema %}
    {
      "name": "Whatmore Collections",
      "tag": "section",
      "class": "section",
      "settings": [
         {
          "type": "text",
          "id": "collectionHeading",
          "label": "Heading",
          "default": "W"
        },
        {
          "type": "select",
          "id": "template-type",
          "label": "Tile Type",
          "options": [
            {
              "value": "template-collections-a",
              "label": "Grid Style - Theme Border"
            },
            {
              "value": "template-collections-b",
              "label": "Grid Style - No Border"
            },
            {
              "value": "template-collections-c",
              "label": "Single Tile"
            },
            {
              "value": "template-collections-d",
              "label": "Carousel Style - Product-Video-Card"
            },
            {
              "value": "template-collections-e",
              "label": "Carousel Style - Video-Card"
            },
            {
              "value": "template-collections-stories",
              "label": "Stories Style - Video-tile"
            },
            {
              "value": "template-collections-f",
              "label": "Carousel Style - Video-tile-product-info"
            }
          ],
          "default": "template-collections-b"
        },
      {
        "type": "range",
        "id": "tile-size",
        "label": "Tile size ( in percentage ) ",
        "default": 60,
        "step": 5,
        "min": 20,
        "max": 100
      },
      {
        "type": "range",
        "id": "tile-size-portrait",
        "label": "Tile size mobile ( in percentage ) ",
        "default": 60,
        "step": 5,
        "min": 20,
        "max": 100
      },
      {
        "type": "range",
        "id": "min-height",
        "label": "Minimum Height ( in pixels )",
        "default": 250,
        "step": 10,
        "min": 60,
        "max": 1000
      }
    ],
    "presets": [
      {
        "name": "Whatmore Collections"
      }
    ]
  }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  {% endjavascript %}