<div>
	<!--
	Description: VLAN Configuration.
	Copyright (c) 2016 by Cisco Systems, Inc.
	All rights reserved.
	-->
	<div class="pageTitle">
		{{'menu_vlan' | translate}}
	</div>
	<div class="pageContent">
		<div kendo-tab-strip="tabExample">
			<ul>
				<li class="k-state-active" ng-show="true" >
					{{'vlan_layer2' | translate}}
				</li>
				<li ng-show="!isMobilityAgent && showVlanGroups">
					{{'vlan_group' | translate}}
				</li>
				<li ng-show="!isMobilityAgent">
					{{'vlan_ip_dhcp_snooping' | translate}}
				</li>
			</ul>

			<!-- Vlan Layer2 page design -vlanApplySection-->
			<div>
				<div kendo-grid="layer2VlanGrid" id="layer2VlanGrid" name="layer2VlanGrid"
					 k-options="layer2VlanGridOptions"></div>

				<div class="gridActionButtons">
					<button kendo-button="addPeerBtn" class="btn btn-primary pl-add" ng-click="addVlanRow()" ng-disabled="!vlanAddSection">
						{{'com_add' | translate}}
					</button>
					<button kendo-button="deletePeerBtn" class="btn btn-primary pl-delete" ng-disabled="vlanDeleteSection" ng-click="deleteConfirmation()">
						{{'com_delete' | translate}}
					</button>
					<div class="pull-right">
						<button kendo-button="applyPeerBtn" class="btn btn-primary pl-apply" ng-disabled="vlanApplySection" ng-click="applyVlan2Layer()">
							{{'com_apply' | translate}}
						</button>
					</div>
				</div>

				<div class="editSection" ng-show="vlanShowEditSection">
					<div class="title">
						{{'vlan_edit_title' | translate}}
					</div>
					<form name="vlanForm" id="vlanForm" kendo-validator="vlanValidator"	k-options="vlanValidations">
						<div class="row form-group">
							<div class="col-sm-6 fieldinput-right">
								<span class="label pl-mandatory">{{'vlan_id' | translate}}</span>
							</div>
							<div class="col-sm-6">
								<input class="k-textbox form-control"
									   name="vlanId" ng-disabled="vlanIdState"
									   ng-model="vlanEditData.vlan" placeholder="2-4094" min="2" max="4094"
									   required data-required-msg="{{'vlan_id_req_msg' | translate}}"
									   num-only maxlength="4" data-duplicate data-duplicate-msg="{{'vlan_id_exist_msg' | translate}}" data-range data-range-msg="{{'vlan_id_invalid_msg' | translate}}">
								<tooltip helptext="{{'help_VLAN_ID' | translate}}" position="top"></tooltip>
							</div>
						</div>
						<div class="row form-group">
							<div class="col-sm-6 fieldinput-right">
								<span class="label pl-mandatory">{{'com_name' | translate}}</span>
							</div>
							<div class="col-sm-6">
								<input class="k-textbox form-control" name="vlanName"
									   ng-model="vlanEditData.name"
									   required data-required-msg="{{'vlan_name_req_msg' | translate}}" data-checkVlanName data-checkVlanName-msg="{{'vlan_name_invalid_msg' | translate}}">
							</div>
						</div>
						<div class="row form-group">
							<div class="col-sm-6 fieldinput-right">
								<span class="label right">{{'com_state' | translate}}</span>
							</div>
							<div class="col-sm-6">
								 <span class="toggleClass">
								<toggle-button  button-options="{{'com_active' | translate}},{{'com_suspended' | translate}}"
												ng-model="vlanEditData.status">
								</toggle-button></span>
								<tooltip helptext="{{'help_VLAN_State' | translate}}" position="top"></tooltip>
							</div>
						</div>
						<div class="row formActionButtons fieldinput-center">
							<button kendo-button="saveBtn" class="btn btn-primary pl-save" ng-click="saveVlanData()">
								{{'com_save' | translate}}
							</button>
							<button kendo-button="cancelBtn" class="btn btn-primary pl-cancel" ng-click="vlanCancel()">
								{{'com_cancel' | translate}}
							</button>
						</div>
					</form>
				</div>
			</div>


			<!-- Vlan group page design -->
			<div ng-show="showVlanGroups">
				<div kendo-grid="vlanGroupGrid" id="vlanGroupGrid" name="vlanGroupGrid"
					 k-options="vlanGroupGridOptions"></div>
				<div class="gridActionButtons">
					<button kendo-button="addPeerBtn" class="btn btn-primary pl-add" ng-click="addVlanGrpRow()">
						{{'com_add' | translate}}
					</button>
					<button kendo-button="deletePeerBtn" class="btn btn-primary pl-delete" ng-disabled="vlanGrpDelBtn" ng-click="delVlanGrpRow()">
						{{'com_delete' | translate}}
					</button>
					<div class="pull-right">
						<button kendo-button="applyPeerBtn" class="btn btn-primary pl-apply" ng-click="vlanGroupApplyBtn()" ng-disabled="disVlanGrpApplyBtn">
							{{'com_apply' | translate}}
						</button>
					</div>
				</div>
				<div class="editSection"  ng-show="vlanGrpShowEditSection">
					<div class="title">
						{{'vlan_group_edit_title' | translate}}
					</div>
					<form name="vlanGroupForm" id="vlanGroupForm" kendo-validator="vlanGroupValidator" k-options="vlanGroupValidations">
						<div class="row form-group">
							<div class="col-sm-6 fieldinput-right">
								<span class="label pl-mandatory" for="vlanGroup">{{'vlan_group_name' | translate}}</span>
							</div>
							<div class="col-sm-6">
								<input class="k-textbox form-control" id="vlanGroup" name="vlanGroup" ng-model="vlanGrpEditData.VlanGroup" alpa-numeric-hyphen-only required data-required-msg="{{'vlan_group_req_msg' | translate}}"
									   data-duplicate="" data-duplicate-msg="{{'vlan_group_exist_msg' | translate}}" data-checkvlangroup data-checkvlangroup-msg="{{'vlan_group_invalid_msg' | translate}}">
								<tooltip helptext="{{'help_VLAN_group_name' | translate}}" position="top"></tooltip>
							</div>
						</div>
						<div class="row form-group">
							<div class="col-sm-6 fieldinput-right">
								<span class="label pl-mandatory">{{'vlan_list' | translate}}</span>
							</div>
							<div class="col-sm-6">
								<input class="k-textbox form-control" name="vlanList" ng-model="vlanGrpEditData.VlanList"  required data-required-msg="{{'vlan_list_req_msg' | translate}}"
									   min="1" max="4094"  num-comma-hyphen-only data-checkVlanList data-checkVlanList-msg="{{'vlan_list_invalid_msg' | translate}}" data-range="" data-range-msg="{{'vlan_list_invalid_msg' | translate}}">
								<tooltip helptext="{{'help_VLAN_list' | translate}}" position="top"></tooltip>
							</div>
						</div>
						<div class="row formActionButtons fieldinput-center">
							<button kendo-button="saveBtn" class="btn btn-primary pl-save" ng-click="saveVlanGrpData()">
								{{'com_save' | translate}}
							</button>
							<button kendo-button="cancelBtn" class="btn btn-primary pl-cancel" ng-click="cancelVlanGrpData();">
								{{'com_cancel' | translate}}
							</button>
						</div>
					</form>
				</div>

			</div>
			<div>
				<div class="row form-group">
					<div class="col-sm-6 fieldinput-right">
						<span class="label">{{'vlan_ip_dhcp_snooping' | translate}}</span>
					</div>
					<div class="col-sm-6">
						 <span class="toggleClass">
						<toggle-button  button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}"
									   ng-model="ipDhcpStatus" ng-inti="ipDhcpStatus=ipDhcpStatus" ng-change="ipDhcpToggleBtn();"></toggle-button></span>
						<tooltip helptext="{{'help_VLAN_IP_DHCP_snooping' | translate}}"></tooltip>
					</div>
				</div>
				<div kendo-grid="ipDhcpSnnopingGrid" id="ipDhcpSnnopingGrid" name="ipDhcpSnnopingGrid"
					 k-options="ipDhcpSnnopingGridOptions"></div>
				<div class="gridActionButtons">
					<button kendo-button="addPeerBtn" class="btn btn-primary pl-add" ng-click="addVlanListRow()">
						{{'com_add' | translate}}
					</button>
					<button kendo-button="deletePeerBtn" class="btn btn-primary pl-delete" ng-disabled="vlanListDelBtn" ng-click="delVlanListRow()">
						{{'com_delete' | translate}}
					</button>
					<div class="pull-right">
						<button kendo-button="applyPeerBtn" class="btn btn-primary pl-apply" ng-click="vlanListApplyBtn()" ng-disabled="disVlanListApplyBtn">
							{{'com_apply' | translate}}
						</button>
					</div>
				</div>
				<div class="editSection" ng-show="vlanListShowEditSection">
					<div class="title">
						{{'vlan_list_edit_title' | translate}}
					</div>
					<form name="vlanListForm" id="vlanListForm" kendo-validator="vlanListValidator" k-options="vlanListValidations">
						<div class="row form-group">
							<div class="col-sm-6 fieldinput-right">
								<span class="label pl-mandatory">{{'vlan_list' | translate}}</span>
							</div>
							<div class="col-sm-6">
								<input class="k-textbox form-control" name="vlanList" ng-model="vlanListEditData.VlanList" required data-required-msg="{{'vlan_list_invalid_msg' | translate}}"
									   min="1" max="4094"  num-comma-hyphen-only  data-checkVlanList data-checkVlanList-msg="{{'vlan_list_invalid_msg' | translate}}"  data-range="" data-range-msg="{{'vlan_list_invalid_msg' | translate}}" data-duplicateRecord="" data-duplicateRecord-msg="{{'vlan_list_exist_msg' | translate}}">
								<tooltip helptext="{{'help_VLAN_list' | translate}}"></tooltip>
							</div>
						</div>
						<div class="row formActionButtons fieldinput-center">
							<button kendo-button="saveBtn" class="btn btn-primary pl-save" ng-click="saveVlanListData()">
								{{'com_save' | translate}}
							</button>
							<button kendo-button="cancelBtn" class="btn btn-primary pl-cancel" ng-click="cancelVlanListData();">
								{{'com_cancel' | translate}}
							</button>
						</div>
					</form>
				</div>

			</div>
		</div>
	</div>
</div>
<script>
	$("#mail-switch").kendoMobileSwitch({
		onLabel: "YES",
		offLabel: "NO"
	});
</script>
