<div class="col-lg-4 col-md-6 mb-4" data-aos='fade-up'>
<div class="offer-item d-flex flex-column h-100 p-3 mb-3">
<div class="o-company">
<a href="javascript:void(0)" class="font-weight-bold">{{ job.companyName }}</a>
</div>
<div class="o-name mb-3">
<a href="{{ job.url }}"><span class="truncate-text">{{ job.offerTitle }}</span></a>
</div>
<div class="o-tags mb-2">
{% if job.expertise %}
{% set item = job.expertise|first %}
<span>{{ item.name }}{{ job.expertise|length > 1 ? ' ...' : '' }}</span>
{% endif %}
{% if job.skill %}
{% for skill in job.skill|slice(0, 3) %}
<a href="javascript:void(0)" class="o-chip">{{ skill.name }}</a>
{{ job.skill|length > 3 and loop.last ? ' ...' : '' }}
{% endfor %}
{% endif %}
</div>
<div class="o-info row mt-auto font-14">
<div class="col-12 d-flex">
{% if job.contract %}
<div class="d-flex align-items-start line-height-normal">
<i class="fa-solid fa-suitcase mr-2"></i>
<span>{{ job.contract.name_display }}</span>
</div>
{% endif %}
<div class="d-flex align-items-center ml-auto">
<i class="fa-solid fa-calendar-days mr-2"></i>
<span>{{ job.validDate|date('d/m/Y') }}</span>
</div>
</div>
{% if job.campuses %}
<div class="col-12 mt-1">
<div class="d-flex align-items-center">
<i class="fa-solid fa-location-dot mr-2"></i>
{% for campus in job.campuses|slice(0, 3) %}
<span>{{ campus.name }}{% if not loop.last %}, {% endif %}</span>
{{ job.campuses|length > 3 and loop.last ? ' ...' : '' }}
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>