{% # theme-check-disable MissingTemplate, ImgWidthAndHeight, ImgLazyLoading %}

{% assign sect = section.settings %}

{%liquid 
  assign container_visibility_settings = "" 
  if sect.hide_on_mobile == true
    assign container_visibility_settings = "hidden md:flex"
  endif
%}

{% style %}
  .section-{{ section.id }}-horizontal-padding {
    padding-right: {{ sect.mobile_horizontal_padding }}%;
    padding-left: {{ sect.mobile_horizontal_padding }}%;
  }

  @media screen and (min-width: 768px) {
    .section-{{ section.id }}-horizontal-padding {
      padding-right: {{ sect.tablet_horizontal_padding }}%;
      padding-left: {{ sect.tablet_horizontal_padding }}%;
    }
  }

  @media screen and (min-width: 1024px) {
    .section-{{ section.id }}-horizontal-padding {
      padding-right: {{ sect.desktop_horizontal_padding }}%;
      padding-left: {{ sect.desktop_horizontal_padding }}%;
    }
  }
{% endstyle %}

{% style %}
  .section-{{ section.id }}-vertical-padding {
    padding-top: {{ sect.mobile_top_padding }}px;
    padding-bottom: {{ sect.mobile_bottom_padding }}px;
  }

  @media screen and (min-width: 768px) {
    .section-{{ section.id }}-vertical-padding {
      padding-top: {{ sect.tablet_top_padding }}px;
      padding-bottom: {{ sect.tablet_bottom_padding }}px;
    }
  }

  @media screen and (min-width: 1024px) {
    .section-{{ section.id }}-vertical-padding {
      padding-top: {{ sect.desktop_top_padding }}px;
      padding-bottom: {{ sect.desktop_bottom_padding }}px;
    }
  }
{% endstyle %}

{% capture container_padding_settings %}
  section-{{ section.id }}-horizontal-padding section-{{ section.id }}-vertical-padding
{% endcapture %}

<div class="justify-center items-center {{ container_padding_settings | strip | strip_newlines }} {{ container_visibility_settings }}">
  <div class="flex flex-row w-full">
    <div class="relative flex h-2 w-2 rounded left-1" style="background-color: {{ sect.separator_color }}">&nbsp;</div>
    <div class="flex w-full grow justify-center items-center">
      <div class="w-full h-[2px]" style="background-color: {{ sect.separator_color }}"></div>
    </div>
    <div class="relative flex h-2 w-2 rounded right-1" style="background-color: {{ sect.separator_color }}">&nbsp;</div>
  </div>
</div>

{% schema %}
{
  "name": "Line separator",
  "class": "section",
  "settings": [
    {
      "type": "color",
      "id": "separator_color",
      "default": "rgba(100, 100, 100, 1)",
      "label": "Separator color"
    },
    {
      "type": "header",
      "content": "Horizontal Padding Settings"
    },
    {
      "type": "range",
      "id": "desktop_horizontal_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Horizontal padding (Desktop)",
      "default": 10
    },
    {
      "type": "range",
      "id": "tablet_horizontal_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Horizontal padding (Tablet)",
      "default": 10
    },
    {
      "type": "range",
      "id": "mobile_horizontal_padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Horizontal padding (Mobile)",
      "default": 10
    },
    {
      "type": "header",
      "content": "Vertical Padding Settings"
    },
    {
      "type": "range",
      "id": "desktop_top_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Top padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_top_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Top padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_top_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Top padding (Mobile)",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_bottom_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Bottom padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_bottom_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Bottom padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_bottom_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Bottom padding (Mobile)",
      "default": 0
    },
    {
      "type": "header",
      "content": "Visibility Settings"
    },
    {
      "type": "checkbox",
      "id": "hide_on_mobile",
      "label": "Hide on mobile layout",
      "default": false
    }
  ],
  "blocks": [
  ],
  "presets": [
    {
      "name": "Line separator"
    }
  ]
}
{% endschema %}