{% comment %}
  Renders icon with text block

  Accepts:
  - block: {Object} passes in the block information.

  Usage:
  {% render 'icon-with-text-row',
    block: block
  %}
{% endcomment %}
{%- liquid
  assign heading_1_empty = false
  assign heading_2_empty = false
  assign heading_3_empty = false
  assign heading_4_empty = false
  assign text_only_all_items = true
  assign totalBlocks = 0

  if block.settings.heading_1 == empty
    assign heading_1_empty = true
  endif

  if block.settings.heading_2 == empty
    assign heading_2_empty = true
  endif

  if block.settings.heading_3 == empty
    assign heading_3_empty = true
  endif

  if block.settings.heading_4 == empty
    assign heading_4_empty = true
  endif

  if block.settings.icon_1_fill == true or block.settings.image_1 != blank
    assign totalBlocks = totalBlocks | plus: 1
  endif
  if block.settings.icon_2_fill == true or block.settings.image_2 != blank
    assign totalBlocks = totalBlocks | plus: 1
  endif
  if block.settings.icon_3_fill == true or block.settings.image_3 != blank
    assign totalBlocks = totalBlocks | plus: 1
  endif
  if block.settings.icon_4_fill == true or block.settings.image_4 != blank
    assign totalBlocks = totalBlocks | plus: 1
  endif

  if heading_1_empty == false and block.settings.icon_1 != 'none' or block.settings.image_1 != null
    assign text_only_all_items = false
  elsif heading_2_empty == false and block.settings.icon_2 != 'none' or block.settings.image_2 != null
    assign text_only_all_items = false
  elsif heading_3_empty == false and block.settings.icon_3 != 'none' or block.settings.image_3 != null
    assign text_only_all_items = false
  elsif heading_4_empty == false and block.settings.icon_4 != 'none' or block.settings.image_4 != null
    assign text_only_all_items = false
  endif
-%}
<ul
  class="icon-with-text-row icon-with-text-row--icon-{{ block.settings.icon_size }} icon-with-text-row--{{ block.settings.layout }} list-unstyled{% if text_only_all_items %} icon-with-text-row--text-only{% endif %} icon-with-text-row-blocks--{{ totalBlocks }} {{ block.settings.visibility }}"

  style="--desktop-icon-size: {{ block.settings.desktop_icon_size | divided_by: 10.0 }}rem; --desktop-spacing: {{ block.settings.desktop_spacing | divided_by: 10.0 }}rem; --desktop-text-size: {{ block.settings.desktop_text_size | divided_by: 10.0 }}rem; --mobile-icon-size: {{ block.settings.mobile_icon_size | divided_by: 10.0 }}rem; --mobile-spacing: {{ block.settings.mobile_spacing | divided_by: 10.0 }}rem; --mobile-text-size: {{ block.settings.mobile_text_size | divided_by: 10.0 }}rem;--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
  {{ block.shopify_attributes }}
