@using System.Web.Mvc.Html
@using EnVisage.Code
@using EnVisage.Models
@using EnVisage.Code.HtmlHelpers
@model EnVisage.Models.SlidersGroupModel

@{
	// need to init angular header controller
	var json = Newtonsoft.Json.JsonConvert.SerializeObject(new
	{
		slidersData = Model.Sliders,
		groupId = Model.GroupDisplayId,
		availableToAddItems = Model.Options
	});
	var sliderClientId = Html.IdFor(t => t.Sliders).ToHtmlString().Replace("_", ".");
}

<script type="text/javascript">
	$(function () {
		$("#addItems_@(Model.GroupDisplayId)").select2({
    		placeholder: "Select teams",
    	});
    });

</script>
<div class="col-sm-12" id="slidersGroupContainer_@(Model.GroupDisplayId)" data-slider-group="sliderGroup_@(Model.GroupDisplayId)" ng-controller="slidersGroupController" ng-init="init(@json)" ng-cloak>
	@Html.HiddenFor(x => x.GroupId)

	<div ng-repeat="item in arrSliders track by $index">
		<input type="hidden" name="@(sliderClientId)[{{$index}}].Id" ng-value="item.Id" />
		<input type="hidden" name="@(sliderClientId)[{{$index}}].EntityId" ng-value="item.EntityId" />
		<input type="hidden" name="@(sliderClientId)[{{$index}}].ParentId" ng-value="item.ParentId" />
		<input type="hidden" name="@(sliderClientId)[{{$index}}].Name" ng-value="item.Name" />
		<input type="hidden" name="@(sliderClientId)[{{$index}}].IsExcludable" ng-value="item.IsExcludable" />
		<input type="hidden" name="@(sliderClientId)[{{$index}}].AllocatePercentage" class="sliderValue" ng_value="item.AllocatePercentage" />

		<div class="row" ng-attr-id="slider_{{item.DisplayId}}_div">
			<div class="col-sm-4" style="text-align: right;">
				<label ng-attr-id="slider_{{item.DisplayId}}_label">
					{{ item.Name }} 
				</label>
			</div>
			<div class="col-sm-4" style="padding-top: 6px;">
				<div ng-attr-id="slider_{{item.DisplayId}}_container" data-slider-key="{{item.DisplayId}}" ng-class="item.Css">
					<span class="sliderTitle">{{ item.AllocatePercentage | number:0 }} %</span>
				</div>
			</div>
			<div class="col-sm-4">
				<a class="btn btn-xs btn-labeled btn-danger" ng-show="!isReadOnly && item.IsExcludable" ng-click="removeItem(item.DisplayId);">Remove</a>
			</div>
		</div>
	</div>
	<div id="additembutton_@(Model.GroupDisplayId)" data-ng-show="!isReadOnly && !showAddItemsDiv">
		<div>
			<div class="col-sm-4" style="text-align: right;">
				<a class="btn btn-success" href="javascript:void(0)" data-ng-click="showControlsToAddItems();">Add teams</a>
			</div>
			<div class="col-sm-4" style="padding-bottom: 17px;">
				&nbsp;
			</div>
			<div class="col-sm-4" style="padding-bottom: 17px;">
			</div>
		</div>
	</div>
	<div id="additemdiv_@(Model.GroupDisplayId)" data-ng-show="!isReadOnly && showAddItemsDiv">
		<div>
			<div class="form-group no-margin-hr select2-primary col-sm-4" style="text-align: right;">
				<select name="addItems_@(Model.GroupDisplayId)" class="form-control" id="addItems_@(Model.GroupDisplayId)" multiple="multiple"
                        ng-options="item.Text for item in availableToAddItems | excludeFrom:arrSliders | orderBy:['Text']" ng-model="selectedTeams">
				</select>
			</div>
			<div class="col-sm-4">
				<a class="btn btn-success" href="javascript:void(0)" data-ng-click="addItemsByUI(); "><i class="fa fa-plus"></i>Add</a>
				<a class="btn btn-default" href="javascript:void(0)" data-ng-click="hideControlsToAddItems();">Cancel</a>
			</div>
			<div class="col-sm-4" style="padding-bottom: 17px;">
			</div>
		</div>
	</div>
</div>