<!DOCTYPE html>
<link rel="icon" type="image/png" href="{{ asset('img/favicon.png') }}" />
@langrtl
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="rtl">
@else
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    @endlangrtl
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>@yield('title', app_name())</title>
        <meta name="description" content="@yield('meta_description', 'Graphics et al framework')">
        <meta name="author" content="@yield('meta_author', 'Adam Landow')">
    @yield('meta')

    {{-- See https://laravel.com/docs/5.5/blade#stacks for usage --}}
    @stack('before-styles')

    <!-- Check if the language is set to RTL, so apply the RTL layouts -->
        <!-- Otherwise apply the normal LTR layouts -->

        <link href="{{ asset('css/frontend.css') }}" rel="stylesheet">
        <link href="{{ asset('css/g_etal.css') }}" rel="stylesheet">
        <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
        <link href="{{ asset('css/dragula.min.css') }}" rel="stylesheet">
        {{--        Select2 for combo boxes--}}
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
        {{--      Nicely formatted checkboxes; https://lokesh-coder.github.io/pretty-checkbox/--}}
        <link href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-minimal@3/minimal.css">


        <link href="{{ asset('fonts/montserrat/stylesheet.css') }}" rel="stylesheet">

        <style>
            #new_template_container {
                transform: translateZ(0);
                -webkit-transform: translateZ(0);
            }

            .has-search .form-control {
                padding-left: 2.375rem;
            }

            .has-search .form-control-feedback {
                position: absolute;
                z-index: 2;
                display: block;
                width: 2.375rem;
                height: 2.375rem;
                line-height: 2.375rem;
                text-align: center;
                pointer-events: none;
                color: #aaa;
            }

            /*Experimental radio buttons for selecting elements*/
            /* HIDE RADIO */
            [type=radio] {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
            }

            /* IMAGE STYLES */
            [type=radio] + div {
                cursor: pointer;
            }

            /* CHECKED STYLES */
            [type=radio]:checked + img {
                box-shadow: 0 0 0 2px gray;
                background-color: #ffe6ea;
                opacity: 1;
            }

            /*Tiles*/
            .tiles {
                counter-reset: cool -1 good -1;
                padding: 12px 0;
            }

            .tiles > div {
                margin: 0;
                padding: 2px;
            }

            .tiles > .col-xs-2 {
                width: 20%;
            }

            .tiles > .col-xs-4 {
                width: 20%;
            }


            .tiles > div > div {
                position: relative;
                /*border: 1px solid red;*/
            }


            .tiles label {
                display: block;
                height: 100%;
                width: 100%;
                cursor: grab;
                opacity: 0.8;
                background-color: #f0f0f0;
                border: 1px solid gray;
            }

            .tiles img {
                display: block;
                /*height:200px;*/
                max-height: 100%;
                max-width: 100%;
                cursor: grab;
                /*opacity: 0.8;*/
                background-color: #f0f0f0;
            }


            .tiles img.is-loading {
                height: 200px;
                width: 200px;
                background-position: center center;
                background-repeat: no-repeat;
                background-color: #f0f0f0;
                background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNjQgOS43NUE1NC4yNSA1NC4yNSAwIDAgMCA5Ljc1IDY0SDBhNjQgNjQgMCAwIDEgMTI4IDBoLTkuNzVBNTQuMjUgNTQuMjUgMCAwIDAgNjQgOS43NXoiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDY0IDY0IiB0bz0iMzYwIDY0IDY0IiBkdXI9IjE4MDBtcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2c+PC9zdmc+");
            }

            .tiles img:hover {
                box-shadow: 0 0 0 2px gray;
                opacity: 1;
                background-color: lightgray;
            }

            .panel-title {
                position: relative;

            }

            .folder-div-after {
                content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
                top: -2px;
                /*right: 0px;*/
                /*position: absolute;*/
                cursor: pointer;
            }

            .folder-div-after[aria-expanded="true"] {
                content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>                </svg>');
            }


            .panel-heading-full.panel-heading {
                padding: 0;
            }

            .panel-heading-full .panel-title {
                padding: 10px 15px;
            }

            .panel-heading-full .panel-title::after {
                top: 10px;
                right: 15px;
            }

            .collapsing {
                position: relative;
                height: 0;
                overflow: hidden;
                -webkit-transition-property: height, visibility;
                transition-property: height, visibility;
                -webkit-transition-duration: 0.35s;
                transition-duration: 0.35s;
                -webkit-transition-timing-function: ease;
                transition-timing-function: ease;
            }

            /*    Board folder styling and some functionality*/
            .board-folder:hover {
                background-color: lightgrey;
            }

            [type=radio] {
                position: absolute;
                opacity: 0;
                width: 0;
                height: 0;
            }

            [type=radio] + div {
                cursor: pointer;
            }

            /*[type=radio] + div .folder-status-icon {*/
            /*    cursor: pointer;*/
            /*    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">                <path d="M.54 3.87L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/></svg>');*/
            /*}*/

            /* CHECKED STYLES */
            [type=radio]:checked + div {
                box-shadow: 0 0 0 2px gray;
                background-color: lightgrey;
                /*background-color: #ffe6ea;*/
                opacity: 1;
            }

            /*[type=radio]:checked + div .folder-status-icon {*/
            /*    !*background-color: lightgrey;*!*/
            /*    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="bi bi-folder2-open" viewBox="0 0 16 16">                <path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14V3.5zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5V6zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7H1.633z"/>                </svg>');*/
            /*    !*opacity: 1;*!*/
            /*}*/

            /*.folder_sortable {*/
            /*    border: 1px solid gray;*/
            /*    cursor: pointer;*/
            /*}*/

            .folder_sortable.folder_sortable_droppable {
                background-color: lightpink;
                opacity: 0.8;
                min-height: 50px;
            }

            .folder_sortable.folder_sortable_droppable > [type=radio]:checked + div{
                background-color: lightpink;
                opacity: 0.8;
                min-height: 50px;
            }

            .folder_sortable.folder_sortable_droppable .folder-status-icon {
                content: ''
            }


            .folder_sortable.folder_sortable_droppable > [type=radio]:checked + div .folder-status-icon {
                content: ''
            }





        </style>
        {{--        <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>--}}

        {{--{{ style(subdirMix('public/css/frontend.css', 'public/')) }}--}}

        @stack('after-styles')
    </head>
    <body
        style="background-image: url('{{asset('img/frontend/backgrounds/BGHeader-01.svg')}}');  background-position:top; background-color:#ffffff; background-repeat: no-repeat; background-size: cover">
    @include('includes.partials.read-only')

    <div id="app">
        @auth
            <div class="nav-container mobile-nav-container">
                @include('frontend.includes.nav_minimal')
            </div>
        @endauth
        @guest
             @include('frontend.includes.nav')
        @endguest



        @include('includes.partials.logged-in-as')


        @yield('sidebar')
        <div class="container">
            {{--            Diasable messages if we--}}
            @include('includes.partials.messages')
            @yield('content')
            @guest
            @if (!request()->is('register') && !request()->is('login'))
            <div class="icons-container">
                <ul class="icons-lists">
                    <li class="icons-list">
                        <a href="https://www.facebook.com/graphics.et.al" target="_blank">
                            <img src="{{asset('img/frontend/icons/social/facebook.png')}}" alt="Facebook">
                        </a>
                    </li>
                    <li class="icons-list">
                        <a href="https://twitter.com/graphics_et_al" target="_blank">
                            <img src="{{asset('img/frontend/icons/social/twitter.png')}}" alt="Twitter">
                        </a>
                    </li>
                    <li class="icons-list">
                        <a href="https://www.youtube.com/channel/UCbKSUrkBZQoWtzxUBb11s0A" target="_blank">
                            <img src="{{asset('img/frontend/icons/social/youtube.png')}}" alt="YouTube">
                        </a>
                    </li>
                    {{-- <li class="icons-list">
                        <a href="#">
                            <img src="{{asset('img/frontend/icons/social/pinterest.png')}}" alt="">
                        </a>
                    </li>
                    <li class="icons-list">
                        <a href="#">
                            <img src="{{asset('img/frontend/icons/social/tumbler.png')}}" alt="">
                        </a>
                    </li> --}}
                    <li class="icons-list">
                        <a href="https://www.instagram.com/graphics.et.al/" target="_blank">
                            <img src="{{asset('img/frontend/icons/social/instagram.png')}}" alt="Instagram">
                        </a>
                    </li>
                </ul>
            </div>
            @endif

            @endguest

        </div><!-- container -->


    </div><!-- #app -->
    @yield('dialogs')
    <!-- Scripts -->
    @stack('before-scripts')
    <script src="{{ asset('js/manifest.js') }}"></script>
    <script src="{{ asset('js/vendor.js') }}"></script>
    <script src="{{ asset('js/frontend.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    {{--    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>--}}
    {{--    <script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>--}}
{{--    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>--}}
    <script src="{{ asset('js/isotope.pkgd.min.js') }}"></script>

{{--    <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script>--}}
{{--    <script src="https://unpkg.com/@popperjs/core@2"></script>--}}
    <script src="{{ asset('js/popper.min.js') }}"></script>
{{--    <script src="https://unpkg.com/tippy.js@6"></script>--}}
    <script src="{{ asset('js/tippy-bundle.umd.min.js') }}"></script>
{{--    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>--}}
    <script src="{{ asset('js/imagesloaded.pkgd.min.js') }}"></script>
    <script src="{{ asset('js/userdashboard/userdashboard.js') }}"></script>
    <script src="{{ asset('js/userdashboard/dragula.min.js') }}"></script>
    <script src="{{ asset('js/packery-mode.pkgd.min.js') }}"></script>
    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        @isset(auth()->user()->id)
        Tawk_API.visitor = {
            name  : '{{auth()->user()->first_name}} {{auth()->user()->last_name}}',
            email : '{{auth()->user()->email}}'
        };
        @endisset
        (function(){
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/6026303f9c4f165d47c28ef0/1euaip0vh';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
    <!--End of Tawk.to Script-->
    @stack('after-scripts')
    </body>

    </html>
