{% doc %}
  @prompt
    Header image that is clickable, Make a mobile specific image as well, I want the desktop image to fit, no white line at the bottom
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-header-image-{{ ai_gen_id }} {
    display: block;
    width: 100%;
    position: relative;
    line-height: 0;
  }

  .ai-header-image-link-{{ ai_gen_id }} {
    display: block;
    width: 100%;
    text-decoration: none;
    line-height: 0;
  }

  .ai-header-image-wrapper-{{ ai_gen_id }} {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
  }

  .ai-header-image-img-{{ ai_gen_id }} {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    vertical-align: top;
  }

  .ai-header-image-desktop-{{ ai_gen_id }} {
    display: none;
    line-height: 0;
  }

  .ai-header-image-mobile-{{ ai_gen_id }} {
    display: block;
    line-height: 0;
  }

  .ai-header-image-placeholder-{{ ai_gen_id }} {
    width: 100%;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 300px;
  }

  .ai-header-image-placeholder-{{ ai_gen_id }} svg {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
    display: block;
  }

  .ai-header-image-empty-state-{{ ai_gen_id }} {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    font-size: 14px;
    color: #666;
    text-align: center;
    pointer-events: none;
  }

  @media screen and (min-width: 750px) {
    .ai-header-image-{{ ai_gen_id }} {
      width: {{ block.settings.desktop_width_percent }}%;
    }

    .ai-header-image-wrapper-{{ ai_gen_id }} {
      height: {{ block.settings.desktop_height }}px;
    }

    .ai-header-image-desktop-{{ ai_gen_id }} {
      display: block;
      height: 100%;
    }

    .ai-header-image-mobile-{{ ai_gen_id }} {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .ai-header-image-wrapper-{{ ai_gen_id }} {
      height: {{ block.settings.mobile_height }}px;
    }

    .ai-header-image-mobile-{{ ai_gen_id }} {
      height: 100%;
    }
  }
{% endstyle %}

<clickable-header-image-{{ ai_gen_id }}
  class="ai-header-image-{{ ai_gen_id }}"
  {{ block.shopify_attributes }}
>
  {% if block.settings.link != blank %}
    <a
      href="{{ block.settings.link }}"
      class="ai-header-image-link-{{ ai_gen_id }}"
      {% if block.settings.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
    >
      <div class="ai-header-image-wrapper-{{ ai_gen_id }}">
        <div class="ai-header-image-desktop-{{ ai_gen_id }}">
          {% if block.settings.desktop_image %}
            <img
              src="{{ block.settings.desktop_image | image_url: width: 2000 }}"
              alt="{{ block.settings.desktop_image.alt | escape }}"
              loading="lazy"
              width="{{ block.settings.desktop_image.width }}"
              height="{{ block.settings.desktop_image.height }}"
              class="ai-header-image-img-{{ ai_gen_id }}"
            >
          {% else %}
            <div class="ai-header-image-placeholder-{{ ai_gen_id }}">
              {{ 'hero-apparel-1' | placeholder_svg_tag }}
              <div class="ai-header-image-empty-state-{{ ai_gen_id }}">
                Next, add a desktop image
              </div>
            </div>
          {% endif %}
        </div>

        <div class="ai-header-image-mobile-{{ ai_gen_id }}">
          {% if block.settings.mobile_image %}
            <img
              src="{{ block.settings.mobile_image | image_url: width: 1000 }}"
              alt="{{ block.settings.mobile_image.alt | escape }}"
              loading="lazy"
              width="{{ block.settings.mobile_image.width }}"
              height="{{ block.settings.mobile_image.height }}"
              class="ai-header-image-img-{{ ai_gen_id }}"
            >
          {% elsif block.settings.desktop_image %}
            <img
              src="{{ block.settings.desktop_image | image_url: width: 1000 }}"
              alt="{{ block.settings.desktop_image.alt | escape }}"
              loading="lazy"
              width="{{ block.settings.desktop_image.width }}"
              height="{{ block.settings.desktop_image.height }}"
              class="ai-header-image-img-{{ ai_gen_id }}"
            >
          {% else %}
            <div class="ai-header-image-placeholder-{{ ai_gen_id }}">
              {{ 'hero-apparel-1' | placeholder_svg_tag }}
              <div class="ai-header-image-empty-state-{{ ai_gen_id }}">
                Next, add a mobile image
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </a>
  {% else %}
    <div class="ai-header-image-wrapper-{{ ai_gen_id }}">
      <div class="ai-header-image-desktop-{{ ai_gen_id }}">
        {% if block.settings.desktop_image %}
          <img
            src="{{ block.settings.desktop_image | image_url: width: 2000 }}"
            alt="{{ block.settings.desktop_image.alt | escape }}"
            loading="lazy"
            width="{{ block.settings.desktop_image.width }}"
            height="{{ block.settings.desktop_image.height }}"
            class="ai-header-image-img-{{ ai_gen_id }}"
          >
        {% else %}
          <div class="ai-header-image-placeholder-{{ ai_gen_id }}">
            {{ 'hero-apparel-1' | placeholder_svg_tag }}
            <div class="ai-header-image-empty-state-{{ ai_gen_id }}">
              Next, add a desktop image and link
            </div>
          </div>
        {% endif %}
      </div>

      <div class="ai-header-image-mobile-{{ ai_gen_id }}">
        {% if block.settings.mobile_image %}
          <img
            src="{{ block.settings.mobile_image | image_url: width: 1000 }}"
            alt="{{ block.settings.mobile_image.alt | escape }}"
            loading="lazy"
            width="{{ block.settings.mobile_image.width }}"
            height="{{ block.settings.mobile_image.height }}"
            class="ai-header-image-img-{{ ai_gen_id }}"
          >
        {% elsif block.settings.desktop_image %}
          <img
            src="{{ block.settings.desktop_image | image_url: width: 1000 }}"
            alt="{{ block.settings.desktop_image.alt | escape }}"
            loading="lazy"
            width="{{ block.settings.desktop_image.width }}"
            height="{{ block.settings.desktop_image.height }}"
            class="ai-header-image-img-{{ ai_gen_id }}"
          >
        {% else %}
          <div class="ai-header-image-placeholder-{{ ai_gen_id }}">
            {{ 'hero-apparel-1' | placeholder_svg_tag }}
            <div class="ai-header-image-empty-state-{{ ai_gen_id }}">
              Next, add a mobile image and link
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}
</clickable-header-image-{{ ai_gen_id }}>

<script>
  (function() {
    class ClickableHeaderImage{{ ai_gen_id }} extends HTMLElement {
      constructor() {
        super();
      }
    }

    customElements.define('clickable-header-image-{{ ai_gen_id }}', ClickableHeaderImage{{ ai_gen_id }});
  })();
</script>

{% schema %}
{
  "name": "Clickable header image",
  "tag": null,
  "settings": [
    {
      "type": "header",
      "content": "Link"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "checkbox",
      "id": "open_in_new_tab",
      "label": "Open link in new tab",
      "default": false
    },
    {
      "type": "header",
      "content": "Desktop"
    },
    {
      "type": "image_picker",
      "id": "desktop_image",
      "label": "Desktop image"
    },
    {
      "type": "range",
      "id": "desktop_width_percent",
      "label": "Desktop width",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "desktop_height",
      "label": "Desktop height",
      "min": 200,
      "max": 800,
      "step": 50,
      "unit": "px",
      "default": 400
    },
    {
      "type": "header",
      "content": "Mobile"
    },
    {
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile image"
    },
    {
      "type": "paragraph",
      "content": "If no mobile image is selected, the desktop image will be used."
    },
    {
      "type": "range",
      "id": "mobile_height",
      "label": "Mobile height",
      "min": 150,
      "max": 600,
      "step": 50,
      "unit": "px",
      "default": 300
    }
  ],
  "presets": [
    {
      "name": "Clickable header image"
    }
  ]
}
{% endschema %}