<nav class="navbar navbar-findcond navbar-fixed-top header-layout">
	<div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
		<div class="navbar-header pull-left">
			<a class="navbar-brand logo-img" href="{{LINK }}" itemprop="url"><img itemprop="logo" src="{{CONFIG theme_url}}/img/<?php echo ($pt->mode != 'night') ? 'logo' : 'logo-light';?>.png" alt="{{CONFIG title}}"></a>
			<form class="navbar-form navbar-left search-header" role="search" action="{{LINK search}}" method="GET">
                <div class="form-group">
                    <input type="text" class="form-control" id="search-bar" name="keyword" placeholder="{{LANG search_keyword}}" autocomplete="off" value="{{SEARCH_KEYWORD}}"> 
                    <?php
                    if (!empty($_GET['is_channel'])) {
                    ?>
                    <input type="hidden" name="is_channel" value="true">
                    <?php } ?>
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" onclick="javascript:$('.search-header input').focus();"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                </div>
                <div class="search-dropdown hidden"></div>
            </form>
		</div>
		<div class="pull-right">
			<ul class="nav navbar-nav navbar-right">
				<?php if ($pt->config->night_mode == 'both'): ?>
				<li class="toggle-mode hidden-xs pull-left">
					<label class="switch" data-toggle="tooltip" data-placement="bottom" title="{{LANG mode}}">
						<input type="checkbox" {{MODE}} id="toggle-mode">
						<span class="slider round">
							<svg fill="#009da0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-bulb"><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" /></svg>
						</span>
					</label>
				</li>
				<?php endif; ?> 
				<li class="show-in-mobile pull-left">
					<a href="#" class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </a>
				</li>
				<?php if (IS_LOGGED): ?>
				<li class="hide-from-mobile pull-left">
					 <a href="{{LINK messages}}">
				   		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
				   		<span id="new-messages"></span>
				    </a>
				</li>
				<li class="hide-from-mobile dropdown pull-left">
				    <a href="javascript:void(0);"  id="get-notifications" class=" dropdown-toggle" data-toggle="dropdown">
				   		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"></path></svg>
				   		<span id="new-notifications"></span>
				    </a>
				    <ul class="dropdown-menu notfi-dropdown" id="notifications">
					    <li>
					    	<h5>
					    		<b id="all-notifications"></b> {{LANG notifications}}
					    		<i class="fa fa-circle-o-notch spin hidden"></i>
					    	</h5>
					    </li>
					    <li>
					    	<ul id="notifications-list"></ul>
					    </li>
				    </ul>
				</li>
				<?php endif; ?>
				{{SIDE_HEADER}}
			</ul>
		</div>
	</div>
</nav>

<nav class="navbar navbar-findcond navbar-fixed-top header-layout hidden search-bar" style="margin-top: 49px;">
    <div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
		<div class="navbar-header">
			<form class="search-header-mobile" role="search" action="{{LINK search}}" method="GET">
                <div class="form-group">
                    <input type="text" class="form-control" id="search-bar-mobile" name="keyword" placeholder="{{LANG search_keyword}}" autocomplete="off" value="{{SEARCH_KEYWORD}}"> 
                </div>
                <div class="search-dropdown hidden"></div>
            </form>
		</div>
	</div>