>
  {%- unless heading_1_empty -%}
    <li class="icon-with-text-row__item">
      {%- if block.settings.image_1 == null -%}
        {% render 'material-icon', icon: block.settings.icon_1, filled: block.settings.icon_1_fill, custom_color: block.settings.icon_color %}
      {%- else -%}
        <img
          src="{{ block.settings.image_1 | image_url }}"
          {% if block.settings.image_1.alt != blank %}
            alt="{{ block.settings.image_1.alt | escape }}"
          {% else %}
            role="presentation"
          {% endif %}
          height="auto"
          width="auto"
          loading="lazy"
        >
      {%- endif -%}
      <span class="h4">
        {{- block.settings.heading_1 -}}
      </span>
    </li>
  {%- endunless -%}
  {%- unless heading_2_empty -%}
    <li class="icon-with-text-row__item">
      {%- if block.settings.image_2 == null -%}
        {% render 'material-icon', icon: block.settings.icon_2, filled: block.settings.icon_2_fill, custom_color: block.settings.icon_color %}
      {%- else -%}
        <img
          src="{{ block.settings.image_2 | image_url }}"
          {% if block.settings.image_2.alt != blank %}
            alt="{{ block.settings.image_2.alt | escape }}"
          {% else %}
            role="presentation"
          {% endif %}
          height="auto"
          width="auto"
          loading="lazy"
        >
      {%- endif -%}
      <span class="h4">
        {{- block.settings.heading_2 -}}
      </span>
    </li>
  {%- endunless -%}
  {%- unless heading_3_empty -%}
    <li class="icon-with-text-row__item">
      {%- if block.settings.image_3 == null -%}
        {% render 'material-icon', icon: block.settings.icon_3, filled: block.settings.icon_3_fill, custom_color: block.settings.icon_color %}
      {%- else -%}
        <img
          src="{{ block.settings.image_3 | image_url }}"
          {% if block.settings.image_3.alt != blank %}
            alt="{{ block.settings.image_3.alt | escape }}"
          {% else %}
            role="presentation"
          {% endif %}
          height="auto"
          width="auto"
          loading="lazy"
        >
      {%- endif -%}
      <span class="h4">
        {{- block.settings.heading_3 -}}
      </span>
    </li>
  {%- endunless -%}
  {%- unless heading_4_empty -%}
    <li class="icon-with-text-row__item">
      {%- if block.settings.image_4 == null -%}
        {% render 'material-icon', icon: block.settings.icon_4, filled: block.settings.icon_4_fill, custom_color: block.settings.icon_color %}
      {%- else -%}
        <img
          src="{{ block.settings.image_4 | image_url }}"
          {% if block.settings.image_4.alt != blank %}
            alt="{{ block.settings.image_4.alt | escape }}"
          {% else %}
            role="presentation"
          {% endif %}
          height="auto"
          width="auto"
          loading="lazy"
        >
      {%- endif -%}
      <span class="h4">
        {{- block.settings.heading_4 -}}
      </span>
    </li>
  {%- endunless -%}
</ul>



<style>
.icon-with-text-row {
  --icon-size: var(--desktop-icon-size);
  --icon-spacing: var(--desktop-spacing);
  --text-size: var(--desktop-text-size);
}
.icon-with-text-row--horizontal {
  column-gap: 3rem;

  display: grid;
  gap: 20px;
}
.icon-with-text-row--horizontal.icon-with-text-row-blocks--1 {
  grid-template-columns: 1fr;
}
.icon-with-text-row--horizontal.icon-with-text-row-blocks--2 {
  grid-template-columns: 1fr 1fr;
}
.icon-with-text-row--horizontal.icon-with-text-row-blocks--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.icon-with-text-row--horizontal.icon-with-text-row-blocks--4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.icon-with-text-row--horizontal .material-icon,
.icon-with-text-row--horizontal img {
  margin-bottom: var(--icon-spacing);
}
.icon-with-text-row--vertical .material-icon,
.icon-with-text-row--vertical img {
  margin-right: var(--icon-spacing);
}
.icon-with-text-row img {
  height: var(--icon-size);
  width: auto;
}
.icon-with-text-row .material-icon {
  font-size: var(--icon-size);
}
.icon-with-text-row .h4 {
  text-align: center;
  font-size: var(--text-size);
}
.icon-with-text-row__item {
  display: flex;
  align-items: center;
}
.icon-with-text-row--horizontal .icon-with-text-row__item {
  flex-direction: column;
  /* width: 33%; */
}
.icon-with-text-row--vertical .icon-with-text-row__item {
  margin-bottom: calc(var(--icon-size) / 3);
}
@media screen and (max-width: 750px) {
  .icon-with-text-row {
    --icon-size: var(--mobile-icon-size);
    --icon-spacing: var(--mobile-spacing);
    --text-size: var(--mobile-text-size);
  }
}
@media screen and (max-width: 500px) {
  .icon-with-text-row--horizontal {
    column-gap: 1.5rem;
    justify-content: center;
  }
  .icon-with-text-row--horizontal.icon-with-text-row-blocks--4 {
    grid-template-columns: 1fr 1fr;
  }
}




</style>