{$searchPage = $smarty.get.query}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-container clearfix">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle navig-resp-bg" data-toggle="collapse" data-target="#khulja-sim-sim">
                <!--<span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> -->
            </button>


            <button type="button" class="navbar-toggle nav-toggle search-resp-bg" data-toggle="collapse" data-target="#navbar-search-collapse">
             <!--  <span class="glyphicon glyphicon-search"></span> -->
         </button>

         <a class="navbar-brand cb-logo" href="{$baseurl}">{$website_title}</a>
     </div>

     {$head_menu=cb_menu()}

     <div class="navbar-collapse navbar-sm-search collapse" id="navbar-search-collapse">
        <!--<form class="" role="search" action="{$baseurl}">-->
        <form class="navbar-form navbar-left no-border" role="search">
            <div class="input-group cbsearchtype">
                <input type="text" class="form-control" name="query" value="{'query'|get_form_val:true}" id="query">
                <div class="input-group-btn">
                    <input tabindex="-1" type="submit" name="cbsearch" id="cbsearch" value="{lang code='Go'}" class="btn btn-default" />
                    <input type="hidden" name="type" class="type" value="{if isset($smarty.get.type)}{$smarty.get.type}{else}videos{/if}" id="type">
                    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle search-drop-btn" type="button">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        {$counter = 1}
                        {foreach from=$Cbucket->search_types item=t key=stypes}
                        {if $counter == 3}
                        <li value="{$stypes}" {if $smarty.get.type==$stypes || $smarty.get.type==''}  class="active"  {/if}>
                            <a  href="#">{$stypes}</a>
                        </li>
                        {else}
                        <li value="{$stypes}" {if $smarty.get.type==$stypes}  class="active" {/if}>
                            <a  href="#">{$stypes}</a>
                        </li>
                        {/if}
                        {$counter = $counter + 1}
                        {/foreach}
                    </ul>
                </div>
                
            </div>

        </form>
    </div>


    <ul class="nav navbar-nav main-nav navbar-collapse collapse manual-height left-margin-xero pad-left-xero" id="khulja-sim-sim">
        {foreach $head_menu as $menu}
        {if $menu@iteration < 5}
        <li {if $smarty.get.type==$menu.name|lower }class="active"
        {elseif !$smarty.get.type}
        {if $menu.active}class="active"{/if}
        {/if}><a href="{$menu.link}">{$menu.name}</a></li>
        {/if}
        {/foreach}

        {if userid()}
        <li class="dropdown hidden-lg hidden-md hidden-sm ">
            <a href="{link name='upload'}" class="dropdown-toggle" data-toggle="dropdown">{lang code="Uploads"} <b class="caret"></b></a>
            <ul role="menu" class="dropdown-menu">
                <li><a href="{link name='upload'}">{lang code="Upload Video"}</a></li>
                <li><a href="{link name='photo_upload'}">{lang code="Upload Photo"}</a></li>
            </ul>
        </li>
        <li class="navbar-sm-login-links"><a href="{link name='logout'}">{lang code='logout'}</a></li>
        {else}
        
        <!-- Shown to small devices only Start  @todo : Add condition for logged in user -->

        <li class="navbar-sm-login-links"><a href="#" data-toggle="modal" data-target="#login-modal">{lang code='login'}</a></li>
        <li class="navbar-sm-login-links"><a href="{link name="signup"}">{lang code='Create new account'}</a></li>
        <!-- Ends -->
        {/if}
        {if count($head_menu)>4}
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
            <ul class="dropdown-menu">

                {foreach $head_menu as $menu}
                {if $menu@iteration > 4}
                <li{if $smarty.get.type==$menu.name|lower }class="active"
                {elseif !$smarty.get.type}
                {if $menu.active}class="active"{/if}
                {/if}><a href="{$menu.link}">{$menu.name}</a></li>
                {/if}
                {/foreach}
            </ul>
        </li>
        {/if}
    </ul>


    <!-- Shown to small devices only Start-->
    <form id="search" class="navbar-form navbar-search navbar-left" name="search" method="get" role="search" action="{link name='search_result'}">

        <div class="input-group mtxs cbsearchtype">
            <input type="text" class="form-control" name="query" value="{'query'|get_form_val:true}" id="query">
            <div class="input-group-btn">
                <input tabindex="-1" type="submit" name="cbsearch" id="cbsearch" value="{lang code='Go'}" class="btn btn-default" />
                <input type="hidden" name="type" class="type" value="{if isset($smarty.get.type)}{$smarty.get.type}{else}videos{/if}" id="type">
                <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle search-drop-btn" type="button">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    {$counter = 1}
                    {foreach from=$Cbucket->search_types item=t key=stypes}
                    {if $counter == 3}
                    <li value="{$stypes}" {if $smarty.get.type==$stypes || $smarty.get.type==''}  class="active"  {/if}>
                        <a  href="#">{$stypes}</a>
                    </li>
                    {else}
                    <li value="{$stypes}" {if $smarty.get.type==$stypes}  class="active" {/if}>
                        <a  href="#">{$stypes}</a>
                    </li>
                    {/if}
                    {$counter = $counter + 1}
                    {/foreach}
                </ul>
            </div>
            
        </div>

    </form>
    <!-- Ends -->



    <!-- Shown to Large displays only Start -->
    <ul class="nav navbar-nav navbar-right nav-login-btns">

        {if userid()}
        <li class="dropdown myaccount-dd">
            <span class="dropdown-toggle theme_color col-md-12" data-toggle="dropdown"> <img class="img-circle" src="{$userquery->getUserThumb('','small',userid())}" style="width: 40px; height: 40px;"/> {$userquery->username}<b class="caret"></b></span>
            <ul class="dropdown-menu">

                {if has_access('admin_access')}
                <li><a href="{$admin_baseurl}">{lang code="Admin area"}</a></li>
                {/if}
                <li><a href="{link name='my_account' }{userid}">{lang code="my_account"}</a></li>
                <li><a href="{link name='my_videos'}">{lang code="Manage Videos"}</a></li>
                <li><a href="{link name='channels'}">{lang code="View Channels"}</a></li>
                <li class="divider"></li>
                <li><a href="{link name='logout'}">{lang code="Logout"}</a></li>
            </ul>
        </li>
        {else}
        <li>
            <div class="mrl">
                <a href="{link name='signup'}" class="btn btn-primary btn-success btn-sm">{lang code="Create Account"}</a>
                <a href="#" data-toggle="modal" data-target="#login-modal" class="btn btn-primary btn-sm">{lang code="Login"}</a>
            </div>

        </li>
        {/if}
    </ul>
    <!-- Ends -->

    <!-- Shown to Large displays only Start -->
    {if userid()}
    <div class="upload-dropdown-btn-d hidden-xs ">
        <div class="btn-group">
            <button title="Upload" class="btn btn-primary" type="button">
                <a class="upload-vid-photo-icon" href="{link name='upload'}">Upload</a>
            </button>
            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul role="menu" class="dropdown-menu upload-dropdown">
                <li><a href="{link name='upload'}">{lang code="Upload Video"}</a></li>
                <li><a href="{link name='photo_upload'}">{lang code="Upload Photo"}</a></li>
            </ul>
        </div>
    </div>
    {/if}
    
    <!-- Ends -->


    <!-- SHown to middle size displays only  @todo : Add condition for logged in user -->
    <ul class="nav navbar-nav navbar-right nav-login-dd">

        <li class="search-form show-small-form pull-left mrxll" ><i class="glyphicon glyphicon-search cursor-pointer"></i></li>
        <div class="form-small full-width">                    
            <form action="{link name='search_result'}" role="search" method="get" name="search_small" id="search_small">
                <div class="input-group cbsearchtype">
                    <input type="text" class="form-control" name="query" value="{'query'|get_form_val:true}" id="query">
                    <div class="input-group-btn">
                        <input tabindex="-1" type="submit" name="cbsearch" id="cbsearch" value="{lang code='Go'}" class="btn btn-default" />
                        <input type="hidden" name="type" class="type" value="{if isset($smarty.get.type)}{$smarty.get.type}{else}videos{/if}" id="type">
                        <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle search-drop-btn" type="button">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                            {$counter = 1}
                            {foreach from=$Cbucket->search_types item=t key=stypes}
                            {if $counter == 3}
                            <li value="{$stypes}" {if $smarty.get.type==$stypes || $smarty.get.type==''}  class="active"  {/if}>
                                <a  href="#">{$stypes}</a>
                            </li>
                            {else}
                            <li value="{$stypes}" {if $smarty.get.type==$stypes}  class="active" {/if}>
                                <a  href="#">{$stypes}</a>
                            </li>
                            {/if}
                            {$counter = $counter + 1}
                            {/foreach}
                        </ul>
                    </div>
                    
                </div>
                
                
            </form>
        </div>
        {if userid()}
        <li class="dropdown myaccount-dd">
            <span class="dropdown-toggle theme_color col-md-12" data-toggle="dropdown"><img class="img-circle" src="{$userquery->getUserThumb('','small',userid())}" style="width: 40px; height: 40px;"/><b class="caret"></b></span>
            <ul class="dropdown-menu">

                {if has_access('admin_access')}
                <li><a href="{$admin_baseurl}">{lang code="Admin area"}</a></li>
                {/if}
                <li><a href="{link name='my_account' }{userid}">{lang code="my_account"}</a></li>
                <li><a href="{link name='my_videos'}">{lang code="Manage Videos"}</a></li>
                <li><a href="{link name='channels'}">{lang code="View Channels"}</a></li>
                <li class="divider"></li>
                <li><a href="{link name='logout'}">{lang code="Logout"}</a></li>
            </ul>
        </li>
        {else}
        <li>
            <div class=" mlm mrm">
                <a href="#" data-toggle="modal" data-target="#login-modal"><span class="glyphicon glyphicon-user"></span></a>
            </div>

        </li>
        {/if}
        



    </ul>
