@php
/** @var \App\Models\Keybind $keybind */
$allKeys = [];
foreach ($keybinds as $keybind) {
    $allKeys = array_merge(explode(env('KEYBIND_SEPERATOR'), $keybind->getKeybindKeys()), $allKeys);
}
@endphp
<x-layout title="{{ __('Keybinds') }}">
	<x-slot:breadcrumb>
		{{ Breadcrumbs::render('keybinds') }}
	</x-slot:breadcrumb>
	<x-slot name="header">
		<h1 class="text-lg text-center font-bold">{{ __('Keybinds') }}</h1>
		<x-keyboard :keys="$allKeys"/>
	</x-slot>
	<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 bg-zinc-800 rounded-[1rem] my-[1rem] text-center grid grid-cols-2">
		@foreach($keybinds as $keybind)
			<div class="grid grid-cols-2 py-6">
				<div>
				@foreach(explode(env('KEYBIND_SEPERATOR'), $keybind->getKeybindKeys()) as $index => $key)
					@if($index > 0) + @endif<kbd class="kbd bg-zinc-800 border-{{ env('ACCENT_COLOR') }}">{{ $key }}</kbd>
				@endforeach
				</div>
				{{ $keybind->getKeybindDescription() }}
			</div>
		@endforeach
	</div>
</x-layout>