</nav>
<?php if ($pt->page != 'login') { ?>
<nav class="navbar navbar-findcond navbar-default second-header-layout">
    <div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
		<div class="navbar-inner" id="navbar">
			<ul class="nav navbar-nav">
			    <li class="hide-from-mobile <?php echo ($pt->page == 'home') ? 'active': '';?>">
					<a href="{{LINK }}"> {{LANG home}}</a>
				</li>
				<li class="hide-from-mobile <?php echo ($pt->page == 'latest') ? 'active': '';?>">
					<a href="{{LINK videos/latest}}">{{LANG latest_videos}}</a>
				</li>
				<li class="hide-from-mobile <?php echo ($pt->page == 'top') ? 'active': '';?>">
					<a href="{{LINK videos/top}}">{{LANG top_videos}}</a>
				</li>
				<li class="hide-from-mobile <?php echo ($pt->page == 'trending') ? 'active': '';?>">
					<a href="{{LINK videos/trending}}">{{LANG trending}}</a>
				</li>
				<li class="dropdown hide-from-mobile <?php echo ($pt->page == 'category') ? 'active': '';?>">
				   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{LANG categories}} <span class="caret"></span></a>
				   <ul class="dropdown-menu categories-drop-down" role="menu">
				    <?php foreach($pt->categories as $key => $category) { 
					    if (1) { ?>
					    <li class="hide-from-mobile">
						   <a class="category" href="{{LINK videos/category/<?php echo $key?>}}"><?php echo $category?></a>
						</li>
					<?php } }?>
				   </ul>
				</li>
				<li class="hide-from-mobile <?php echo ($pt->page == 'articles') ? 'active': '';?>">
				   <a href="{{LINK articles}}">{{LANG articles}}</a>
				</li>
			</ul>
			
			<ul class="nav navbar-nav pull-right">
				<?php if ($pt->config->upload_system == 'on') { ?> 
			    <li class="hide-from-mobile">
					<a href="{{LINK upload-video}}" class="btn upload-button">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
						<span class="hide-in-mobile">{{LANG upload}}</span>
					</a>
				</li>
				<?php } ?>
				<?php if ($pt->config->import_system == 'on') { ?> 
			    <li class="hide-from-mobile">
					<a href="{{LINK import-video}}" class="btn import-button">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg> 
						<span class="hide-in-mobile">{{LANG import}}</span>
					</a>
				</li>
				<?php } ?>
			</ul>
			
		</div>
	</div>
</nav>
<?php } ?>

<?php if (IS_LOGGED): ?>
<script>
	jQuery(document).ready(function($) {
		pt_get_notifications({type:'new'});
		
		$("#get-notifications").click(function(event) {
			if ($('#notifications').css('display') == 'none') {
				var notfi_cont = $("ul.notfi-dropdown");
				
				if ($("span#new-notifications").html() != '') {
					$(this).find('span#new-notifications').empty();
				}

				pt_get_notifications({sa:1});
			}
		});

		setInterval(function(){
			pt_get_notifications({type:'new'});
		},(1000 * 60));
	});

	function pt_get_notifications(args = {}){
		var notfi_cont = $("ul.notfi-dropdown");
		var notfi_set  = $("ul#notifications");
		
		defparams = {
			type: false,
			sa:false
		}

		options = Object.assign(defparams,args);
		data    = {'hash':$('.main_session').val()};

		if (options['type']) {
			data['t'] = options['type'];
		}

		if (options['sa']) {
			data['sa'] = options['sa'];
			notfi_set.find('i.spin').removeClass('hidden');
		}

		$.ajax({
			url: '{{LINK aj/get_notifications}}',
			type: 'GET',
			dataType: 'json',
			data:data
		})
		.done(function(data) {
			if (data.status == 200) {
				if (data.new) {
					$("span#new-notifications").html($('<b>',{
						text:data.new
					}));
				}
				else{
					notfi_set.find('b').text(data.len);
					notfi_set.find('ul').html(data.html);
				}			
			}
			else if(data.status == 304 && options['sa']){
				notfi_set.find('ul').html($("<li>",{
					class:'no-notifications',
					text:'You do not have any notifications'
				}));
			}

			if (options['sa']) {notfi_set.find('i.spin').addClass('hidden');}
			
		})
		.fail(function() {
			console.log("error");
		});
	}
</script>
<?php endif ?>

<script>



$('.search-icon').on('click', function(event) {
	event.preventDefault();
	$('.search-bar').toggleClass('hidden');
});
$('#search-bar').keyup(function(event) {
	var search_value = $(this).val();
	var search_dropdown = $('.search-dropdown');
	if (search_value == '') {
		search_dropdown.addClass('hidden');
		search_dropdown.empty();
		return false;
	} else {
		search_dropdown.removeClass('hidden');
	}
    $.post('{{LINK aj/search}}', {search_value: search_value}, function(data, textStatus, xhr) {
    	if (data.status == 200) {
    		search_dropdown.html(data.html);
    	} else {
	       search_dropdown.addClass('hidden');
		   search_dropdown.empty();
		   return false;
    	}
    });
});
</script>