{#
 # SEO Macros - Kohinos
 # Macros for SEO-friendly image rendering with lazy loading
 #}

{#
 # Lazy loading image macro
 # @param src - Image source URL
 # @param alt - Alt text (required for accessibility)
 # @param class - CSS classes (optional)
 # @param width - Image width (optional but recommended)
 # @param height - Image height (optional but recommended)
 # @param loading - Loading attribute: lazy, eager (default: lazy)
 #}
{% macro lazy_img(src, alt, class, width, height, loading) %}
<img src="{{ src }}"
     alt="{{ alt|default('')|e }}"
     {% if class %}class="{{ class }}"{% endif %}
     {% if width %}width="{{ width }}"{% endif %}
     {% if height %}height="{{ height }}"{% endif %}
     loading="{{ loading|default('lazy') }}"
     decoding="async">
{%- endmacro %}

{#
 # Responsive image macro with srcset
 # @param src - Default image source
 # @param alt - Alt text
 # @param srcset - Srcset attribute (e.g., "image-320.jpg 320w, image-640.jpg 640w")
 # @param sizes - Sizes attribute (e.g., "(max-width: 600px) 100vw, 50vw")
 # @param class - CSS classes
 # @param loading - Loading attribute
 #}
{% macro responsive_img(src, alt, srcset, sizes, class, loading) %}
<img src="{{ src }}"
     alt="{{ alt|default('')|e }}"
     {% if srcset %}srcset="{{ srcset }}"{% endif %}
     {% if sizes %}sizes="{{ sizes }}"{% endif %}
     {% if class %}class="{{ class }}"{% endif %}
     loading="{{ loading|default('lazy') }}"
     decoding="async">
{%- endmacro %}

{#
 # Picture element with WebP support
 # @param webp_src - WebP image source
 # @param fallback_src - Fallback image source (JPEG/PNG)
 # @param alt - Alt text
 # @param class - CSS classes
 # @param width - Image width
 # @param height - Image height
 #}
{% macro picture_webp(webp_src, fallback_src, alt, class, width, height) %}
<picture>
    {% if webp_src %}
    <source srcset="{{ webp_src }}" type="image/webp">
    {% endif %}
    <img src="{{ fallback_src }}"
         alt="{{ alt|default('')|e }}"
         {% if class %}class="{{ class }}"{% endif %}
         {% if width %}width="{{ width }}"{% endif %}
         {% if height %}height="{{ height }}"{% endif %}
         loading="lazy"
         decoding="async">
</picture>
{%- endmacro %}