<nav class="navbar navbar-expand-lg fixed-top" aria-label="Main navigation">
    <div class="container-xl p-2">
        <a class="my-auto" href="{{ LaravelLocalization::localizeUrl("/") }}">
            @if (session('color'))
                @if (session('color') == 'dark')
                    <img 
                        class="{{ setting('lazyload') == 1 ? 'lazy' : '' }}" 
                        id="header-logo" 
                        alt="Website logo" width="135" height="30"
                        @if (setting('lazyload') == 1)
                            src="{{ url("assets/image/img-loader-white.svg") }}" 
                            data-src="{{ img('other', setting('logo_light')) }}">
                        @else
                            src="{{ img('other', setting('logo_light')) }}">
                        @endif
                @else
                    <img 
                        class="{{ setting('lazyload') == 1 ? 'lazy' : '' }}" 
                        id="header-logo" 
                        alt="Website logo" width="135" height="30" 
                        @if (setting('lazyload') == 1)
                            src="{{ url("assets/image/img-loader.svg") }}" 
                            data-src="{{ img('other', setting('logo_dark')) }}">
                        @else
                            src="{{ img('other', setting('logo_dark')) }}">
                        @endif
                @endif
            @else
                @if (setting('default_color_mode') == 2)
                    <img 
                        class="{{ setting('lazyload') == 1 ? 'lazy' : '' }}" 
                        id="header-logo" 
                        alt="Website logo" width="135" height="30"
                        @if (setting('lazyload') == 1)
                            src="{{ url("assets/image/img-loader-white.svg") }}" 
                            data-src="{{ img('other', setting('logo_light')) }}">
                        @else
                            src="{{ img('other', setting('logo_light')) }}">
                        @endif
                @else
                    <img 
                        class="{{ setting('lazyload') == 1 ? 'lazy' : '' }}" 
                        id="header-logo" 
                        alt="Website logo" width="135" height="30" 
                        @if (setting('lazyload') == 1)
                            src="{{ url("assets/image/img-loader.svg") }}" 
                            data-src="{{ img('other', setting('logo_dark')) }}">
                        @else
                            src="{{ img('other', setting('logo_dark')) }}">
                        @endif
                @endif
            @endif
        </a>
        <ul class="navbar-nav d-none d-lg-flex gap-lg-5 mx-auto mb-2 mb-lg-0">
            @if (
                toolsSetting('convert') == 1 
                || toolsSetting('compress') == 1 
                || toolsSetting('resize') == 1 
                || toolsSetting('rotate_reflect') == 1 
                || toolsSetting('watermark') == 1 
                || toolsSetting('preferences') == 1 
                || toolsSetting('effects') == 1 
                || toolsSetting('exif_cleaner') == 1 
                || toolsSetting('autoremove') == 1 
                || toolsSetting('password') == 1
            )
                <div class="nav-item nav-tools dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        {{ __('lang.tools') }}<span><i class="fa-solid fa-plus fa-fw fa-xs"></i></span>
                    </a>
                    <div class="dropdown-menu dropdown-large p-3">
                        <div class="row g-0 {{ toolsCount() > 1 ? 'row-cols-2' : 'row-cols' }}">
                            @if (toolsSetting('convert') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_convert', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-photo-film fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.convert') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_convert_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('compress') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_compress', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-down-left-and-up-right-to-center fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.compress') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_compress_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('resize') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_resize', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-compress fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.resize') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_resize_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('rotate_reflect') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_rotate_reflect', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-arrows-left-right-to-line fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.rotate_reflect') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_rotate_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('watermark') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_watermark', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-font fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.watermark') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_watermark_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('preferences') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_preferences', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-sliders fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.preferences') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_preferences_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('effects') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_effects', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-brush fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.effects') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_effects_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('autoremove') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_autoremove', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-trash-can fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.autoremove') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_autoremove_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('password') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_password', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-lock fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.password') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_password_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                            @if (toolsSetting('exif_cleaner') == 1)
                                <div class="tools-block col menu-column p-2">
                                    <a
                                        class="menu-box d-flex gap-3 h-100"
                                        href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_exif_cleaner', true)) }}">
                                        <div>
                                            <div class="menu-icon d-flex">
                                                <i class="fa-solid fa-eraser fa-fw fa-xl pe-none m-auto"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="menu-title">{{ __('lang.exif_cleaner') }}</div>
                                            <div class="menu-subtitle">
                                                {{ __('lang.tools_exif_text') }}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endif
                        </div>
                        <div class="mt-2 text-end p-2">
                            <a class="btn btn-color-4 w-100" 
                                href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true)) }}">
                                {{ __('lang.explore_all_tools') }}
                            </a>
                        </div>
                    </div>
                </div>
            @endif
            <div class="nav-item">
                <a class="nav-link" href="{{ LaravelLocalization::localizeUrl(pageSlug('pricing', true)) }}">{{ __('lang.pricing') }}</a>
            </div>
            <div class="nav-item">
                <a class="nav-link" href="{{ LaravelLocalization::localizeUrl(pageSlug('blog', true)) }}">{{ __('lang.blog') }}</a>
            </div>
            @if (affiliateSetting('status') == 1)
                <div class="nav-item">
                    <a class="nav-link" href="{{ LaravelLocalization::localizeUrl(pageSlug('affiliate', true)) }}">{{ __('lang.affiliate') }}</a>
                </div>
            @endif
            <div class="nav-item">
                <a class="nav-link" href="{{ LaravelLocalization::localizeUrl(pageSlug('contact', true)) }}">{{ __('lang.contact') }}</a>
            </div>
        </ul>
        <div class="d-flex gap-2 ms-auto ms-lg-0">
            @if (languages() != null && languages() && langSetting('language_switcher') == 1)
                <div class="dropdown language-select">
                    <button 
                        class="btn btn-header" 
                        type="button" 
                        aria-label="Languages"
                        data-bs-toggle="dropdown" 
                        aria-expanded="false">
                        <span class="fi fi-{{ LaravelLocalization::getCurrentLocale() }} fis rounded-circle fa-lg fa-fw pe-none"></span>
                    </button>
                    <ul class="dropdown-menu text-center">
                        @foreach (languages() as $language)
                            @if ('fi fi-' . LaravelLocalization::getCurrentLocale() . ' fis' != $language['flag'])
                                <li>
                                    <a 
                                        class="dropdown-item" 
                                        hreflang="{{ $language['code'] }}"
                                        href="{{ LaravelLocalization::getLocalizedURL($language['code'], null, [], true) }}">
                                        <span class="{{ $language['flag'] }} rounded-circle fa-lg fa-fw pe-none"></span>
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
            @endif
            @if (Auth::check())
                <div class="dropdown">
                    <button class="btn btn-header" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="User menu">
                        <i class="fa-solid fa-user fa-lg fa-fw pe-none"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end p-3">
                        @if (Auth::user()->type == 1)
                            <li><a class="dropdown-item" href="{{ LaravelLocalization::localizeUrl('/user/overview') }}">{{ __('lang.dashboard') }}</a></li> 
                        @else
                            <li><a class="dropdown-item" href="{{ LaravelLocalization::localizeUrl('/admin/overview') }}">{{ __('lang.dashboard') }}</a></li>
                        @endif
                        <li><a class="dropdown-item" href="{{ LaravelLocalization::localizeUrl("logout") }}">{{ __('lang.logout') }}</a></li>
                        @if (Auth::user()->type == 1)
                            <li class="user-menu-alert p-3 mx-2 mt-2">
                                <p class="mb-0">{{ __('lang.my_plan') }}: {{ myPlan()['name'] }}</p>
                                @if (!myPlan()['free'])
                                    <p class="mt-3 mb-0">
                                        {{ 
                                            __(
                                                'lang.remaining', 
                                                [
                                                    'remaining0' => myPlan()['remaining'][0], 
                                                    'remaining1' => myPlan()['remaining'][1], 
                                                    'remaining2' => myPlan()['remaining'][2]
                                                ]
                                            ) 
                                        }}
                                    </p>
                                @endif
                            </li>
                        @endif
                    </ul>
                </div>
            @else
                <a class="btn btn-color-1 my-auto" 
                    href="{{ LaravelLocalization::localizeUrl(pageSlug('login', true)) }}">
                    {{ __('lang.login') }}
                </a>
            @endif
            <div class="d-block d-lg-none">
                <button 
                    class="btn btn-header" 
                    type="button" 
                    data-bs-toggle="offcanvas" 
                    data-bs-target="#side-menu" 
                    aria-controls="side-menu" 
                    aria-label="Open side menu">
                    <i class="fa-solid fa-bars fa-lg fa-fw pe-none"></i>
                </button>
            </div>
        </div>
    </div>
