{% style %}
  #{{ block.id }}{
    --background-color: {{ block.settings.background_color }};
    --column-padding-mb: {{ block.settings.spacing_v_mb }}px {{ block.settings.spacing_h_mb }}px;
    --column-padding-tb: {{ block.settings.spacing_v_tb }}px {{ block.settings.spacing_h_tb }}px;
    --column-padding-dk: {{ block.settings.spacing_v_dk }}px {{ block.settings.spacing_h_dk }}px;
  }
{% endstyle %}
<div id="{{ block.id }}" class="hdt-column hdt-g-col hdt-g-col-{{ block.settings.column_mb }} md:hdt-g-col-{{ block.settings.column_tb }} lg:hdt-g-col-{{ block.settings.column_dk }} {{ block.settings.rounded }} hdt-text-{{ block.settings.alignment_mb }} md:hdt-text-{{ block.settings.alignment }} hdt-oh hdt-relative hdt-grid" {{ block.shopify_attributes }}>
    {%- liquid
      assign image_background = block.settings.background_image
      if image_background != blank
        echo image_background | image_url: width: image_background.width | image_tag: width: image_background.width, height: image_background.height, alt: image_background.alt, class: 'hdt-full-width-link hdt-w-full hdt-h-full hdt-object-cover hdt-pe-none', loading: 'lazy'
      endif
    -%}
    <div class="hdt-column_inner hdt-place-self-{{ block.settings.content_position_mb }} md:hdt-place-self-{{ block.settings.content_position }} hdt-text-{{ block.settings.alignment_mb }} md:hdt-text-{{ block.settings.alignment }}" style="position: relative;z-index:2;">
      {% content_for 'blocks' %}
    </div>
