{% for offre in offres %}

    <div class="col-lg-4">
        <div class="card" style="height: 450px;">
            <div class="position-relative">
                <div style="height:220px; background-image:url('{% if offre.image is null %}{{asset('assets/images/fond_fundup.png')}}{% else %}{{asset('uploads/offres/' ~ offre.image)}}{% endif %}'); background-size: cover; background-position: center; border-radius: 20px 20px 0px 0px;">
                </div>
                
                <span class="badge text-bg-danger  fs-2 lh-sm mb-9 me-9 py-1 px-2 fw-semibold position-absolute bottom-0 end-0">{{offre.remise}}</span>
                <div style="width:50px; height:50px; background-color: white; border-radius:50%;" class="position-absolute bottom-0 start-0 mb-n9 ms-9 p-2">
                    {% if offre.createdBy.mecene is not null %}
                        <img src="{{asset('uploads/mecenes/logos/' ~ offre.createdBy.mecene.logo )}}" alt="matdash-img"  style="background-color: white;" class="img-fluid  " width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{offre.createdBy.mecene.nom}}">
                    {% else %}
                        <img src="{{asset('uploads/societes/logos/' ~ offre.espace.societe.logo )}}" alt="matdash-img"  style="background-color: white;" class="img-fluid  " width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{offre.espace.societe.nom}}">
                    {% endif %}
                </div>
            </div>
            <div class="card-body p-4">
                <a class="d-block my-4 fs-5 text-dark fw-semibold link-primary" href="javascript:void(0)">{{offre.titre}}</a>
                {{ offre.description|decode_entities|striptags|slice(0, 100) }}...
                <div class="d-flex align-items-center gap-4">
                    <div class="d-flex align-items-center fs-2 ms-auto">
                        <button class="btn btn-outline-primary ms-auto small btn-sm detail" data-id="{{offre.idtoken}}">Plus d'infos</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}