<div class="hdt-banner_masonry__item" style="--item-column-span: {{ block.settings.col_w }}; --item-row-span: {{ block.settings.row_count }};--item-column-span-mb: {{ block.settings.col_w_mb }}; --item-row-span-mb: {{ block.settings.row_count_mb }};--content-pd-x: {{ block.settings.content_pd_x }}px;--content-pd-y:{{ block.settings.content_pd_y }}px;" color-scheme="{{ block.settings.color_scheme }}" {{ block.shopify_attributes }}>
  <div class="hdt-item_inner hdt-rounded hdt-rounded-f" {% if block.settings.image_mb.presentation.focal_point != blank %} style="--object-pos-mb: {{ block.settings.image_mb.presentation.focal_point }}"{% endif %}>
    <a class="hdt-full-width-link" {% if block.settings.banner_url == blank %}
      role="link" disabled="true"
    {% else %}
      href="{{ block.settings.banner_url }}" 
    {% endif %} target="{% if block.settings.banner_target %}_blank{% else %}_self{% endif %}">
    </a>
    {% content_for 'block', type: '_media', id: 'banner-masonry-image' %}
    <div class="hdt-content_wrap hdt-grid hdt-full-width-link hdt-oh{% unless request.design_mode %} hdt-pe-none{% endunless %}">
      <div class="hdt-content hdt-grid hdt-place-self-{{ block.settings.content_position_mb }} md:hdt-place-self-{{ block.settings.content_position }}">
        <div class="hdt-text-{{ block.settings.alignment_mb }} md:hdt-text-{{ block.settings.alignment }}">
          {% content_for "blocks" %}
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Item masonry",
    "tag": null,
    "blocks": [
      {
        "type": "heading"
      },
      {
        "type": "text"
      },
      {
        "type": "button"
      },
      {
        "type": "spacer"
      },
      {
        "type": "paragraph"
      }
    ],
    "settings": [
      {
        "type": "color_scheme",
        "id": "color_scheme",
        "label": "t:sections.banner.blocks.common.color"
      },
      {
        "type": "url",
        "id": "banner_url",
        "label": "t:sections.banner.blocks.common.banner_url"
      },
      {
        "type": "checkbox",
        "id": "banner_target",
        "label": "t:sections.all.button.settings.target.label",
        "default": false
      },
      {
        "type": "range",
        "id": "content_pd_y",
        "min": 15,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "t:sections.banner.blocks.common.content_pd_y",
        "default": 15
      },
      {
        "type": "range",
        "id": "content_pd_x",
        "min": 15,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "t:sections.banner.blocks.common.content_pd_x",
        "default": 15
      },
      {
        "type": "header",
        "content": "t:sections.banner.settings.desktop"
      },
      {
        "type": "select",
        "id": "col_w",
        "label": "t:sections.banner.blocks.common.col_w",
        "options": [
          {
            "value": "3",
            "label": "25%"
          },
          {
            "value": "4",
            "label": "33%"
          },
          {
            "value": "6",
            "label": "50%"
          },
          {
            "value": "8",
            "label": "67%"
          },
          {
            "value": "9",
            "label": "75%"
          },
          {
            "value": "12",
            "label": "100%"
          }
        ],
        "default": "6"
      },
      {
        "type": "range",
        "id": "row_count",
        "label": "t:sections.banner.blocks.common.row_count",
        "min": 1,
        "max": 3,
        "step": 1,
        "default": 1
      },
      {
        "type": "select",
        "id": "content_position",
        "label": "t:sections.all.content_position.label",
        "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": "t:settings_schema.global.settings.text_alignment.label",
        "default": "center"
      },
      {
        "type": "header",
        "content": "t:sections.banner.settings.mobile"
      },
      {
        "type": "select",
        "id": "col_w_mb",
        "label": "t:sections.banner.blocks.common.col_w",
        "options": [
          {
            "value": "1",
            "label": "50%"
          },
          {
            "value": "2",
            "label": "100%"
          }
        ],
        "default": "2"
      },
      {
        "type": "range",
        "id": "row_count_mb",
        "label": "t:sections.banner.blocks.common.row_count",
        "min": 1,
        "max": 3,
        "step": 1,
        "default": 1
      },
      {
        "type": "select",
        "id": "content_position_mb",
        "label": "t:sections.all.content_position.label",
        "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_mb",
        "label": "t:settings_schema.global.settings.text_alignment.label",
        "default": "center"
      }
    ],
    "presets": [
      {
        "name": "Item masonry",
        "blocks": [
          {
            "type": "text"
          }
        ]
      }
    ]
  }
{% endschema %}
