<%
if (opt.img) {
  const { width, height } = _.tryImageSize(opt.img, opt)
  const sources = [{ src: opt.img }]
  if (opt.mobile_img) {
    sources[0].media = '(min-width: 576px)'
    const { width, height } = _.tryImageSize(opt.mobile_img)
    sources.push({
      src: opt.mobile_img,
      media: '(min-width: 100px)',
      width,
      height
    })
  }
  sources.forEach(source => {
    if (source.src.endsWith('.webp')) {
      source.type = 'image/webp'
      sources.push({
        src: source.src.replace('.webp', '.png'),
        media: source.media,
        type: 'image/png'
      })
    }
  })
  %>

  <div class="banner">
    <a
      href="<%= opt.link || 'javascript:;' %>"
      aria-label="<%= opt.alt %>"
    >
      <picture
        <% if (opt.sync_load) { %>
          class="img-fluid"
        <% } else { %>
          class="lozad fade img-fluid"
          data-iesrc="<%= _.assetsPrefix || '' %><%= opt.img.replace('.webp', '.png') %>"
          data-alt="<%= opt.alt %>"
        <% } %>
        <% if (!opt.height_auto && width) { %>
          data-width="<%= width %>"
          data-height="<%= height %>"
        <% } %>
      >
        <% sources.forEach(({ src, media, type, width, height }) => { %>
          <source
            srcset="<%= _.assetsPrefix || '' %><%= src %>"
            media="<%- media %>"
            <% if (type) { %>
              type="<%- type %>"
            <% } %>
            <% if (width) { %>
              width="<%= width %>"
              height="<%= height %>"
            <% } %>
          >
        <% }) %>
        <% if (opt.sync_load) { %>
          <img
            src="<%= _.assetsPrefix || '' %><%= opt.img.replace('.webp', '.png') %>"
            alt="<%= opt.alt %>"
            <% if (width) { %>
              width="<%= width %>"
              height="<%= height %>"
            <% } %>
          >
        <% } %>
      </picture>
    </a>
  </div>
  <%
}
%>
