@php
    $item_classes = "flex items-center inline-block w-full px-4 py-2 rounded-lg hover:bg-blue-800";
@endphp

<x-layout>
<div class="flex min-h-screen">

    <div class="bg-gray-800 w-2/12 px-4 divide-y divide-gray-600">

        <ul class="py-4 space-y-2 text-white">
            <li><a class="{{ $item_classes }}" href="{{ url('/admin/account') }}"><x-heroicon-o-user class="h-8 mr-2"/> {{ __('Account') }}</a></li>
        <li><a class="{{ $item_classes }}" href="{{ url('/admin') }}"><x-heroicon-o-user-group class="h-8 mr-2"/> {{ __('Admins') }}</a></li>
        </ul>

        <ul class="py-4 space-y-2 text-white">
            <li><a class="{{ $item_classes }}" href="{{ url('/admin/cards') }}"><x-heroicon-o-collection class="h-8 mr-2"/> {{ __('Cards') }}</a></li>
            <li><a class="{{ $item_classes }}" href="{{ url('/admin/characters') }}"><x-heroicon-o-identification class="h-8 mr-2"/> {{ __('Characters') }}</a></li>
            <li><a class="{{ $item_classes }}" href="{{ url('/admin/raids') }}"><x-heroicon-o-globe class="h-8 mr-2"/> {{ __('Raids') }}</a></li>
        </ul>


        <ul class="py-4 space-y-2 text-white">
            <x-ignite-form action="{{ url('/admin/logout') }}">
            <li>
                <a class="{{ $item_classes }}" href="#" onclick="event.preventDefault();this.closest('form').submit();">
                    <x-heroicon-o-logout class="h-8 mr-2"/> {{ __('Logout') }}
                </a>
            </li>
            </x-ignite-form>
        </ul>

    </div>

    <div class="w-10/12 m-8">
        {{ $slot }}
    </div>
</div>
</x-layout>