<%
var attr = (typeof attr === 'undefined') ? '' : attr;

// define
const DEFINE = (typeof define === 'undefined') ? '' : define

const className = attr.className ? ` class="${attr.className}"` : ''
const lazy = attr.lazy ? ` data-lazy` : ''
const breakpointLg = attr.breakpoint ? attr.breakpoint.lg : DEFINE.BREAKPOINTLG
const breakpointSm = attr.breakpoint ? attr.breakpoint.sm : DEFINE.BREAKPOINTSM
%>

<picture<%- className %>>
  <% if(!attr.isLgOnly) { %>
  <source media="(max-width: <%= breakpointSm %>)" srcset="<%= sitePath + attr.src %>__sm.<%= attr.ext %> 1x,
  <%= sitePath + attr.src %>__sm@2x.<%= attr.ext %> 2x,
  <%= sitePath + attr.src %>__sm@3x.<%= attr.ext %> 3x">
  <% } %>

  <% if(!attr.lg2xOnly && !attr.lg1xOnly) { %>
    <source media="(min-width: <%= breakpointLg %>)" srcset="<%= sitePath + attr.src %>__lg.<%= attr.ext %> 1x,
  <%= sitePath + attr.src %>__lg@2x.<%= attr.ext %> 2x">
  <img src="<%= sitePath + attr.src %>__lg.<%= attr.ext %>" alt="<%= attr.alt %>"<%- lazy %>>
  <% } %>

  <% if(attr.lg2xOnly) { %>
    <img src="<%= sitePath + attr.src %>__lg@2x.<%= attr.ext %>" alt="<%= attr.alt %>"<%- lazy %>>
  <% } %>

  <% if(attr.lg1xOnly) { %>
    <img src="<%= sitePath + attr.src %>__lg.<%= attr.ext %>" alt="<%= attr.alt %>"<%- lazy %>>
  <% } %>
</picture>
