{% set colors = {
    "Offre d'emploi": 'success',
    "Offre de stage": 'warning',
    "Invitation": 'danger',
    "Recherche": 'info',
    "Offre d'alternance": 'light'
} %}
<div class="card flex-grow-1 border-0 rounded-0">
      <div class="card-body d-flex flex-column p-4 h-100">
        <div class="flex-grow-1">
            <span class="badge text-bg-{{ colors[annonce.type]|default('secondary') }} fs-2 py-1 px-2 lh-sm">{{annonce.type}}</span>
            <a class="d-block mt-3 fs-5 text-dark fw-semibold link-primary" href="">{{annonce.titre}}</a>

            <div class="d-flex align-items-center mt-4">
                {% if annonce.createdBy.mecene is not null %}
                    <img src="{{asset('uploads/mecenes/logos/' ~ annonce.createdBy.mecene.logo )}}" alt="matdash-img" class="img-fluid" style="height:auto; max-width:50px;">
                {% else %}
                    <img src="{{asset('uploads/societes/logos/' ~ annonce.espace.societe.logo )}}" alt="matdash-img" class="img-fluid" style="height:auto; max-width:50px;">
                {% endif %}
                <div class="ms-3">
                    {% if annonce.createdBy.mecene is not null %}
                        <h6 class="fs-4 fw-semibold mb-0">{{annonce.createdBy.mecene.nom}}</h6>
                        <span class="fw-normal">{{annonce.createdBy.mecene.secteur.nom}}</span>
                    {% else %}
                        <h6 class="fs-4 fw-semibold mb-0">{{annonce.societe.nom}}</h6>
                        <span class="fw-normal">{{annonce.societe.type.nom}}</span>                
                    {% endif %}
                    
                </div>
            </div>
            
            <div class="d-flex align-items-center gap-4 mt-4 text-black">
            {{annonce.texte | raw}}
            </div>
        </div>

        <div class=" mb-4">
            <div class="d-flex align-items-center mt-4 mb-4">
                {% if annonce.createdBy.image is null %}
                    <img src="{{asset('assets/images/imgProfil.png')}}" alt="matdash-img" class="rounded-circle" width="40" height="40" id="imgProfilApp">
                {% else %}
                    <img src="{{asset('uploads/profiles/user/' ~ annonce.createdBy.image )}}" alt="matdash-img" class="rounded-circle" width="40" height="40" id="imgProfilApp">
                {% endif %}
                <div class="ms-3">
                    <h6 class="fs-4 fw-semibold mb-0">{{annonce.createdBy.prenom}} {{annonce.createdBy.nom}}</h6>
                    <small>Posté le {{annonce.createdAt|date('d/m/Y à H:i')}}</small>
                    
                </div>
            </div>
            <div class="text-end">
                <a class="btn btn-outline-primary ms-auto" href="{{ path('portail_annonce_contact', { id: annonce.idtoken }) }}" data-turbo-frame="modal-frame">Envoyer un message</a>
            </div>
        </div>
    </div>
</div>