<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <!-- Meta tags  -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>@yield('title', get_setting('site_name'))</title>

    <link rel="icon" type="image/png" href="{{ asset(get_setting('favicon')) }}" />
    <!-- CSS Assets -->
    <link rel="stylesheet" href="/dist/css/app.css?v={{ config('app.version') }}" />
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
    {!! get_setting('user_head_code') !!}
  </head>
  <body x-data class="is-header-blur" x-bind="$store.global.documentBody">

    <!-- Page Wrapper -->
    <div id="root" class="min-h-100vh flex grow bg-slate-50 dark:bg-navy-900" x-cloak>
      @include('layouts.navigation')

      <!-- Main Content Wrapper -->
      <main class="main-content w-full px-[var(--margin-x)] pb-8">
        {{ $slot }}
      </main>
    </div>
    <!-- Javascript Assets -->
    <script src="/dist/js/app.js?v={{ config('app.version') }}" defer></script>
    <script>
      localStorage.getItem("_x_darkMode_on") === "true" &&
        document.documentElement.classList.add("dark");
    </script>
    <div id="x-teleport-target"></div>
    <script>
      window.addEventListener("DOMContentLoaded", () => Alpine.start());
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    @include('components.flash')
    @stack('scripts')
    <script src="/dist/js/global.js?v={{ config('app.version') }}"></script>
    {!! get_setting('user_footer_code') !!}
  </body>
</html>
