<?php 



Route::isCss(function(){
?> 
<style>
.switch{
	position: relative;
	background: rgb(221, 221, 221);
	min-width: 50px;
	min-height: 20px;
	border-radius: 20px;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	cursor: pointer;
	display: inline-block;
}
.switch.active{
	background: #8DE196;
}
.switch:before{
	content: "";
	cursor: pointer;
	position: absolute;
	left: 0;
	right: 50%;
	background: #fff;
	height: 100%;
	border: 1px solid rgb(221, 221, 221);
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
    border-radius: 20px;
    width: 40%;
}
.switch.active:before{
	content: "";
    position: absolute;
    right: 0;
    border-radius: 20px;
    width: 40%;
    height: 100%;
    left: 60%;
    background: #fff;
    border: 1px solid #8DE196;
}
</style> 
<?php
});



Route::isJs(function(){
ce("toggle")
->tpl(function(){
?>
<div class="switch" ng-click="toggle()" ng-class="{'active':ngModel}"></div>
<?php
})
->js(function(){
?>
<script>
	app.directive('toggle', function () {
		return {
			restrict: 'E',
			template:{{inject-tpl}},
			scope:{ngModel:"=",disabled:"=",ngChange:"&"},
			replace:true,
			controller:function($scope){
				$scope.scopename = "toggle";
				$scope.toggle = function(){
					if (!$scope.disabled) {
						$scope.ngModel = !$scope.ngModel;
						$scope.ngChange({value:$scope.ngModel});
					}
				}
			},
			link: function (scope, iElement, iAttrs) {
				
			}
		};
	});
</script>
<?php
});
});