<div class="o-modal  js-modal" data-hash="{{ $modelHash }}">
	<div class="o-modal__shader  js-close-modal"></div>
	<div class="o-modal__content  js-modal-scroller">
		<div class="o-modal__header">
			<h2 class="o-modal__heading">{{ $product->translation->name }}</h2>
			<button class="o-modal__close  js-close-modal"></button>
		</div>

		<table class="o-modal__table">

			@php
				$levels = json_decode($product->levels);
			@endphp

			@if(isset($levels) && sizeof($levels) != 0)
				<thead class="o-modal__thead">
					<tr>
						<th class="o-modal__thead-cell">
							{{-- This div is intentionally left blank --}}
						</th>

						@php
							$levels = json_decode($product->levels);
						@endphp

					{{-- Temporary loop so we can test multiple packages --}}
					@foreach($levels as $level)
						<th class="o-modal__thead-cell">
							<div class="c-package-price">
								<h3 class="c-package-price__title">{{ $level[0] }}</h3>

								@if(!empty($level[1]))
									<div class="c-package-price__amount  c-package-price__symbol  js-pricing-symbol" data-currency-symbol="€">
										<div class="c-package-price__number  js-pricing-price" data-price-eur="{{ $level[1] }}" data-price-usd="{{ $level[2] }}">{{ $level[1] }}</div>
									</div>
								@endif
							</div>
						</th>
					@endforeach
					</tr>
				</thead>
			@endif

			@php
				$combinedArray = [];

				$features = json_decode($product->translation->features);

                if(isset($features)) {
                    if(!isset($levels) || sizeof($levels) == 0) {

						foreach ($features as $feature) {
							unset($feature[2]);
							unset($feature[3]);
							unset($feature[4]);
						}

						$combinedArray[] = $features;
                    }
                }



			@endphp

			@include('site.components.modalTable', ['modelRows' => $combinedArray])
		</table>
	</div>
</div>