@php
	$uspArray = !empty($arrangementUsp) ? preg_split("/\r\n|\n|\r/", $arrangementUsp) : null;
@endphp

<a class="c-arrangement" href="{{$arrangementLink}}">

	@if(!empty($arrangementImageSmall) && !empty($arrangementImageMedium))
		<picture class="c-arrangement__picture">
			<img class="c-arrangement__img  c-arrangement__img--small"
				 src="{{$arrangementImageSmall}}"
				 alt="" width="326" height="200"/>
			<img class="c-arrangement__img  c-arrangement__img--medium"
				 src="{{$arrangementImageMedium}}"
				 alt="" width="384" height="326"/>
		</picture>
	@endif


	<div class="c-arrangement__body">

		@if(!empty($arrangementTitle))
			<h2 class="c-arrangement__title">{{ $arrangementTitle }}</h2>
		@endif

		@if($uspArray)
			<div class="c-arrangement__usp">
				<ul class="s-checklist">
					@foreach($uspArray as $key => $uspItem)
						<li>{!! $uspItem !!}</li>
					@endforeach
				</ul>
			</div>
		@endif

		<div class="c-arrangement__options">
			<h3 class="c-arrangement__subheading">
				@if(!empty($arrangementOptionItems) && !$arrangementOptionItems->isEmpty())
					Extra opties
				@else
					&nbsp;
				@endif
			</h3>

			<ul class="c-arrangement__option-list">
				@foreach($arrangementOptionItems as $optionItem)
					<li class="c-arrangement__option-item">
						<span class="c-facility-label" data-icon="{{$optionItem["icon"]}}">
							@if($optionItem["icon"] == "catering")
								<div class="c-tooltip" aria-label="Van picknick tot frietkraam en van kraakvers broodjesbuffet tot en met een overheerlijke barbecue. Alles is mogelijk." tabindex="0">
									<span class="c-tooltip__label">{{$optionItem["name"]}}</span>
								</div>
								<span data-tooltip="down" aria-label=""></span>
							@else
								{{$optionItem["name"]}}
							@endif
						</span>
					</li>
				@endforeach
			</ul>

		</div>


		<div class="c-arrangement__price">
			@include('components.priceTag', [
    			'price' => $arrangementPrice ?? '',
    			'subText' => $arrangementPriceSub ?? '',
			])
		</div>

		<span class="c-arrangement__button">
			<span class="c-arrangement-button__text">{!! $arrangementButtonText ?? '😐' !!}</span>
			<i class="c-arrangement-button__icon">@include('components.icons.arrow')</i>
		</span>

	</div>

</a>