@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') !!}
                    </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>

            <article class="content charts-flot-page">
                <div class="title-block">
                    <h3 class="title">
                        @yield('pageHeading')
                    </h3>
                    <p class="title-description">@yield('pageDescription')</p>
                </div>
                <section class="section">
                    @yield('content')
                </section>
            </article>


            <footer class="footer">
                <div class="footer-block author">
                    <ul>
                        <li>
                            <a href="https://binarity.cz">binarity s.r.o.</a>
                        </li>
                        <li>
                            <a href="https://github.com/modularcode">ModularCode</a>
                        </li>
                    </ul>
                </div>
            </footer>
        </div>
    </div>

@endsection