@props(['header' => false, 'values', 'mode'])
@php
	if (!function_exists('getFieldHtml')) {
		function getFieldHtml(array $args, string $field, bool $header, string $mode): string {
            $type = $args['type'];
            $value = $args['value'] ?? ($type === 'int' ? 0 : '');
            $rowType = 'div';
            $classes = ['p-3 border-opacity-40 border-' . env('ACCENT_COLOR') . ' grow basis-0 border min-w-[6rem]', ($type === 'int' ? 'text-right' : 'text-left'), ($mode === 'tableVertical' ? 'max-w-[8rem] min-h-[5rem]' : ''), ($header ? 'font-bold' : '')];
            $html = '<' . $rowType . ' class="' . implode(' ', $classes) . '">';
			$valueHtml = match ($type) {
				'string' => $value,
				'int' => $value . ($args['unit'] ?? ''),
				'image' => '<label for="image_modal_' . $value . '"><img class="max-h-[3.5rem] cursor-pointer" src="' . $value . '" alt="' . $field . '"></label>'
			};

	        if (!empty($args['link'])) {
	            $html .= '<a class="text-' . env('ACCENT_COLOR') . '" href="' . $args['link'] . '">' . $valueHtml . '</a>';
	        } else {
                $html .= $valueHtml;
	        }

            $html .= '</' . $rowType . '>';

	        return $html;
		}
    }
@endphp
<div class="bg-zinc-800 hover:bg-zinc-700 first:hover:bg-zinc-800 flex {{ $mode === 'tableVertical' ? 'flex-col' : 'last:rounded-b-[1rem] first:rounded-t-[1rem]' }} {{ $header ? 'sticky self-start ' . ($mode === 'tableVertical' ? 'left-0' : 'top-0') : '' }}">
	@foreach($values as $field => $value)
		{!! getFieldHtml($value, $field, $header, $mode) !!}
		@if($value['type'] === 'image')
			<x-image-modal image="{{ $value['value'] }}" id="image_modal_{{ $value['value'] }}" />
		@endif
    @endforeach
</div>