<div class="whatmore-base" style="position: relative; overflow: hidden; min-height:{{ section.settings.min-height }}px">
  <div id="whatmoreShopId" data-wh="{{ shop.id }}"></div>

  <div id="whatmoreExtensionType" data-wh="product"></div>

  {%- if product -%}
    <div id="whatmoreProductId" data-wh="{{ product.id }}"></div>
  {%- else -%}
    <div id="whatmoreProductId" data-wh=""></div>
  {%- endif -%}

  {%- if section.settings.landscape-padding -%}
    <div id="whatmoreLandscapePadding" data-wh="{{ section.settings.landscape-padding }}"></div>
  {%- endif -%}

  {%- if section.settings.top-bottom-padding -%}
    <div id="whatmoreTopBottomPadding" data-wh="{{ section.settings.top-bottom-padding }}"></div>
  {%- endif -%}

  {%- if section.settings.scroll-video-tile-size -%}
    <div id="whatmoreVideoTileSize" data-wh="{{ section.settings.scroll-video-tile-size }}"></div>
  {%- endif -%}

  {%- if section.settings.scroll-video-tile-size-portrait -%}
    <div id="whatmoreVideoTileSizePortrait" data-wh="{{ section.settings.scroll-video-tile-size-portrait }}"></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="carousel"></div>
  <div class="whatmore-render-root"></div>
</div>

{% schema %}
{
  "name": "Whatmore Product Carousel",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "template-type",
      "label": "Tile Type",
      "options": [
        { "value": "template-a",     "label": "Video-Card" },
        { "value": "template-feed-a","label": "Video-Card feed" },
        { "value": "template-a-1",   "label": "Video-Card with see-more option" },
        { "value": "template-b",     "label": "Product-Video-Card" },
        { "value": "template-c",     "label": "Grid Style - Theme Border" },
        { "value": "template-d",     "label": "Grid Style - No Border" },
        { "value": "template-e",     "label": "Single Tile" },
        { "value": "template-f",     "label": "Video-card with product-info" },
        { "value": "template-g",     "label": "Video-card with text-overlay" },
        { "value": "template-h",     "label": "Focussed-video-card with product-info" }
      ],
      "default": "template-a"
    },
    {
      "type": "number",
      "id": "landscape-padding",
      "label": "Horizontal padding in Desktop/Laptop",
      "default": 40
    },
    {
      "type": "number",
      "id": "top-bottom-padding",
      "label": "Vertical padding",
      "default": 20
    },
    {
      "type": "range",
      "id": "scroll-video-tile-size",
      "label": "Scroll-Video-Tile size (in percentage)",
      "default": 80,
      "step": 5,
      "min": 40,
      "max": 200
    },
    {
      "type": "range",
      "id": "scroll-video-tile-size-portrait",
      "label": "Scroll-Video-Tile size mobile (in percentage)",
      "default": 80,
      "step": 5,
      "min": 40,
      "max": 200
    },
    {
      "type": "range",
      "id": "min-height",
      "label": "Minimum Height (in pixels)",
      "default": 200,
      "step": 10,
      "min": 0,
      "max": 1000
    }
  ],
  "presets": [
    {
      "name": "Whatmore Product Carousel"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}