@props([
    'title' => null,
    'pageTitle' => null,
    'pageIcon' => 'fe fe-home',
    'breadcrumbs' => [],
])

@php
    $rtl = (bool) ($isRtl ?? false);
    $dir = $rtl ? 'rtl' : 'ltr';
    $resolvedTitle = $title ?? __('common.dashboard');
    $resolvedPageTitle = $pageTitle ?? __('common.dashboard');
@endphp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $dir }}"
      data-theme-mode="light" data-header-styles="light">
    <x-ui.layout.head :title="$resolvedTitle" />
    <body @class(['rtl' => $rtl])>
        <div id="loader">
            <img src="{{ asset('assets/admin/images/media/loader.svg') }}" alt="{{ __('nav.loading') }}">
        </div>

        <div class="top-layout-page">
            <x-ui.layout.header />
            <x-ui.layout.topnav :pageTitle="$resolvedPageTitle" :pageIcon="$pageIcon" :breadcrumbs="$breadcrumbs">
                @isset($contextToolbar)
                    <x-slot:toolbar>{{ $contextToolbar }}</x-slot:toolbar>
                @endisset
            </x-ui.layout.topnav>
            <x-ui.layout.search-overlay />

            <div class="app-shell-body">
                <x-ui.layout.app-sidebar :groups="$navGroups ?? []" />
                <main class="admin-main-content flex-grow-1 min-w-0">
                    {{ $slot }}
                </main>
            </div>

            <x-ui.layout.footer />
        </div>

        <x-ui.layout.scripts />
    </body>
</html>