</div>
{% schema %}
  {
    "name": "Column",
    "tag": null,
    "blocks": [
      {
        "type": "heading"
      },
      {
        "type": "text"
      },
      {
        "type": "button"
      },
      {
        "type": "spacer"
      },
      {
        "type": "_newsletter"
      }, 
      {
        "type": "_countdown"
      },
      {
        "type": "_image"
      }, 
      {
        "type": "_socials"
      }
    ],
    "settings": [
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "select",
        "id": "column_dk",
        "label": "Column desktop",
        "options": [
          {
            "value": "0",
            "label": "Hidden"
          },
          {
            "value": "1",
            "label": "1/10 - 10%"
          },
          {
            "value": "2",
            "label": "2/10 - 20%"
          },
          {
            "value": "3",
            "label": "3/10 - 30%"
          },
          {
            "value": "4",
            "label": "4/10 - 40%" 
          },
          {
            "value": "5",
            "label": "5/10 - 50%"
          },
          {
            "value": "6",
            "label": "6/10 - 60%"
          },
          {
            "value": "7",
            "label": "7/10 - 70%"
          },
          {
            "value": "8",
            "label": "8/10 - 80%"
          },
          {
            "value": "9",
            "label": "9/10 - 90%"
          },
          {
            "value": "10",
            "label": "10/10 - 100%"
          },
        ],
        "default": "5"
      },
      {
        "type": "select",
        "id": "column_tb",
        "label": "Column tablet",
        "options": [
          {
            "value": "0",
            "label": "Hidden"
          },
          {
            "value": "1",
            "label": "1/10 - 10%"
          },
          {
            "value": "2",
            "label": "2/10 - 20%"
          },
          {
            "value": "3",
            "label": "3/10 - 30%"
          },
          {
            "value": "4",
            "label": "4/10 - 40%" 
          },
          {
            "value": "5",
            "label": "5/10 - 50%"
          },
          {
            "value": "6",
            "label": "6/10 - 60%"
          },
          {
            "value": "7",
            "label": "7/10 - 70%"
          },
          {
            "value": "8",
            "label": "8/10 - 80%"
          },
          {
            "value": "9",
            "label": "9/10 - 90%"
          },
          {
            "value": "10",
            "label": "10/10 - 100%"
          },
        ],
        "default": "5"
      },
      {
        "type": "select",
        "id": "column_mb",
        "label": "Column mobile",
        "options": [
          {
            "value": "0",
            "label": "Hidden"
          },
          /*{
            "value": "1",
            "label": "1/10 - 10%"
          },
          {
            "value": "2",
            "label": "2/10 - 20%"
          },
          {
            "value": "3",
            "label": "3/10 - 30%"
          },
          {
            "value": "4",
            "label": "4/10 - 40%" 
          },*/
          {
            "value": "5",
            "label": "5/10 - 50%"
          },
          /*{
            "value": "6",
            "label": "6/10 - 60%"
          },
          {
            "value": "7",
            "label": "7/10 - 70%"
          },
          {
            "value": "8",
            "label": "8/10 - 80%"
          },
          {
            "value": "9",
            "label": "9/10 - 90%"
          },*/
          {
            "value": "10",
            "label": "10/10 - 100%"
          },
        ],
        "default": "10"
      },
      {
        "type": "header",
        "content": "Spacing"
      },
      {
        "type": "range",
        "id": "spacing_h_dk",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding left/right",
        "default": 30
      },
      {
        "type": "range",
        "id": "spacing_v_dk",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top/bottom",
        "default": 30
      },
      {
        "type": "range",
        "id": "spacing_h_tb",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Padding left/right (tablet)",
        "default": 30
      },
      {
        "type": "range",
        "id": "spacing_v_tb",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Padding top/bottom (tablet)",
        "default": 30
      },
      {
        "type": "range",
        "id": "spacing_h_mb",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Padding left/right (mobile)",
        "default": 15
      },
      {
        "type": "range",
        "id": "spacing_v_mb",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Padding top/bottom (mobile)",
        "default": 15
      },
      {
        "type": "header",
        "content": "General"
      },
      {
        "type": "select",
        "id": "content_position",
        "label": "Content position",
        "options": [
          {
            "value": "start",
            "label": "t:sections.all.content_position.options.start"
          },
          {
            "value": "start-center",
            "label": "t:sections.all.content_position.options.start_center"
          },
          {
            "value": "start-end",
            "label": "t:sections.all.content_position.options.start_end"
          },
          {
            "value": "center",
            "label": "t:sections.all.content_position.options.center"
          },
          {
            "value": "center-start",
            "label": "t:sections.all.content_position.options.center_start"
          },
          {
            "value": "center-end",
            "label": "t:sections.all.content_position.options.center_end"
          },
          {
            "value": "end",
            "label": "t:sections.all.content_position.options.end"
          },
          {
            "value": "end-start",
            "label": "t:sections.all.content_position.options.end_start"
          },
          {
            "value": "end-center",
            "label": "t:sections.all.content_position.options.end_center"
          }
        ],
        "default": "center"
      },
      {
        "type": "select",
        "id": "content_position_mb",
        "label": "Content position mobile",
        "options": [
          {
            "value": "start",
            "label": "t:sections.all.content_position.options.start"
          },
          {
            "value": "start-center",
            "label": "t:sections.all.content_position.options.start_center"
          },
          {
            "value": "start-end",
            "label": "t:sections.all.content_position.options.start_end"
          },
          {
            "value": "center",
            "label": "t:sections.all.content_position.options.center"
          },
          {
            "value": "center-start",
            "label": "t:sections.all.content_position.options.center_start"
          },
          {
            "value": "center-end",
            "label": "t:sections.all.content_position.options.center_end"
          },
          {
            "value": "end",
            "label": "t:sections.all.content_position.options.end"
          },
          {
            "value": "end-start",
            "label": "t:sections.all.content_position.options.end_start"
          },
          {
            "value": "end-center",
            "label": "t:sections.all.content_position.options.end_center"
          }
        ],
        "default": "center"
      },
      {
        "type": "text_alignment",
        "id": "alignment",
        "label": "Text alignment",
        "default": "center"
      },
      {
        "type": "text_alignment",
        "id": "alignment_mb",
        "label": "Text alignment mobile",
        "default": "center"
      },
      {
        "type": "image_picker",
        "id": "background_image",
        "label": "Background image"
      },
      {
        "type": "color",
        "id": "background_color",
        "label": "Background color",
        "default": "#fff"
      },
      {
        "type": "select",
        "id": "rounded",
        "label": "Rounded",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "hdt-rounded-xs",
            "label": "Extra small"
          },
          {
            "value": "hdt-rounded-sm",
            "label": "Small"
          },
          {
            "value": "hdt-rounded",
            "label": "Medium"
          },
          {
            "value": "hdt-rounded-lg",
            "label": "Large"
          },
          {
            "value": "hdt-rounded-full",
            "label": "Full"
          }
        ],
        "default": "none"
      },
      
    ],
    "presets": [
      {
        "name": "Column",
        "blocks": [
          {
            "type": "heading"
          }
        ]
      }
    ]
  }
{% endschema %}
