{% assign min_height = section.settings.min-height %}

<div class="whatmore-base" style="min-height:{{ min_height }}px">
      <div id="whatmoreShopId" data-wh="{{ shop.id }}"> </div>

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

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

      {%- if section.settings.ui-theme  -%}
        <div id="whatmoreUITheme" data-wh="{{ section.settings.ui-theme }}"> </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="banner"></div>
      <div class="whatmore-render-root"></div>
    
  </div>
  
  
  {% schema %}
    {
      "name": "Whatmore Banners",
      "tag": "section",
      "class": "section",
      "settings": [
        {
          "type": "select",
          "id": "template-type",
          "label": "Tile Type",
          "options": [
            {
              "value": "template-banner-a",
              "label": "Banner Video - Plain"
            }
          ],
          "default": "template-banner-a"
        },
        {
          "label": "UI Theme",
          "id": "ui-theme",
          "type": "select",
          "options": [
            {
              "value": "round",
              "label": "Rounded Corners"
            },
            {
              "value": "square",
              "label": "Squared Corners"
            }
          ],
          "default": "round"
        },
        {
          "type": "range",
          "id": "banner-video-tile-size",
          "label": "Banner Video Size ( in percentage ) ",
          "default": 80,
          "step": 5,
          "min": 10,
          "max": 100
        },
        {
	        "type": "range",
	        "id": "min-height",
	        "label": "Minimum Height ( in pixels )",
	        "default": 450,
	        "step": 10,
	        "min": 100,
	        "max": 1000
	      }
      ],
      "presets": [
        {
          "name": "Whatmore Banners"
        }
      ]
  }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  {% endjavascript %}