<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title }}</title>

    {{-- Tailwind CSS --}}
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @livewireStyles

    {{-- css --}}
    @stack('css')
    <style type="text/css">
        .border-r-1 {
            border-right-width: 1px !important;
        }

        @font-face {
            font-family: MyriadPro-Bold;
            src: url('{{ asset('fonts/MyriadPro-Bold.ttf') }}');
        }

        @font-face {
            font-family: MyriadPro-Regular;
            src: url('{{ asset('fonts/MyriadPro-Regular.ttf') }}');
        }

        .font-myriadpro-bold {
            font-family: MyriadPro-Bold !important;
        }

        .font-myriadpro-regular {
            font-family: MyriadPro-Regular !important;
        }
    </style>

</head>

<body>
    <div class="app">
        @yield('main')
    </div>

    <script src="{{ asset('js/app.js') }}"></script>
    @livewireScripts
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.x/dist/alpine.min.js" defer></script>

    <script>
        window.addEventListener('alert', event => {
            Swal.fire(
                event.detail.title,
                event.detail.message,
                event.detail.icon
            );
        });
    </script>

    {{-- js --}}
    @stack('styles')

</body>

</html>
