<section>
	<div class="tabs tabs-style-topline">
		<nav>
			<ul>
				<li><a href="#section-topline-1" onclick="load_friends('{id}')"><span>Друзья</span></a></li>
				<li><a href="#section-topline-2" onclick="load_friend_requests('un')"><span>Исходящие заявки</span></a></li>
				<li><a href="#section-topline-3" onclick="load_friend_requests('in')"><span>Входящие заявки<font id="col_infriends"></font></span></a></li>
			</ul>
		</nav>
		<div class="content-wrap">
			<section id="section-topline-1">
				<div class="col-md-12 mb-15">
					<div class="input-group">
						<span class="input-group-btn">
							<button onclick="load_friends('{id}')" class="btn btn-default" type="button">Все</button>
							<button onclick="search_friend('{id}')" class="btn btn-default" type="button">Найти</button>
						</span>
						<input type="text" class="form-control" id="search_login" name="search_login" placeholder="Введите логин пользователя">
						<script> set_enter('#search_login', 'search_friend({id})'); </script>
					</div>
				</div>
				<div id="friends">
					<center><img src="{site_host}templates/{template}/img/loader.gif"></center>
				</div>
			</section>

			<section id="section-topline-2">
				<div id="unfriends">
					<center><img src="{site_host}templates/{template}/img/loader.gif"></center>
				</div>
			</section>

			<section id="section-topline-3">
				<div id="infriends">
					<center><img src="{site_host}templates/{template}/img/loader.gif"></center>
				</div>
			</section>
		</div>
	</div>
</section>
<script src="{site_host}templates/{template}/js/tabs.js"></script>
<script>
	load_friends("{id}");
	load_col_infriends();
	(function() { [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) { new CBPFWTabs( el ); }); })();
</script>