{% for vacancy in vacancies %}
<div class="col-12 col-sm-6 flex-eq-height">
<div class="card vacancy__first-version">
<div class="card-body">
<div class="vacancy">
<div class="vacancy-top">
<div class="vacancy-title">
<a title="{{ vacancy.title|raw }}"
href="{{ path('vacancy_detail', {'id' : vacancy.id, 'slug' : vacancy.slug}) }}">
<h3>{{ vacancy.title|raw }}</h3>
</a>
</div>
{% if vacancy.new %}
<span class="badge badge--new">
<p>{{ 'New'|trans }}</p>
</span>
{% endif %}
{% if vacancy.featured %}
<span class="badge badge--topvacancy float-right">
<p>{{ 'Featured vacancy'|trans }}</p>
</span>
{% endif %}
</div>
<div class="vacancy-body" data-format="IntroFormatter">
<p>{{ vacancy.intro|striptags[:config_setting('site_vacancy_intro_character_limit')|default(500)]|raw }}{{ vacancy.intro|length > config_setting('site_vacancy_intro_character_limit')|default(500) ? '...' : '' }}</p>
</div>
<div class="vacancy-footer">
<div data-format="FooterFormatter" class="vacancy-options">
<ul>
{% if vacancy.city %}
{% if config_setting('site_vacancy_show_location') %}
<li>
<i class="fas fa-fw fa-map-marker" aria-hidden="true" title="{{ vacancy.city }}"></i> {{ vacancy.city }}
</li>
{% endif %}
{% endif %}
{% for optionValue in vacancy.optionValues %}
<li>
<i class="{{ optionValue.option.fontAwesomeIcon }}" aria-hidden="true" title="{{ optionValue.value }}"></i>
{{ optionValue.value }}
</li>
{% endfor %}
</ul>
</div>
<a href="{{ path('vacancy_detail', {'id' : vacancy.id, 'slug' : vacancy.slug}) }}"
title="{{ vacancy.title|raw }}" class="is-btn is-btn-small show-vacancy-btn">
{{ 'Show vacancy'|trans }} <i class="far fa-angle-right icon-after" aria-hidden="true" title="{{ 'Show vacancy'|trans }}"></i>
</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}