<style>
.list-group{
	padding-bottom:32px;
}
.list-group .form-inline{
	padding: 5px;
	line-height: 10px;
	border-radius: 5px;
	margin-bottom: 2px;
}

.list-group .form-inline.new, 
.list-group .form-inline:hover,
.more{
	background-color:#eee;
}

.list-group .form-inline .action{display:none;}

.list-group .form-inline:hover .action{display:block;}
.list-group .form-inline:hover .pos{ background:#fff; display:inline;}
.list-group .form-inline:hover .cid{ background:#fff; display:inline;}

.list-group .form-inline>div{ padding: 0;}

.list-group .form-inline .name, 
.list-group .form-inline .desc, 
.list-group .form-inline .pos, 
.list-group .form-inline .cid{
	border: none;
	box-shadow: none;
	padding:0;
	background: none;
}

.list-group .form-inline .cid,
.list-group .form-inline .pos{
	height: 20px;
	width: 70px;
	padding: 5px;
	margin: 1px;
}
.list-group .form-inline .name{
	font-size: 16px;	
	height: 20px;
	width:80%;
}
.list-group .form-inline .desc {
	font-size: 85%;
	color: #aaa;
	height: 17px;
	width: 80%;
}


.more .submit{display:block!important;}


#main-cate li{
	padding:5px;
}

#main-cate li.active{
	background-color: #f3f3f3;
}

.main-cate-desc{
	margin-bottom:10px;
}
.main-cate-desc input, .main-cate-desc .btn{
	border: none;
	background-color: #f3f3f3;
	box-shadow: none;
}

#scroller{
	position: relative;
	height: 550px;
	overflow-y: scroll;
	background: #f7f7f7;
}
</style>


<ul id="main-cate" class="list-unstyled col-xs-4 clearfix">
	<?php foreach(main_cate() as $cate){
			$active = ($cate->cid == $state->cate->cid)?'active':'';
			echo '<li value="'.$cate->cid.'" class="limit-line one-line '.$active.'"><a href="'.base_url(uri_by_title($cate->name)).'" alt="'.$cate-> name.'" title="'.$cate-> name.'"><i class="fa icon-xs '.$cate->cid.'-xs"></i> '.$cate-> name.'</a></li>';
	}?>
</ul>
<div id="scroller" class="col-xs-8">
	<?php  foreach(cate_all() as $main){ if($main->cid!='all'){  ?>
		
		<label class="uppercase" style="text-transform: uppercase;color:#0066cc;  margin-top: 10px;">
			<i class="fa icon-xs <?=$main->cid?>-xs"></i>
			<?=$main->name?>
		</label>
		<div class="input-group main-cate-desc">
		  <input type="text" class="form-control" placeholder="nhập nội dung mô tả ...." value="<?=$main->desc?>">
		  <a class="input-group-addon btn btn-primary"><i class="fa fa-check"></i></a>
		</div>
		
		<div id="<?=$main->cid?>" class="list-group clearfix">
			<?php foreach($main->subcate as $sub){ ?>
				<div class="col-xs-12 form-inline">
					<div class="col-xs-10">									
						<input class="name" value="<?=$sub->name?>" />
						<input class="pos" value="<?=$sub->id?>" />						
						<input class="desc" value="<?=$sub->desc?>" placeholder="cate description ..." />
						<input class="cid" value="<?=$sub->cid?>" />
					</div>
					<div class="action pull-right btn-group">
						<a class="edit btn btn-default btn-xs btn-info"><i class="fa fa-check"></i></a>
						<a class="remove btn btn-default btn-xs btn-warning"><i class="fa fa-remove"></i></a>
					</div>
				</div>
			<?php } ?>
			<div class="more col-xs-12 form-inline">
				<div class="col-xs-10">
					<input class="name" placeholder="Thêm cate name ..." />
					<input class="cid" value="<?=$main->cid?>-" />
					<input class="desc" placeholder="cate description ..." />
				</div>
				<div class="action pull-right btn-group">
					<a class="submit btn btn-default btn-xs btn-info"><i class="fa fa-plus"></i></a>
				</div>
			</div>
		</div>
		<div class="divider"></div>
	<?php } } ?>
	
</div>

<div class="divider"></div>
<div class="alert alert-warning clearfix">
	<a id="updateToDictionary" class="btn btn-danger pull-right" data-loading-text="<i class='fa fa-refresh fa-spin'></i>  Update từ khóa ... ">UPDATE TO DICTIONARY</a>
</div>