<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">
<head>
    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    @include('layouts.head')
</head>


<!-- Body of dashboard - inside is all content-->
<body class="bg-body-tertiary">
    <!-- Include the symbols for svg drawing -->
    @include('layouts.svg')
    <!-- End svg drawing symbols -->
    <!-- Start navbar -->
    @hasSection('upper-navbar')
        @yield('upper-navbar')
    @else
        @include('layouts.upper-navbar')
    @endif
    <!-- end navbar -->
    <!-- Sidebar menu -->
    @include('layouts.sidebar')
    <!-- End aside -->

    <!-- Content of the main body - heres the main content like graph, tables, etc... -->
    <main class="col-sm-10 bg-body-tertiary" id="main">
        <div class="container-fluid">
            @hasSection('content-navigation')
            @yield('content-navigation')
            @endif
            <!-- This section yields to the content -->
            @yield('content')
            
            <!-- Footer for end section -->
            @include('layouts.footer')
            <!-- End footer -->
        </div>
    </main>
    <!-- end main -->

    <!-- Include end of body scripts -->
    @include('layouts.body-scripts')
</body>
</html>