<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="{{ $meta_description ?? ($title ?? '') }}" />
    <meta name="keywords" content="{{  $keywords ??  ($title ?? '') }}" />
    <link rel="shortcut icon" href="{{asset('assets/web/images/logo.png')}}" title="Favicon" sizes="16x16" />

    <meta name="csrf-token" content="{{csrf_token()}}">
    <title>{{ ($title ?? '') }}</title>

{{--@if (app()->getLocale() == 'ar')--}}
    <!--With LTR -->
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/bootstrap-rtl.min.css') }}" />
{{--@else--}}
    <!--With RTL -->
{{--    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/bootstrap-ltr.min.css') }}" />--}}
{{--@endif--}}

    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/animate.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/all.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/owl.carousel.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/owl.theme.default.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/jquery.fancybox.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/swiper.min.css') }}" />
    <!--With RTL -->
    <link rel="stylesheet" href="{{ asset('assets/web/css/styles.css') }}" />

@if (app()->getLocale() == 'ar')
    <!--With LTR -->
{{--    <link rel="stylesheet" href="{{ asset('assets/web/css/style_ar.css') }}" />--}}
@endif

    @yield('css')

    <!--[if it IE 9]>
        <script src="{{asset('assets/web/js/lib/html5shiv.min.js')}}"></script>
        <script src="{{asset('assets/web/js/lib/respond.min.js')}}"></script>
        <![endif]-->

</head>

<body>

{{--<div class="loader">--}}
{{--    <div class="text-center w-100">--}}
{{--        <img class="back" src="{{asset('assets/web/images/an-logo.svg')}}" alt="">--}}
{{--        <img class="load-logo" src="{{asset('assets/web/images/an-logo.svg')}}" alt="">--}}
{{--    </div>--}}
{{--</div>--}}
@yield('container_content')

<script src="{{ asset('assets/web/js/lib/jquery-3.0.0.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/jquery-migrate-3.0.0.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/popper.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/bootstrap.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/wow.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/jquery.fancybox.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/owl.carousel.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/swiper.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/jquery.waypoints.min.js') }} "></script>
<script src="{{ asset('assets/web/js/lib/jquery.counterup.js') }} "></script>

<script src="{{ asset('assets/web/js/main.js') }} "></script>
{{--@if (app()->getLocale() == 'ar')--}}
{{--    <!--With RTL -->--}}
{{--    <script src="{{ asset('assets/web/js/main-ar.js') }} "></script>--}}
{{--@else--}}
{{--    <!--With LTR -->--}}
{{--    <script src="{{ asset('assets/web/js/main.js') }} "></script>--}}
{{--@endif--}}

@yield('container_js')
</body>

</html>