</div>
<!-- Ends -->
</nav>

<script>
    $('.nav-login-dd li .dropdown-menu').click(function(e){
        e.preventDefault();
        return false;
    })
</script>


<div class="modal fade" id="login-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <form name="login-form" role="form" action="{link name='signup'}" method="post">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{lang code="Login"}</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="login_username">{lang code="Username"}</label>
                        <input type="text" class="form-control" id="login_username"  name="username"  placeholder="Enter username">
                    </div>

                    <div class="form-group">
                        <label for="login_password">{lang code="Password"}</label>
                        <input type="password" class="form-control" id="login_password" name="password" placeholder="Enter password">
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> {lang code="Remember me"}
                        </label>
                    </div>


                </div>
                <div class="modal-footer">
                    <a href="{link name='signup'}" class="btn btn-primary btn-success btn-sm pull-left">{lang code="Create Account"}</a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{lang code="Cancel"}</button>
                    <input type="submit" class="btn btn-primary" value="{lang code='Login'}" name="login">
                </div>
            </div><!-- /.modal-content -->
        </form>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    $(document).ready(function(){
        $(".cbsearchtype a").on({
            click: function(e){
                e.preventDefault();
                var prent_li = $(this).parents();
                $('.type').val($(this).html());
                $('.cbsearchtype li').removeClass('active');
                prent_li.addClass('active');
            /*var searchtype = $("#SearchType").val();
            var buttonText = $(this).text().toLowerCase();
            if($("#SearchType option[value='"+ buttonText +"']").length > 0){
                $("#SearchType option:selected").removeAttr("selected");
                $("#SearchType option[value='"+ buttonText +"']").attr("selected" , "selected");
                $(this).parents("ul").find(".active").removeClass("active");
                $(this).parent().addClass("active");

            }*/
        }
    });
        
        $('.show-small-form').click(function() {
            $('.form-small').toggleClass('show');   
        });
        
        

    });

</script>