<!-- sections/main-heading.liquid -->
{%- liquid
  assign page_type = request.page_type
  if page_type contains 'customers'
    assign page_type = 'customers'
  endif
-%}
{%- style -%}#shopify-section-{{ section.id }} { --section-pt:{{ section.settings.padding_top }}px; --section-pb:{{ section.settings.padding_bottom }}px; --section-prate:{{ section.settings.padding_rate }}; }.hdt-spacing_hd{gap:{{section.settings.spacing_hd}}px}.hdt-heading-template .hdt-heading-banner img{width:100%;height:100%;object-fit:cover;object-position:center}.hdt-heading-template .hdt-main-heading{z-index:2}.hdt-breadcrumb ul svg{margin:0 10px}{%- if section.settings.spacing_hd>=30 -%}@media(max-width:767px){.section-{{section.id}}.hdt-spacing_hd{gap:20px}}{%- endif -%}{%- endstyle -%}
<div class="hdt-heading-template hdt-section-spacing hdt-s-gradient section-{{ section.id }} hdt-relative" color-scheme="{{ section.settings.color_scheme }}">
  <div class="hdt-heading-banner hdt-full-width-link">
    {%- if section.settings.image != blank -%}
      {{ section.settings.image | image_url: width: section.settings.image.width | image_tag: loading: 'lazy', width: section.settings.image.width, height: section.settings.image.height, sizes: "100vw", widths: '375,550,750,1100,1500,1780,1920,2000,3000,3840' }}
    {%- endif -%}
  </div>
  <div class="hdt-heading-full-page">
    {%- render 'heading_page' -%}
  </div>
</div>
{% schema %}
{
  "name": "t:sections.heading-page.name",
  "class": "hdt-section hdt-section-heading hdt-main-heading",
  "tag":"section",
  "disabled_on": {
    "groups":[
      "*"
    ],
    "templates": [
      "index"
    ]
  },
  "settings": [
    {
      "type": "header",
      "content": "t:sections.heading-page.settings.header_options"
    },
    {
      "type": "image_picker",
      "label": "t:sections.heading-page.settings.background_heading",
      "id": "image"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "range",
      "id": "spacing_hd",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "t:sections.heading-page.settings.spacing_hd.label",
      "default": 5,
      "info": "t:sections.heading-page.settings.spacing_hd.info"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 50,
      "max": 150,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 88
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 50,
      "max": 150,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 88
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    }
  ],
  "blocks": [
    {
      "type": "1",
      "name": "Page heading",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "t:sections.heading-page.settings.heading.label"
        },
        {
          "type": "checkbox",
          "id": "hidden_on_mobile",
          "label": "Hidden on mobile",
          "default": false
        },
        {
          "type": "select",
          "id": "heading_size",
          "label": "Size",
          "options": [
            {
              "value": "base",
              "label": "Base size"
            },
            {
              "value": "h6",
              "label": "H6 size"
            },
            {
              "value": "h5",
              "label": "H5 size"
            },
            {
              "value": "h4",
              "label": "H4 size"
            },
            {
              "value": "h3",
              "label": "H3 size"
            },
            {
              "value": "h2",
              "label": "H2 size"
            },
            {
              "value": "h1",
              "label": "H1 size"
            },
            {
              "value": "h0",
              "label": "H0 size"
            },
            {
              "value": "h_custom",
              "label": "Custom size inline"
            }
          ],
          "default": "h2"
        },
        {
          "type": "select",
          "id": "text_color",
          "options": [
            {
              "value": "hdt-s-text",
              "label": "Default"
            },
            {
              "value": "hdt-text-secondary",
              "label": "Secondary"
            },
            {
              "value": "hdt-text-body-tertiary",
              "label": "Tertiary"
            },
            {
              "value": "hdt-text-primary",
              "label": "Accent"
            }
          ],
          "label": "Text color",
          "default": "hdt-s-text"
        },
        {
          "type": "header",
          "content": "Custom size options"
        },
        {
          "type": "range",
          "id": "font_size_heading_lg",
          "min": 10,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Font size",
          "default": 50
        },
        {
          "type": "range",
          "id": "font_size_heading_md",
          "min": 10,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Tablet font size",
          "default": 30
        },
        {
          "type": "range",
          "id": "font_size_heading",
          "min": 10,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Mobile font size",
          "default": 24
        },
        {
          "type": "range",
          "id": "font_weight_heading",
          "min": 100,
          "max": 900,
          "step": 100,
          "label": "Font weight",
          "default": 600
        },
        {
          "type": "range",
          "id": "letter_spacing_heading",
          "min": -10,
          "max": 10,
          "step": 0.2,
          "label": "Letter spacing (in pixel)",
          "default": 0
        }
      ]
    },
    {
      "type": "2",
      "name": "Breadcrumb",
      "limit": 1
    }
  ],
  "presets": [
    {
      "name": "Heading",
      "blocks": [
        {
          "type": "1"
        },
        {
          "type": "2"
        }
      ]
    }
  ]
}
{% endschema %}
