@extends('layouts.header')
@section('content')
<!--  BEGIN CONTENT AREA  -->
	<br>
	<div class="page-header">
		
		<div class="breadcrumb-four">
		<ol class="breadcrumb">
			<ul class="breadcrumb">
				<li><a href="{{url('dashboard')}}" title="Go to Home Page!"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>
				<li >
					<a href="{{url('Admin-Panel')}}"  title="Administration">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-unlock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
						Admin Panel
					</a>
				</li>
				<li >
					<a href="{{url('SideBarAccessConfig')}}" class="active" title="Side bar Configuration" >
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
						SideBar Access Configuration
					</a>
				</li>
				<li class="active">
					<a href="{{url('CustomizedMenuConfiguration')}}" class="active" title="Side bar Configuration" >
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
						Customized Menu Configuration
					</a>
				</li>
			</ul>
		</ol>
	</div>
	</div><br>
	<div class="row">
		<div class="col-lg-12 col-md-12 layout-spacing">
			<div class="widget-content widget-content-area" height="800">
				<div class="row"> 
					<div class="col-md-4">
						<label for="role" class="text-primary">Menu Type</label>
						<div class="n-chk">
							<label class="new-control new-radio radio-primary">
							  <input type="radio" class="new-control-input" name="MenuType" checked value="1" onclick="ChangeMenuType()">
							  <span class="new-control-indicator"></span>Indival
							  <input type="radio" class="new-control-input" name="MenuType" value="2" onclick="ChangeMenuType()">
							  <span class="new-control-indicator"></span>Module Group
							  <input type="radio" class="new-control-input" name="MenuType" value="3" onclick="ChangeMenuType()">
							  <span class="new-control-indicator"></span>Customized Group
							</label>
						</div>
					</div>
					<div class="col-md-4">
						<label class="text-primary">Customized Menu Name</label>
						<input type="text" class="form-control" name="CustomizedMenuname" id="CustomizedMenuname" >
					</div>
					<div class="col-md-4">
						<label class="text-primary">Customized Menu URL</label>
						<input type="text" class="form-control" name="CustomizedMenuurl" id="CustomizedMenuurl" >
					</div>
					<div class="col-md-4" data-toggle="modal" data-target="#exampleModal" title="Click here to change icon!">
						<div class="form-group">
							<label>ModuleIcon:</label>
							<br>
							<div class="oldIcon" id="oldIcon">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-check"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>	
							</div>
							<input type="hidden" name="ModuleIcon" id="ModuleIcon" value="<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-user-check&quot;><path d=&quot;M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2&quot;></path><circle cx=&quot;8.5&quot; cy=&quot;7&quot; r=&quot;4&quot;></circle><polyline points=&quot;17 11 19 13 23 9&quot;></polyline></svg>">
						</div>
					</div>

					<div class="col-md-4" style="display:none" id="ModuleDisplay">
						<label for="role" class="text-primary">Modules</label>
						<select class="form-control" name="ModuleId" id="ModuleId">
							<option value="">--select Module--</option>
							@foreach($ModulesArray  as $EachModuleId=>$ModuleName)
								<option value="{{$EachModuleId}}">{{$ModuleName}}</option>
							@endforeach
						</select>
					</div>
					<div class="col-md-4" style="display:none" id="CustomizedGroupName">
						<label for="role" class="text-primary">Customized Group Name</label>
						<input type="text" class="form-control" name="DisplayCustomizedGroupName" id="DisplayCustomizedGroupName" >
					</div>
					<div class="row"> 
					<div class="col-md-4">
						<br><br>
						<button class="btn btn-primary mb-2 mr-2" onclick="CreateCustomizedmenu()" style="margin-top: 37px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> Create</button>
					</div>
					</div>
				</div>
		</div>
	</div>

	</div>
	<!--  END CONTENT AREA  -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Change Icon</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				</button>
			</div>
			<div class="modal-body">
				<div class="icon-content-container">

					<div class="icon-content-container">
						<div class="row" id="icon_container">

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="activity"></i><span class="icon-name"> activity</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="airplay"></i><span class="icon-name"> airplay</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="alert-circle"></i><span class="icon-name"> alert-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="alert-octagon"></i><span class="icon-name"> alert-octagon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="alert-triangle"></i><span class="icon-name"> alert-triangle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-center"></i><span class="icon-name"> align-center</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-justify"></i><span class="icon-name"> align-justify</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-left"></i><span class="icon-name"> align-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="align-right"></i><span class="icon-name"> align-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="anchor"></i><span class="icon-name"> anchor</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="aperture"></i><span class="icon-name"> aperture</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="archive"></i><span class="icon-name"> archive</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down"></i><span class="icon-name"> arrow-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down-circle"></i><span class="icon-name"> arrow-down-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down-left"></i><span class="icon-name"> arrow-down-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-down-right"></i><span class="icon-name"> arrow-down-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-left"></i><span class="icon-name"> arrow-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-left-circle"></i><span class="icon-name"> arrow-left-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-right"></i><span class="icon-name"> arrow-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-right-circle"></i><span class="icon-name"> arrow-right-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up"></i><span class="icon-name"> arrow-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up-circle"></i><span class="icon-name"> arrow-up-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up-left"></i><span class="icon-name"> arrow-up-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="arrow-up-right"></i><span class="icon-name"> arrow-up-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="at-sign"></i><span class="icon-name"> at-sign</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="award"></i><span class="icon-name"> award</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bar-chart"></i><span class="icon-name"> bar-chart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bar-chart-2"></i><span class="icon-name"> bar-chart-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="battery"></i><span class="icon-name"> battery</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="battery-charging"></i><span class="icon-name"> battery-charging</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bell"></i><span class="icon-name"> bell</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bell-off"></i><span class="icon-name"> bell-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bluetooth"></i><span class="icon-name"> bluetooth</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bold"></i><span class="icon-name"> bold</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="book"></i><span class="icon-name"> book</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="bookmark"></i><span class="icon-name"> bookmark</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="book-open"></i><span class="icon-name"> book-open</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="box"></i><span class="icon-name"> box</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="briefcase"></i><span class="icon-name"> briefcase</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="calendar"></i><span class="icon-name"> calendar</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="camera"></i><span class="icon-name"> camera</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="camera-off"></i><span class="icon-name"> camera-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cast"></i><span class="icon-name"> cast</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="check"></i><span class="icon-name"> check</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="check-circle"></i><span class="icon-name"> check-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="check-square"></i><span class="icon-name"> check-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-down"></i><span class="icon-name"> chevron-down</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-left"></i><span class="icon-name"> chevron-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-right"></i><span class="icon-name"> chevron-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-down"></i><span class="icon-name"> chevrons-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-left"></i><span class="icon-name"> chevrons-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-right"></i><span class="icon-name"> chevrons-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevrons-up"></i><span class="icon-name"> chevrons-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chevron-up"></i><span class="icon-name"> chevron-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="chrome"></i><span class="icon-name"> chrome</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="clipboard"></i><span class="icon-name"> clipboard</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="clock"></i><span class="icon-name"> clock</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud"></i><span class="icon-name"> cloud</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-drizzle"></i><span class="icon-name"> cloud-drizzle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-lightning"></i><span class="icon-name"> cloud-lightning</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-off"></i><span class="icon-name"> cloud-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-rain"></i><span class="icon-name"> cloud-rain</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cloud-snow"></i><span class="icon-name"> cloud-snow</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="code"></i><span class="icon-name"> code</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="codepen"></i><span class="icon-name"> codepen</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="codesandbox"></i><span class="icon-name"> codesandbox</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="coffee"></i><span class="icon-name"> coffee</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="columns"></i><span class="icon-name"> columns</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="command"></i><span class="icon-name"> command</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="compass"></i><span class="icon-name"> compass</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="copy"></i><span class="icon-name"> copy</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-down-left"></i><span class="icon-name"> corner-down-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-down-right"></i><span class="icon-name"> corner-down-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-left-down"></i><span class="icon-name"> corner-left-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-left-up"></i><span class="icon-name"> corner-left-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-right-down"></i><span class="icon-name"> corner-right-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-right-up"></i><span class="icon-name"> corner-right-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-up-left"></i><span class="icon-name"> corner-up-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="corner-up-right"></i><span class="icon-name"> corner-up-right</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="cpu"></i><span class="icon-name"> cpu</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="credit-card"></i><span class="icon-name"> credit-card</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="crop"></i><span class="icon-name"> crop</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="crosshair"></i><span class="icon-name"> crosshair</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="database"></i><span class="icon-name"> database</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="delete"></i><span class="icon-name"> delete</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="disc"></i><span class="icon-name"> disc</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="dollar-sign"></i><span class="icon-name"> dollar-sign</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="download"></i><span class="icon-name"> download</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="download-cloud"></i><span class="icon-name"> download-cloud</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="droplet"></i><span class="icon-name"> droplet</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="edit"></i><span class="icon-name"> edit</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="edit-2"></i><span class="icon-name"> edit-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="edit-3"></i><span class="icon-name"> edit-3</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="external-link"></i><span class="icon-name"> external-link</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="eye"></i><span class="icon-name"> eye</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="eye-off"></i><span class="icon-name"> eye-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="facebook"></i><span class="icon-name"> facebook</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="fast-forward"></i><span class="icon-name"> fast-forward</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="feather"></i><span class="icon-name"> feather</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="figma"></i><span class="icon-name"> figma</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file"></i><span class="icon-name"> file</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file-minus"></i><span class="icon-name"> file-minus</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file-plus"></i><span class="icon-name"> file-plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="file-text"></i><span class="icon-name"> file-text</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="film"></i><span class="icon-name"> film</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="filter"></i><span class="icon-name"> filter</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="flag"></i><span class="icon-name"> flag</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="folder"></i><span class="icon-name"> folder</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="folder-minus"></i><span class="icon-name"> folder-minus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="folder-plus"></i><span class="icon-name"> folder-plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="framer"></i><span class="icon-name"> framer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="frown"></i><span class="icon-name"> frown</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="gift"></i><span class="icon-name"> gift</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-branch"></i><span class="icon-name"> git-branch</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-commit"></i><span class="icon-name"> git-commit</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="github"></i><span class="icon-name"> github</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-merge"></i><span class="icon-name"> git-merge</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="git-pull-request"></i><span class="icon-name"> git-pull-request</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="globe"></i><span class="icon-name"> globe</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="grid"></i><span class="icon-name"> grid</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="hard-drive"></i><span class="icon-name"> hard-drive</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="hash"></i><span class="icon-name"> hash</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="headphones"></i><span class="icon-name"> headphones</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="heart"></i><span class="icon-name"> heart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="help-circle"></i><span class="icon-name"> help-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="hexagon"></i><span class="icon-name"> hexagon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="home"></i><span class="icon-name"> home</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="image"></i><span class="icon-name"> image</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="inbox"></i><span class="icon-name"> inbox</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="info"></i><span class="icon-name"> info</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="instagram"></i><span class="icon-name"> instagram</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="italic"></i><span class="icon-name"> italic</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="key"></i><span class="icon-name"> key</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="layers"></i><span class="icon-name"> layers</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="layout"></i><span class="icon-name"> layout</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="life-buoy"></i><span class="icon-name"> life-buoy</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="link"></i><span class="icon-name"> link</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="link-2"></i><span class="icon-name"> link-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="linkedin"></i><span class="icon-name"> linkedin</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="list"></i><span class="icon-name"> list</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="loader"></i><span class="icon-name"> loader</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="lock"></i><span class="icon-name"> lock</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="log-in"></i><span class="icon-name"> log-in</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="log-out"></i><span class="icon-name"> log-out</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mail"></i><span class="icon-name"> mail</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="map"></i><span class="icon-name"> map</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="map-pin"></i><span class="icon-name"> map-pin</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="maximize"></i><span class="icon-name"> maximize</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="maximize-2"></i><span class="icon-name"> maximize-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="meh"></i><span class="icon-name"> meh</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="menu"></i><span class="icon-name"> menu</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="message-circle"></i><span class="icon-name"> message-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="message-square"></i><span class="icon-name"> message-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mic"></i><span class="icon-name"> mic</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mic-off"></i><span class="icon-name"> mic-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minimize"></i><span class="icon-name"> minimize</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minimize-2"></i><span class="icon-name"> minimize-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minus"></i><span class="icon-name"> minus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minus-circle"></i><span class="icon-name"> minus-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="minus-square"></i><span class="icon-name"> minus-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="monitor"></i><span class="icon-name"> monitor</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="moon"></i><span class="icon-name"> moon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="more-horizontal"></i><span class="icon-name"> more-horizontal</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="more-vertical"></i><span class="icon-name"> more-vertical</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="mouse-pointer"></i><span class="icon-name"> mouse-pointer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="move"></i><span class="icon-name"> move</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="music"></i><span class="icon-name"> music</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="navigation"></i><span class="icon-name"> navigation</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="navigation-2"></i><span class="icon-name"> navigation-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="octagon"></i><span class="icon-name"> octagon</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="package"></i><span class="icon-name"> package</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="paperclip"></i><span class="icon-name"> paperclip</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pause"></i><span class="icon-name"> pause</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pause-circle"></i><span class="icon-name"> pause-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pen-tool"></i><span class="icon-name"> pen-tool</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="percent"></i><span class="icon-name"> percent</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone"></i><span class="icon-name"> phone</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-call"></i><span class="icon-name"> phone-call</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-forwarded"></i><span class="icon-name"> phone-forwarded</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-incoming"></i><span class="icon-name"> phone-incoming</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-missed"></i><span class="icon-name"> phone-missed</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-off"></i><span class="icon-name"> phone-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="phone-outgoing"></i><span class="icon-name"> phone-outgoing</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pie-chart"></i><span class="icon-name"> pie-chart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="play"></i><span class="icon-name"> play</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="play-circle"></i><span class="icon-name"> play-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="plus"></i><span class="icon-name"> plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="plus-circle"></i><span class="icon-name"> plus-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="plus-square"></i><span class="icon-name"> plus-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="pocket"></i><span class="icon-name"> pocket</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="power"></i><span class="icon-name"> power</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="printer"></i><span class="icon-name"> printer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="radio"></i><span class="icon-name"> radio</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="refresh-ccw"></i><span class="icon-name"> refresh-ccw</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="refresh-cw"></i><span class="icon-name"> refresh-cw</span>
								</div>
							</div>
							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="repeat"></i><span class="icon-name"> repeat</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rewind"></i><span class="icon-name"> rewind</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rotate-ccw"></i><span class="icon-name"> rotate-ccw</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rotate-cw"></i><span class="icon-name"> rotate-cw</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="rss"></i><span class="icon-name"> rss</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="save"></i><span class="icon-name"> save</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="scissors"></i><span class="icon-name"> scissors</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="search"></i><span class="icon-name"> search</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="send"></i><span class="icon-name"> send</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="server"></i><span class="icon-name"> server</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="settings"></i><span class="icon-name"> settings</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="share"></i><span class="icon-name"> share</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="share-2"></i><span class="icon-name"> share-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shield"></i><span class="icon-name"> shield</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shield-off"></i><span class="icon-name"> shield-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shopping-bag"></i><span class="icon-name"> shopping-bag</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shopping-cart"></i><span class="icon-name"> shopping-cart</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="shuffle"></i><span class="icon-name"> shuffle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sidebar"></i><span class="icon-name"> sidebar</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="skip-back"></i><span class="icon-name"> skip-back</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="skip-forward"></i><span class="icon-name"> skip-forward</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="slack"></i><span class="icon-name"> slack</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="slash"></i><span class="icon-name"> slash</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sliders"></i><span class="icon-name"> sliders</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="smartphone"></i><span class="icon-name"> smartphone</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="smile"></i><span class="icon-name"> smile</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="speaker"></i><span class="icon-name"> speaker</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="star"></i><span class="icon-name"> star</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="stop-circle"></i><span class="icon-name"> stop-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sun"></i><span class="icon-name"> sun</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sunrise"></i><span class="icon-name"> sunrise</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="sunset"></i><span class="icon-name"> sunset</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="tablet"></i><span class="icon-name"> tablet</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="tag"></i><span class="icon-name"> tag</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="target"></i><span class="icon-name"> target</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="terminal"></i><span class="icon-name"> terminal</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="thermometer"></i><span class="icon-name"> thermometer</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="thumbs-down"></i><span class="icon-name"> thumbs-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="thumbs-up"></i><span class="icon-name"> thumbs-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="toggle-left"></i><span class="icon-name"> toggle-left</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="toggle-right"></i><span class="icon-name"> toggle-right</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trash"></i><span class="icon-name"> trash</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trash-2"></i><span class="icon-name"> trash-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trello"></i><span class="icon-name"> trello</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trending-down"></i><span class="icon-name"> trending-down</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="trending-up"></i><span class="icon-name"> trending-up</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="triangle"></i><span class="icon-name"> triangle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="truck"></i><span class="icon-name"> truck</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="tv"></i><span class="icon-name"> tv</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="twitter"></i><span class="icon-name"> twitter</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="type"></i><span class="icon-name"> type</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="umbrella"></i><span class="icon-name"> umbrella</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="underline"></i><span class="icon-name"> underline</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="unlock"></i><span class="icon-name"> unlock</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="upload"></i><span class="icon-name"> upload</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="upload-cloud"></i><span class="icon-name"> upload-cloud</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user"></i><span class="icon-name"> user</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-check"></i><span class="icon-name"> user-check</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-minus"></i><span class="icon-name"> user-minus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-plus"></i><span class="icon-name"> user-plus</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="users"></i><span class="icon-name"> users</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="user-x"></i><span class="icon-name"> user-x</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="video"></i><span class="icon-name"> video</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="video-off"></i><span class="icon-name"> video-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="voicemail"></i><span class="icon-name"> voicemail</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume"></i><span class="icon-name"> volume</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume-1"></i><span class="icon-name"> volume-1</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume-2"></i><span class="icon-name"> volume-2</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="volume-x"></i><span class="icon-name"> volume-x</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="watch"></i><span class="icon-name"> watch</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="wifi"></i><span class="icon-name"> wifi</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="wifi-off"></i><span class="icon-name"> wifi-off</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="wind"></i><span class="icon-name"> wind</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x"></i><span class="icon-name"> x</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x-circle"></i><span class="icon-name"> x-circle</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x-octagon"></i><span class="icon-name"> x-octagon</span>
								</div>
							</div>


							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="x-square"></i><span class="icon-name"> x-square</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="youtube"></i><span class="icon-name"> youtube</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zap"></i><span class="icon-name"> zap</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zap-off"></i><span class="icon-name"> zap-off</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zoom-in"></i><span class="icon-name"> zoom-in</span>
								</div>
							</div>

							<div class="col-auto py-3">
								<div class="icon-container">
									<i data-feather="zoom-out"></i><span class="icon-name"> zoom-out</span>
								</div>
							</div>

						</div>                            
					</div>

				</div>
			</div>
			<div class="modal-footer">
				<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
				<button type="button" class="btn btn-primary">Change</button>
			</div>
		</div>
	</div>
