@extends('admin.layout')

@section('page')

    <div class="main-wrapper">
        <div class="app" id="app">
            <header class="header">
                <div class="header-block header-block-collapse hidden-lg-up">
                    <button class="collapse-btn" id="sidebar-collapse-btn">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
                <div class="header-block header-block-search hidden-sm-down">
                    <form action="{{route('search')}}" method="get">
                        <div class="input-container">
                            <i class="fa fa-search"></i>
                            <input type="search" value="@if(isset($search)){{$search}}@endif"
                                   placeholder="@lang('search.term')" name="search" />
                            <div class="underline"></div>
                        </div>
                    </form>
                </div>

                <div class="header-block header-block-nav">
                    <ul class="nav-profile">


                        <li class="profile dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                @lang(LaravelLocalization::getCurrentLocaleName())
                            </a>
                            <div class="dropdown-menu">
                                @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                    <a hreflang="{{$localeCode}}"
                                       href="{{LaravelLocalization::getLocalizedURL($localeCode) }}"
                                       class="dropdown-item">
                                        {{ $properties['native'] }}
                                    </a>
                                @endforeach
                            </div>

                        <li class="profile dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                <div class="img"
                                     style="background-image: url('{{Auth::user()->gravatar(40)}}')"></div>
                                <span class="name">{{Auth::user()->getAttribute('name')}}</span>
                            </a>
                            <div class="dropdown-menu profile-dropdown-menu" aria-labelledby="dropdownMenu1">
                                <a class="dropdown-item" href="#"> <i class="fa fa-user icon"></i> Profile </a>
                                <a class="dropdown-item" href="#"> <i class="fa fa-bell icon"></i> Notifications </a>
                                <a class="dropdown-item" href="#"> <i class="fa fa-gear icon"></i> Settings </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{{route('logout')}}"> <i
                                            class="fa fa-power-off icon"></i> Logout
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </header>
            <aside class="sidebar">
                <div class="sidebar-container">
                    <div class="sidebar-header">
                        <div class="brand">
                            <div class="logo">
                                <span class="l l1"></span> <span class="l l2"></span> <span
                                        class="l l3"></span> <span class="l l4"></span> <span class="l l5"></span>
                            </div>
                            {{isset($pageName) ? $pageName : ''}}
                        </div>
                    </div>
                    <nav class="menu">
                        {!! Menu::render('mainMenu', 'metismenu') !!}

                        {{--<ul class="nav metismenu" id="sidebar-menu">--}}
                        {{--<li>--}}
                        {{--<a href="index.html"> <i class="fa fa-home"></i> Dashboard </a>--}}
                        {{--</li>--}}
                        {{--<li>--}}
                        {{--<a href=""> <i class="fa fa-th-large"></i> Items Manager <i class="fa arrow"></i> </a>--}}
                        {{--<ul>--}}
                        {{--<li><a href="items-list.html">--}}
                        {{--Items List--}}
                        {{--</a></li>--}}
                        {{--<li><a href="item-editor.html">--}}
                        {{--Item Editor--}}
                        {{--</a></li>--}}
                        {{--</ul>--}}
                        {{--</li>--}}
                        {{--<li class="active open">--}}
                        {{--<a href=""> <i class="fa fa-bar-chart"></i> Charts <i class="fa arrow"></i> </a>--}}
                        {{--<ul>--}}
                        {{--<li class="active"><a href="charts-flot.html">--}}
                        {{--Flot Charts--}}
                        {{--</a></li>--}}
                        {{--<li><a href="charts-morris.html">--}}
                        {{--Morris Charts--}}
                        {{--</a></li>--}}
                        {{--</ul>--}}
                        {{--</li>--}}
                        {{--<li>--}}
                        {{--<a href=""> <i class="fa fa-table"></i> Tables <i class="fa arrow"></i> </a>--}}
                        {{--<ul>--}}
                        {{--<li><a href="static-tables.html">--}}
                        {{--Static Tables--}}
                        {{--</a></li>--}}
                        {{--<li><a href="responsive-tables.html">--}}
                        {{--Responsive Tables--}}
                        {{--</a></li>--}}
                        {{--</ul>--}}
                        {{--</li>--}}
                        {{--<li>--}}
                        {{--<a href="forms.html"> <i class="fa fa-pencil-square-o"></i> Forms </a>--}}
                        {{--</li>--}}
                        {{--<li>--}}
                        {{--<a href=""> <i class="fa fa-desktop"></i> UI Elements <i class="fa arrow"></i> </a>--}}
                        {{--<ul>--}}
                        {{--<li><a href="buttons.html">--}}
                        {{--Buttons--}}
                        {{--</a></li>--}}
                        {{--<li><a href="cards.html">--}}
                        {{--Cards--}}
                        {{--</a></li>--}}
                        {{--<li><a href="typography.html">--}}
                        {{--Typography--}}
                        {{--</a></li>--}}
                        {{--<li><a href="icons.html">--}}
                        {{--Icons--}}
                        {{--</a></li>--}}
                        {{--<li><a href="grid.html">--}}
                        {{--Grid--}}
                        {{--</a></li>--}}
                        {{--</ul>--}}
                        {{--</li>--}}
                        {{--<li>--}}
                        {{--<a href=""> <i class="fa fa-file-text-o"></i> Pages <i class="fa arrow"></i> </a>--}}
                        {{--<ul>--}}
                        {{--<li><a href="login.html">--}}
                        {{--Login--}}
                        {{--</a></li>--}}
                        {{--<li><a href="signup.html">--}}
                        {{--Sign Up--}}
                        {{--</a></li>--}}
                        {{--<li><a href="reset.html">--}}
                        {{--Reset--}}
                        {{--</a></li>--}}
                        {{--<li><a href="error-404.html">--}}
                        {{--Error 404 App--}}
                        {{--</a></li>--}}
                        {{--<li><a href="error-404-alt.html">--}}
                        {{--Error 404 Global--}}
                        {{--</a></li>--}}
                        {{--<li><a href="error-500.html">--}}
                        {{--Error 500 App--}}
                        {{--</a></li>--}}
                        {{--<li><a href="error-500-alt.html">--}}
                        {{--Error 500 Global--}}
                        {{--</a></li>--}}
                        {{--</ul>--}}
                        {{--</li>--}}
                        {{--<li>--}}
                        {{--<a href="https://github.com/modularcode/modular-admin-html"> <i--}}
                        {{--class="fa fa-github-alt"></i> Theme Docs </a>--}}
                        {{--</li>--}}
                        {{--</ul>--}}
                    </nav>
                </div>
                <footer class="sidebar-footer">
                    <ul class="nav metismenu" id="customize-menu">
                        <li>
                            <ul>
                                <li class="customize">
                                    <div class="customize-item">
                                        <div class="row customize-header">
                                            <div class="col-xs-4"></div>
                                            <div class="col-xs-4"><label class="title">fixed</label></div>
                                            <div class="col-xs-4"><label class="title">static</label></div>
                                        </div>
                                        <div class="row hidden-md-down">
                                            <div class="col-xs-4"><label class="title">Sidebar:</label></div>
                                            <div class="col-xs-4"><label>
                                                    <input class="radio" type="radio" name="sidebarPosition"
                                                           value="sidebar-fixed">
                                                    <span></span>
                                                </label></div>
                                            <div class="col-xs-4"><label>
                                                    <input class="radio" type="radio" name="sidebarPosition" value="">
                                                    <span></span>
                                                </label></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-4"><label class="title">Header:</label></div>
                                            <div class="col-xs-4"><label>
                                                    <input class="radio" type="radio" name="headerPosition"
                                                           value="header-fixed">
                                                    <span></span>
                                                </label></div>
                                            <div class="col-xs-4"><label>
                                                    <input class="radio" type="radio" name="headerPosition" value="">
                                                    <span></span>
                                                </label></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-xs-4"><label class="title">Footer:</label></div>
                                            <div class="col-xs-4"><label>
                                                    <input class="radio" type="radio" name="footerPosition"
                                                           value="footer-fixed">
                                                    <span></span>
                                                </label></div>
                                            <div class="col-xs-4"><label>
                                                    <input class="radio" type="radio" name="footerPosition" value="">
                                                    <span></span>
                                                </label></div>
                                        </div>
                                    </div>
                                    <div class="customize-item">
                                        <ul class="customize-colors">
                                            <li><span class="color-item color-red" data-theme="red"></span></li>
                                            <li><span class="color-item color-orange" data-theme="orange"></span></li>
                                            <li><span class="color-item color-green active" data-theme=""></span></li>
                                            <li><span class="color-item color-seagreen" data-theme="seagreen"></span>
                                            </li>
                                            <li><span class="color-item color-blue" data-theme="blue"></span></li>
                                            <li><span class="color-item color-purple" data-theme="purple"></span></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <a href=""> <i class="fa fa-cog"></i> Customize </a>
                        </li>
                    </ul>
                </footer>
            </aside>
            <div class="sidebar-overlay" id="sidebar-overlay"></div>

            @yield('content')

            <footer class="footer">
                <div class="footer-block buttons">
                    <iframe class="footer-github-btn"
                            src="https://ghbtns.com/github-btn.html?user=modularcode&repo=modular-admin-html&type=star&count=true"
                            frameborder="0" scrolling="0" width="140px" height="20px"></iframe>
                </div>
                <div class="footer-block author">
                    <ul>
                        <li> created by <a href="https://github.com/modularcode">ModularCode</a></li>
                        <li><a href="https://github.com/modularcode/modular-admin-html#get-in-touch">get in touch</a>
                        </li>
                    </ul>
                </div>
            </footer>
        </div>
    </div>

@endsection