<!DOCTYPE html>
<html lang="en">

<head>
    <title>Admin Dashboard</title>
    @include('layouts.header')
</head>

<body>
    <div id="app">
        <div id="sidebar" class="active">
            <div class="sidebar-wrapper active">
                <div class="sidebar-header">
                    <div class="d-flex justify-content-between">
                        <div class="logo">
                            <a href="index.html"><img src=" {{ asset('img/logo_2.png')}}" alt="Logo" srcset=""></a>
                        </div>
                        <div class="toggler">
                            <a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
                        </div>
                    </div>
                </div>

                @include('layouts.leftMenu')

                <button class="sidebar-toggler btn x"><i data-feather="x"></i></button>
            </div>
        </div>
        <div id="main" class='layout-navbar'>
            @include('layouts.topHeader')

            <div id="main-content">

                @include('layouts.breadCrumb')

                <div class="page-heading">
                    @include('layouts.messages')
                    @yield('content')
                </div>

                @include('layouts.footer')
            </div>
        </div>
    </div>

    <script src="{{ asset('theme/vendors/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
    <script src="{{ asset('theme/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('js/jQuery/jquery.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jQuery/jquery.form.js') }}" type="text/javascript"></script>

    <script src="{{ asset('theme/js/main.js') }}"></script>
    <script src="{{ asset('js/gridUtils.js') }}" type="text/javascript"></script>

    @yield('headerScripts')

</body>

</html>