</div>
@php
$siteurl=$_SERVER['HTTP_HOST'];
@endphp
<!-- Modal end -->
<script src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo7/plugins/font-icons/feather/feather.min.js"></script>
<script src="https://{{$siteurl}}/cork/HTML/ltr/demo7/plugins/font-icons/feather/feather.min.js"></script>
<script type="text/javascript">
	feather.replace();
</script>

<script type="text/javascript">
	document.addEventListener('DOMContentLoaded',()=>{
		// alert("ready");
		feather.replace();
		$('#icon_container').on('click', '.col-auto', function (event) {
			var icon = $(this).find('.icon-container').text();
			var new_icon=$.trim(icon);
			
			var other_content='<i data-feather="'+$.trim(icon)+'" ></i>';
			var content=feather.icons[new_icon].toSvg();

			$('#oldIcon').html(content); 
			feather.replace(); 
			$('#ModuleIcon').val(content);
			
			$('#exampleModal').modal('hide');

		});

		setTimeout(GetConfiguredgroups,100);
	});
	
CreateCustomizedmenu=()=>{
	CustomizedMenuurl=$('#CustomizedMenuurl').val();
	CustomizedMenuname=$('#CustomizedMenuname').val();
	CustomizedMenuname=CustomizedMenuname.trim();

	ModuleIcon=$('#ModuleIcon').val();
	ModuleId='';
	GroupName='';
	if(CustomizedMenuname.length==0 || CustomizedMenuurl.length==0)
	{
		Snackbar.show({
			pos:"top-right",
			text:"Please fill all the fields!",
			actionTextColor: '#fff',
			backgroundColor: '#e7515a'
		});
		return false;
	}
	var radioButtons = document.querySelectorAll('input[name="MenuType"]');
	var selectedValue;

	for (var i = 0; i < radioButtons.length; i++) {
	  if (radioButtons[i].checked) {
		selectedValue = radioButtons[i].value;
		break;
	  }
	}
	if(selectedValue==2)
	{
		ModuleId=$('#ModuleId').val();
		GroupName='';
	}
	if(selectedValue==3)
	{
		ModuleId='';
		GroupName=$('#DisplayCustomizedGroupName').val();
	}
	if(selectedValue==1)
	{
		ModuleId='';
		GroupName=$('#CustomizedGroupName').val();
	}
	$.ajax({
		type:"post",
		url:"{{url('CreateCustomizedmenu')}}",
		data:{CustomizedMenuname,ModuleIcon,selectedValue,ModuleId,CustomizedMenuurl,GroupName},
		beforeSend:()=>{},
		success:response=>{
			$('#CustomizedMenuname').val('');
			$('#CustomizedMenuurl').val('');
			res=JSON.parse(response);
			console.log(response);
			if(res.type=="error")
			{
				Snackbar.show({
					pos:"top-right",
					text:res.Message,
					actionTextColor: '#fff',
					backgroundColor: '#e7515a',
				});
			}
			else
			{
				Snackbar.show({
					pos:"top-right",
					text:res.Message,
				});
			}
		}
	});
}
	</script>
@endsection