<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    @include('eliteadmin::partials.head')
    <link href="{{ asset('assets/css/homepage.css') }}" rel="stylesheet">
    @stack('styles')
</head>
<body class="home-page home-theme-{{ $template ?? 'classic' }} @yield('body_class')">
    @if (($template ?? 'classic') !== 'split')
        <header class="home-navbar" id="homeNavbar">
            <div class="container">
                <div class="d-flex align-items-center justify-content-between gap-3">
                    <a href="{{ url('/') }}" class="home-brand">
                        <img src="{{ asset('assets/img/logo.webp') }}" alt="{{ config('app.name') }}" onerror="this.style.display='none'">
                        <span>{{ config('app.name') }}</span>
                    </a>
                    <div class="d-flex align-items-center gap-2">
                        @auth
                            <a href="{{ route('dashboard') }}" class="btn btn-sm {{ in_array($template ?? 'classic', ['classic', 'showcase'], true) ? 'btn-light' : 'btn-primary' }}">
                                <i class="bi bi-speedometer2 me-1"></i>
                                <span class="d-none d-sm-inline">Dashboard</span>
                            </a>
                        @else
                            <a href="{{ route('login') }}" class="btn btn-sm {{ in_array($template ?? 'classic', ['classic', 'showcase'], true) ? 'btn-light' : 'btn-primary' }}">
                                <i class="bi bi-box-arrow-in-right me-1"></i>
                                <span class="d-none d-sm-inline">{{ $content['button_text'] ?? 'Admin Login' }}</span>
                                <span class="d-sm-none">Login</span>
                            </a>
                        @endauth
                    </div>
                </div>
            </div>
        </header>
    @endif

    @yield('body')

    @if (($template ?? 'classic') !== 'split')
        @include('home.partials.footer', ['content' => $content])
    @endif

    <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var navbar = document.getElementById('homeNavbar');
            if (!navbar) return;

            function updateNavbar() {
                navbar.classList.toggle('is-scrolled', window.scrollY > 24);
            }

            updateNavbar();
            window.addEventListener('scroll', updateNavbar, { passive: true });
        });
    </script>
    @stack('scripts')
</body>
</html>
