{# Une photo servie en WebP, dans la largeur qui convient à l'écran.

   Tant qu'un média n'a pas de fichier — le catalogue se construit, beaucoup de
   fiches attendent leur photo — on dessine un motif à la place plutôt qu'un
   cadre vide : la page garde sa composition, et l'absence se voit sans crier. #}
{% set ratio = ratio|default('4 / 3') %}
{% set filter = filter|default('card') %}
{% set sizes = sizes|default('(min-width: 1024px) 33vw, 100vw') %}
{# Les largeurs annoncées au navigateur sont celles que produisent réellement les
   jeux de filtres : lui en donner d'autres lui fait choisir le mauvais fichier. #}
{% set widths = { card: [400, 800, 1200], hero: [800, 1600, 2400], plant: [500, 1000, 1400] }[filter]|default([400, 800, 1200]) %}
{% set source = media is defined and media and media.path ? media.path : null %}

{% if media is defined and media and media.path %}
    <img
        src="{{ source|imagine_filter(filter ~ '_md') }}"
        srcset="{{ source|imagine_filter(filter ~ '_sm') }} {{ widths[0] }}w, {{ source|imagine_filter(filter ~ '_md') }} {{ widths[1] }}w, {{ source|imagine_filter(filter ~ '_lg') }} {{ widths[2] }}w"
        sizes="{{ sizes }}"
        alt="{{ media.alternativeText|default('') }}"
        {% if loading|default('lazy') == 'eager' %}fetchpriority="high"{% endif %}
        loading="{{ loading|default('lazy') }}"
        decoding="async"
        class="{{ class|default('h-full w-full object-cover') }}"
        style="aspect-ratio: {{ ratio }}">
{% else %}
    <div class="{{ class|default('h-full w-full') }} grid place-items-center bg-surface-sage" style="aspect-ratio: {{ ratio }}" role="presentation">
        <svg class="h-1/3 w-1/3 text-brand/25" viewBox="0 0 44 44" fill="none" stroke="currentColor" stroke-width="1" aria-hidden="true">
            <path d="M22 40V14"/>
            <path d="M22 26c-6 0-10-3.5-10-9 5.5 0 10 3 10 9Z"/>
            <path d="M22 26c6 0 10-3.5 10-9-5.5 0-10 3-10 9Z"/>
            <path d="M22 17c-4.5 0-7.5-2.8-7.5-7 4.2 0 7.5 2.4 7.5 7Z"/>
            <path d="M22 17c4.5 0 7.5-2.8 7.5-7-4.2 0-7.5 2.4-7.5 7Z"/>
        </svg>
    </div>
{% endif %}