</nav>
<div id="side-menu" class="offcanvas offcanvas-start" tabindex="-1"> 
    <div class="offcanvas-header">
        <button 
            type="button" 
            class="btn-close ms-auto" 
            data-bs-dismiss="offcanvas" 
            aria-label="Close">
        </button> 
    </div> 
    <div class="offcanvas-body scroll-light"> 
        <nav class="side-menu d-flex flex-column h-100"> 
            <ul class="nav flex-column" id="nav_accordion">
                <li class="nav-item"> 
                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl("/") }}"> 
                        {{ __('lang.home') }} 
                    </a>
                </li>
                @if (
                    toolsSetting('convert') == 1 
                    || toolsSetting('compress') == 1 
                    || toolsSetting('resize') == 1 
                    || toolsSetting('rotate_reflect') == 1 
                    || toolsSetting('watermark') == 1 
                    || toolsSetting('preferences') == 1 
                    || toolsSetting('effects') == 1 
                    || toolsSetting('exif_cleaner') == 1 
                    || toolsSetting('autoremove') == 1 
                    || toolsSetting('password') == 1
                )
                    <li class="nav-item has-submenu"> 
                        <a 
                            class="nav-link d-flex p-0" 
                            data-bs-toggle="collapse" 
                            href="#tools-mobile" 
                            role="button" 
                            aria-expanded="false" 
                            aria-controls="tools-mobile"> 
                            {{ __('lang.tools') }}
                            <i class="fa-solid fa-angle-down ms-auto"></i>
                        </a>
                        <ul class="submenu collapse" id="tools-mobile">
                            @if (toolsSetting('convert') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_convert', true)) }}"> 
                                        {{ __('lang.convert') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('compress') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_compress', true)) }}"> 
                                        {{ __('lang.compress') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('resize') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_resize', true)) }}"> 
                                        {{ __('lang.resize') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('rotate_reflect') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_rotate_reflect', true)) }}"> 
                                        {{ __('lang.rotate_reflect') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('watermark') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_watermark', true)) }}"> 
                                        {{ __('lang.watermark') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('preferences') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_preferences', true)) }}"> 
                                        {{ __('lang.preferences') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('effects') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_effects', true)) }}"> 
                                        {{ __('lang.effects') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('autoremove') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_autoremove', true)) }}"> 
                                        {{ __('lang.autoremove') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('password') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_password', true)) }}"> 
                                        {{ __('lang.password') }} 
                                    </a>
                                </li>
                            @endif
                            @if (toolsSetting('exif_cleaner') == 1)
                                <li class="mt-3"> 
                                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true) . pageSlug('tools_exif_cleaner', true)) }}"> 
                                        {{ __('lang.exif_cleaner') }} 
                                    </a>
                                </li>
                            @endif
                            <li class="mt-3"> 
                                <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('tools', true)) }}"> 
                                    {{ __('lang.all_tools') }} 
                                </a>
                            </li>
                        </ul>
                    </li>
                @endif
                <li class="nav-item"> 
                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('pricing', true)) }}"> 
                        {{ __('lang.pricing') }} 
                    </a>
                </li>
                <li class="nav-item"> 
                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('blog', true)) }}"> 
                        {{ __('lang.blog') }} 
                    </a>
                </li>
                @if (affiliateSetting('status') == 1)
                    <li class="nav-item"> 
                        <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('affiliate', true)) }}"> 
                            {{ __('lang.affiliate') }} 
                        </a>
                    </li>
                @endif
                <li class="nav-item"> 
                    <a class="nav-link p-0" href="{{ LaravelLocalization::localizeUrl(pageSlug('contact', true)) }}"> 
                        {{ __('lang.contact') }} 
                    </a>
                </li>
            </ul>
        </nav> 
        <div>
            <label class="switcher position-fixed" for="color-mode-mobile">
                <input 
                    type="checkbox" 
                    id="color-mode-mobile" 
                    class="color-mode" 
                    aria-label="Color mode" 
                    @if (setting('default_color_mode') == 1)
                        value="1"{{ session('color') == 'dark' ? ' checked' : '' }}>
                    @else
                        value="1"{{ session('color') == 'light' ? '' : ' checked' }}>
                    @endif
                <span class="slider position-absolute">
                    <i class="fa-solid fa-moon fa-lg pe-none position-absolute"></i>
                    <i class="fa-regular fa-sun fa-lg pe-none position-absolute"></i>
                </span>
            </label>
        </div>
    </div> 
</div>