<nav class="navbar navbar-expand-lg navbar-dark navbar-mopie fixed-top">
    <a class="navbar-brand" href="{{ mopie_route('home') }}">
        <img width="30" src="{{ asset_theme(get_setting('logo')) }}">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
        aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsExample04">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" href="#" id="dropdown04" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">{{ __('menu.movies') }} <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="dropdown-menu mop" aria-labelledby="dropdown04">
                    <div class="row">
                        <div class="col-12">
                            <a class="dropdown-item" href="{{ mopie_route('movie.popular') }}" title="{{ __('menu.popular') }}">{{ __('menu.popular') }}</a>
                            <a class="dropdown-item" href="{{ mopie_route('movie.now.playing') }}" title="{{ __('menu.now_playing') }}">{{ __('menu.now_playing') }}</a>
                            <a class="dropdown-item" href="{{ mopie_route('movie.top.rated') }}" title="{{ __('menu.top_rated') }}">{{ __('menu.top_rated') }}</a>
                            <a class="dropdown-item" href="{{ mopie_route('movie.upcoming') }}" title="{{ __('menu.upcoming') }}">{{ __('menu.upcoming') }}</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link" href="#" id="dropdown04" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">{{ __('menu.tv_shows') }} <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="dropdown-menu mop" aria-labelledby="dropdown04">
                    <div class="row">
                        <div class="col-12">
                            <a class="dropdown-item" href="{{ mopie_route('tv.popular') }}" title="{{ __('menu.popular') }}">{{ __('menu.popular') }}</a>
                            <a class="dropdown-item" href="{{ mopie_route('tv.top.rated') }}" title="{{ __('menu.top_rated') }}">{{ __('menu.top_rated') }}</a>
                            <a class="dropdown-item" href="{{ mopie_route('tv.on.the.air') }}" title="{{ __('menu.on_tv') }}">{{ __('menu.on_tv') }}</a>
                            <a class="dropdown-item" href="{{ mopie_route('tv.airing.to.day') }}" title="{{ __('menu.airing_today') }}">{{ __('menu.airing_today') }}</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link" href="#" id="dropdown04" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">{{ __('menu.genres') }} <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <div class="dropdown-menu px-3" aria-labelledby="dropdown04">
                    <div class="row">
                        @php
                            $genres = collect($genre_list)->chunk(10);
                        @endphp
                        <div class="col-6 px-0">
                            @foreach ($genres->first() as $item)
                                <a class="dropdown-item" href="{{ mopie_route('genre', ['id' => $item->id, 'slug' => str_slug($item->name)]) }}" title="{{ $item->name }}">{{ $item->name }}</a>
                            @endforeach
                        </div>
                        <div class="col-6 px-0">
                            @foreach ($genres->last() as $item)
                                <a class="dropdown-item" href="{{ mopie_route('genre', ['id' => $item->id, 'slug' => str_slug($item->name)]) }}" title="{{ $item->name }}">{{ $item->name }}</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ mopie_route('people.popular') }}" title="{{ __('menu.popular_people') }}">{{ __('menu.popular_people') }}</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <form class="input-group my-2 my-md-0 mr-md-3 bg-faded" action="{{ mopie_route('home') }}" method="GET">
                <input type="text" class="form-control" name="s" placeholder="{{ __('menu.search') }}" aria-label="{{ __('menu.search') }}">
                <div class="input-group-append">
                    <button class="btn btn-search focus-no-sh" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                </div>
            </form>
            <li class="nav-item">
                <div class="nav-link cursor mb-3 mb-md-0" data-toggle="modal" data-target="#modalLang"><i class="fa fa-globe" aria-hidden="true"></i></div>
            </li>
            <li class="nav-item">
                <button class="btn btn-outline-theme ml-md-3 mb-3 mb-md-0 sign-in">{{ __('utilities.sign_in') }}</button>
            </li>
            <li class="nav-item">
                <a href="{{ mopie_route('loading') }}" class="btn btn-theme ml-md-3">{{ __('utilities.register') }}</i></a>
            </li>
        </ul>
    </div>
</nav>