<!doctype html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@yield('title', 'So-Manager')</title>
    <link rel="icon" href="{{ asset('assets/img/favicon.ico') }}">
    <link href="{{ asset('assets/css/mypage/app.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet">
    <link href="{{ asset('assets/css/mypage/slick.css') }}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    <link rel="stylesheet" href="{{ asset('assets/css/mypage/font-awesome.min.css') }}">
    <link href="{{ asset('assets/css/mypage/bootstrap.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/mypage/picker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/mypage/tablesorter-blue.css') }}" type="text/css" media="print, projection, screen">
    <link href="{{ asset('assets/css/mypage/style.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/mypage/jquery-confirm.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
    @yield('head')
    <style>
        #main-news.jumbotron {
            margin-bottom: 0 !important;
        }

        footer.jumbotron {
            margin-top: 0 !important;
        }
    </style>
</head>

<body>
    <div id="font-scale" class="my-page">
        {{-- ヘッダー --}}
        @include('partials.mypage_header')
        {{-- メニュー（active_menuを渡す） --}}
        @include('partials.mypage_menu', ['active_menu' => $active_menu ?? ''])
        <main>
            @yield('content')
        </main>
        {{-- フッター --}}
        @include('partials.general_footer')
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ asset('assets/js/vendor/popper.min.js') }}"></script>
    <script src="{{ asset('assets/js/ie10-viewport-bug-workaround.js') }}"></script>
    <script src="{{ asset('assets/js/vendor/slick/slick.js') }}"></script>
    <script src="{{ asset('assets/js/vendor/jquery.tablesorter/jquery.tablesorter.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/js/commons.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
    <script>
        $(document).ready(function() {
            // モーダルを閉じる前にフォーカスを解除
            $('.modal').on('hide.bs.modal', function(e) {
                $(this).find(':focus').blur();
            });

            // モーダルが完全に閉じた後、body にフォーカスを戻す
            $('.modal').on('hidden.bs.modal', function() {
                $('body').focus();
            });
        });
    </script>
    @yield('scripts')
</body>

</html>