@if(isset($vacancies) && count($vacancies) > 0)


    @foreach($vacancies as $key => $vacancy)
        <article class="o-card-grid__vacancy-item" data-kal="slide-up" style="--kal-delay: {{$key * 150}}ms;">
            @if(isset($vacancy->translation))
                <div class="c-vacancy-card">
                    <a class="c-vacancy-card__link"
                       href="{{$links->vacancies->route . '/' . $vacancy->translation->slug}}">
                        <div class="c-vacancy-card__content">
                            <h2 class="c-vacancy-card__title">{{$vacancy->translation->name}}</h2>
                            <p class="c-vacancy-card__text">{{$vacancy->translation->meta_description}}</p>
                        </div>
                        <div class="c-vacancy-card__properties">
                            <span class="c-vacancy-card__property">
                                @include('components.icons.level')
                                {{$vacancy->translation->level}}
                            </span>
                            <span class="c-vacancy-card__property">
                                @include('components.icons.experience')
                                {{$vacancy->translation->experience}}
                            </span>
                            <span class="c-vacancy-card__property">
                                @include('components.icons.salary')
                                {{$vacancy->translation->salary}}
                            </span>
                        </div>
                    </a>
                    <div class="c-vacancy-card__arrow">
                        <div class="c-vacancy-card__arrow-inner">
                            @include('components.icons.arrow')
                        </div>
                    </div>
                </div>
            @endif
            @if(!empty($amountOfVacancies))
                @break($amountOfVacancies == $key + 1)
            @endif
        </article>
    @endforeach

@else
    <div>{{__('vacancies.noVacancies')}}</div>
@endif