{extend name="public/common"/}
{block name="content"}
<div class="page_content_offset">
	<div class="container">
		<div class="row clearfix">
			<aside class="col-sm-4">
				<h2 class="pt_10">全部分类</h2>
				<hr>
				<div class="sidebar_content">
					<div class="clearfix s_cats">
						{JY:genre result="vo" limit="20"}
							<a title="{$vo['name']}" target="_self" {eq name="vo['id']" value="$data['id']"}class="active"{/eq} target="_blank" href="{$vo['url']}">{$vo['name']}</a>
						{/JY:genre}
						<a title="全部"  target="_genre" href="{:url('/genre')}">全部</a>
					</div>
				</div>
				<h2 class="pt_10">热门试听</h2>
				<hr>
				<div class="sidebar_content">
					{JY:songs result="v" limit="10" cache="86400" order="listens"}
					<div class="mb_10 clearfix relative play_box">
						<div class="row clearfix song_list">
							<span class="col-sm-10">
								<span class="ls_num {lt name="i" value="4"}ls_num_top{/lt}">{$i}</span>
								<a class="text-ellipsis" target="_play" title="{$v.name}" href="{$v['url']}">{$v['name']}</a>
							</span>
							<span class="col-sm-2 ls_btns">
								<a class="jp-play-me" data-id="{$v['id']}" href="javascript:;"><i class="jy jy-play"></i></a>
							</span>
						</div>
						<hr class="l_hr">
					</div>
					{/JY:songs}
				</div>
			</aside>

			<!--右侧分享列表-->
			<section class="col-sm-8">
				<div class="clearfix pt_10">
					<ul class="pull-right tabs_nav" role="tablist">
						<li {eq name="sort" value="new"}class="active"{/eq}><a class="tr_delay_hover" href="{$data['url_new']}">热门试听</a></li>
						<li {eq name="sort" value="hot"}class="active"{/eq}><a class="tr_delay_hover"  href="{$data['url_hot']}">最新添加</a></li>
					</ul>

					<h3 class="pull-left">{$data['name']} - 全部分享</h3>
				</div>
				<hr class="">
				<div class="clearfix mt_10 ">
					{JY:songs result="lv" page="1" genre="$data['id']" limit="20"  order="$order"}
					<div class="mb_10 clearfix relative play_box">
						<div class="row clearfix song_list">
							<span class="col-sm-5 col-xs-8">
								<span class="ls_num {lt name="i" value="11"}ls_num_top{/lt}">{$i}</span>
								<a class="text-ellipsis" target="_play" href="{$lv['url']}">{$lv['name']}</a>
							</span>
						<!-- 	<span class="col-sm-3 col-xs-2 p_hr_0"> -->
								
							</span>
							<span class="col-sm-2 ls_listen hidden-xs">{:number_format($lv['listens'])}</span>
							<span class="col-sm-2 col-xs-2 ls_btns">
								<a class="hidden-xs " target="_down" href="{$lv['down_url']}"><i class="jy jy-cloud-down-f"></i></a>
								<a class="music-action-btn hidden-xs" data-id="{$lv['id']}" data-action="fav" href="javascript:;"><i class="jy jy-like"></i></a>
								<a class="jp-play-me" data-id="{$lv['id']}" href="javascript:;"><i class="jy jy-play"></i></a>
							</span>
						</div>
						<hr class="l_hr">
					</div>
					{/JY:songs}
				</div>

				<div class="row clearfix mb_5">
					<div class="col-sm-4 clearfix ">
						
					</div>
					<div class="col-sm-8 t_align_r">
					<ul class="horizontal_list clearfix d_inline_middle ml_10 page_list">{$lv_page}</ul>
					</div>
				</div>
			</section>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        url: U("/api/actions/hits"),
        data: {id: "{$data['id']}", type : 'genre'},
        dataType: "jsonp"
    });
});
</script>
{/block}
{block name="player"}{include file="player/default"/}{/block}