<!DOCTYPE html>
<html lang="en">

<head>
	<%- include("partials/preloader.ejs", {now:"settings"}) %>
		<link href="/css/dashboard/settings.css" rel="stylesheet">
		<%- themeConfig?.customHtml %>
</head>

<body class="g-sidenav-show bg-gray-100">
	<%- include("partials/preload.ejs") %>
		<aside
			class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 ps"
			style="float:left;" id="sidenav-main">
			<div id="sidebarMain">
				<div class="sidenav-header">
					<a onclick="toggleSidenav()"><i
							class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
							aria-hidden="true" id="iconSidenav"></i></a>
					<a <% if(themeConfig?.icons?.sidebar?.alignCenter) { %> style="text-align: center;"
						<% } %>
							class="navbar-brand m-0" href="/">
							<img src="<%= themeConfig.icons.sidebar.lightUrl %>" class="navbar-brand-img h-100" <%
								if(themeConfig.icons.sidebar.borderRadius) { %>style="border-radius: <%-
								themeConfig.icons.sidebar.borderRadius %>;"
								<% } %>
									alt="main_logo">
									<% if(!themeConfig.icons.sidebar.hideName){ %>
										<span class="ms-1 font-weight-bold" id="sitename">
											<%= themeConfig.websiteName %>
										</span>
										<% } %>
					</a>
				</div>
				<hr class="horizontal dark mt-0">
				<div class="collapse navbar-collapse  w-auto  max-height-vh-80 h-80" id="sidenav-collapse-main">
					<ul class="navbar-nav">
						<li class="nav-item" style="text-align: center;">
							<div class="configIcon border-radius-xl"
								style="margin: 0 auto;width: fit-content;text-align: center;">
								<img class="border-radius-xl" style="width: 100px; padding: 10px;"
									src="<%= gIcon %>?size=64" alt="">
							</div>
							<h5 style="margin-top: 10px;">
								<%= guild.name %>
							</h5>
							<p style="margin: 0 !important;"><i class="fa fa-user-friends" aria-hidden="true"></i>
								<%= guild.memberCount %> Members
							</p>
						</li>
						<li class="nav-item mt-3">
							<a class="nav-link <% if(!req.params.category) { %>active<% } %>"
								href="/settings/<%- req.params.id %>/">
								<div
									class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
									<svg class="text-dark" width="16px" height="16px" viewBox="0 0 45 40" version="1.1"
										xmlns="http://www.w3.org/2000/svg">
										<title>shop </title>
										<g id="Basic-Elements" stroke="none" stroke-width="1" fill="none"
											fill-rule="evenodd">
											<g id="Rounded-Icons" transform="translate(-1716.000000, -439.000000)"
												fill="#FFFFFF" fill-rule="nonzero">
												<g id="Icons-with-opacity"
													transform="translate(1716.000000, 291.000000)">
													<g id="shop-" transform="translate(0.000000, 148.000000)">
														<path class="color-background"
															d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z"
															id="Path" opacity="0.598981585"></path>
														<path class="color-background"
															d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z"
															id="Path"></path>
													</g>
												</g>
											</g>
										</g>
									</svg>
								</div>
								<span class="nav-link-text ms-1">Home</span>
							</a>
						</li>
						<li class="nav-item mt-3">
							<h6 class="ps-4 ms-2 text-uppercase text-xs font-weight-bolder opacity-6">Settings Categories</h6>
						</li>
						<% settings.forEach(s => { %>
							<a class="<%- s.categoryId %>">
								<% if(s.premium) { %>
									<div class="sidebarPremium"><i style="color: var(--colone) !important;" class="fas fa-crown"></i></div>
								<% } %>

								<li class="nav-item categories" id="<%- s.categoryId %>">
									<a class="nav-link <% if (req.params.category == s.categoryId) { %>active<% } %>"
										id="<%- s.categoryId %>">
										<% if(s.categoryImageURL) { %>
											<div
												class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
												<img width="20px" src="<%= s.categoryImageURL %>">
											</div>
										<% } %>
										<span class="nav-link-text ms-1">
											<%- s.categoryName %>
										</span>
										<% if(s.toggleable) { %>
											<span style="text-align: right; width: 100%;">
												<div class="form-check form-switch ps-0"
													style="float: right !important;">
													<input name="<%- s.categoryId %>"
														category="<%- s.categoryName %>" switch="true"
														class="form-check-input ms-auto category-toggle"
														style="height: 20px !important; margin-left: 10px !important;"
														type="checkbox" id="switch-<%= s.categoryId %>"
														<%=toggle[s.categoryId] ? "checked" : "" %>

													>
													<label style="z-index: 100; position: relative;"
														class="form-check-label text-body ms-3 text-truncate w-80 mb-0 d-none"
														for="switch-<%= s.categoryId %>"></label>
												</div>
											</span>
										<% } %>
									</a>
								</li>
						<% }) %>
					</ul>
				</div>
				<% if(themeConfig?.premium && req.session.user) { %>
					<div class="sidenav-footer mx-3 pb-4" style="position: absolute;bottom: 0;">
						<%- include("partials/premium.ejs") %>
					</div>
					<% } %>

			</div>


		</aside>

		<div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
			<nav style="padding-bottom: 0;"
				class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl pb-4" id="navbarBlur"
				navbar-scroll="false">
				<div class="container-fluid py-1 px-3">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
							<li class="breadcrumb-item text-sm"><a class="opacity-9 text-dark"
									href="javascript:">Pages</a>
							</li>
							<li class="breadcrumb-item text-sm text-dark active" aria-current="page">Dashboard</li>
						</ol>
						<h6 class="font-weight-bolder mb-0">Manage Guilds</h6>
					</nav>

					<div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
						<div class="ms-md-auto pe-md-3 d-flex align-items-center">
						</div>
						<ul class="navbar-nav  justify-content-end">
							<div class="_3a41" style="display: contents;">

								<% for(var i in req.session.guilds){ if((req.session.guilds[i].permissions & 0x20) == 0x20 || (req.session.guilds[i].permissions & 0x08) == 0x08){ if(bot.guilds.cache.get(req.session.guilds[i].id)){ const
									g=bot.guilds.cache.get(req.session.guilds[i].id); let icon; if (!g.iconURL())
									icon=themeConfig.icons.noGuildIcon; else icon=g.iconURL(); let gClass="server" ; if
									(g.id===guild.id) gClass="server activeServer" ; %>
									<a href="/settings/<%- g.id %>" style="padding-right: 10px;">
										<div class="<%- gClass %>"><img height="64" width="64" src="<%- icon %>"
												alt="<%- g.name %>"></div>
									</a>
									<% } } } %>
										<a href="/manage">
											<div class="server">
												<div class="newServer"><i class="fa fa-plus"
														style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"></i>
												</div>
											</div>
										</a>
							</div>
							<li class="nav-item d-xl-none ps-3 d-flex align-items-center">
								<a onclick="toggleSidenav()" style="cursor: pointer;" class="nav-link text-body p-0"
									id="iconNavbarSidenav">
									<div class="sidenav-toggler-inner">
										<i class="sidenav-toggler-line"></i>
										<i class="sidenav-toggler-line"></i>
										<i class="sidenav-toggler-line"></i>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
			<% const images=["curved-1", "curved-2" , "curved-3" , "curved-4" , "curved-5" , "curved-6" , "curved-7"
				, "curved-8" , "curved-9" , "curved-10" , "curved-11" , "curved-12" , "curved-13" , "curved-14"
				, "curved-15" , "curved-16" , "curved-17" , "curved-18" ]; const image=images[Math.floor(Math.random() *
				images.length)]; %>
				<div class="container-fluid">
					<div class="page-header min-height-300 border-radius-xl mt-4"
						style="background-image: url("/img/curved-images/<%- image %>.webp"); background-position-y: 50%;">
						<span class="mask bg-gradient-primary opacity-6"></span>
					</div>
					<div class="card card-body blur shadow-blur mx-4 mt-n6 overflow-hidden">
						<div class="row gx-4">
							<% if(gIcon) { %>
								<div class="col-auto">
									<div class="avatar avatar-xl position-relative">
										<img id="img" src="<%= gIcon %>" alt="profile_image"
											class="w-100 border-radius-lg shadow-sm">
									</div>
								</div>
							<% } %>
							<div class="col-auto my-auto">
								<div class="h-100">
									<h5 id="title" class="mb-1">
										<%= guild.name %>
									</h5>
									<p id="desc" class="mb-0 font-weight-bold text-sm">
										<b>Server ID: </b>
										<%= guild.id %>
									</p>
								</div>
							</div>
							<% if (themeConfig.leaderboard) { %>
								<div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
									<div class="nav-wrapper position-relative end-0">
										<ul class="nav nav-pills nav-fill p-1 bg-transparent" role="tablist">
											<li class="nav-item">
												<a class="nav-link mb-0 px-0 py-1"
													href="/leaderboard/<%= req.params.id %>">
													<svg class="text-dark" width="16px" height="16px"
														viewBox="0 0 42 42" version="1.1"
														xmlns="http://www.w3.org/2000/svg">
														<g stroke="none" stroke-width="1" fill="none"
															fill-rule="evenodd">
															<g transform="translate(-2319.000000, -291.000000)"
																fill="#FFFFFF" fill-rule="nonzero">
																<g transform="translate(1716.000000, 291.000000)">
																	<g transform="translate(603.000000, 0.000000)">
																		<path class="color-background"
																			d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z">
																		</path>
																		<path class="color-background"
																			d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"
																			opacity="0.7"></path>
																		<path class="color-background"
																			d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"
																			opacity="0.7"></path>
																	</g>
																</g>
															</g>
														</g>
													</svg>
													<span class="ms-1">Leaderboard</span>
												</a>
											</li>
									</div>
								</div>
								<% } %>
						</div>
					</div>
					<style>
						.form-switch.larger .form-check-input:checked:after {
							transform: scale(1.5) translate(23px, 3px);
						}

						.form-switch.larger .form-check-input::after {
							transform: scale(1.5) translate(5px, 3px);
						}
					</style>
					<% if (!req.params.category) { %>
						<div class="container-fluid py-4 settings">
							<div class="row">
								<% settings.forEach(s=> { %>
									<a style="color: inherit; text-decoration: none;" href="/settings/<%- req.params.id %>/<%= s.categoryId %>">
										<div style="flex: 50%;" class="item" id="divtable">
										<div class="card mb-4">
											<div class="card-header d-flex"
												style="border-radius: 10px; justify-content: space-between;">
												<div>
													<h4>
														<%- s.categoryName %>
													</h4>
													<p>
														<%- s.categoryDescription %>
													</p>
												</div>
												<div>
													<% if(s.toggleable) { %>
														<span style="text-align: right; width: 100%;">
															<div class="form-check form-switch ps-0 larger"
																style="float: right !important;">
																<input name="<%- s.categoryId %>"
																	category="<%- s.categoryName %>" switch="true"
																	class="form-check-input ms-auto category-toggle"
																	style="height: 20px !important; margin-left: 10px !important; height: 30px !important; width: 60px !important;"
																	type="checkbox" id="switch-<%= s.categoryId %>"
																	<%=toggle[s.categoryId] ? "checked" : "" %>

																>
																<label style="z-index: 100; position: relative;"
																	class="form-check-label text-body ms-3 text-truncate w-80 mb-0 d-none"
																	for="switch-<%= s.categoryId %>"></label>
															</div>
														</span>
														<% } %>
												</div>
											</div>
										</div>
									</div>
									</a>
									<% }) %>
							</div>
						</div>
						<% } %>
				</div>
				<div style="padding-bottom: 100px;">
					<% settings.forEach(s=> {
						if (s.categoryId !== req.params.category) return;
						%>
						<script>
							document.addEventListener("DOMContentLoaded", function () {
								$(`#title`).html(`<%- s.categoryName %>`)
								$(`#desc`).html(`<%- s.categoryDescription %>`)
								<% if(s.categoryImageURL) { %>
								$("#img").attr("src", `<%- s.categoryImageURL %>`);
								<% } %>
							});
						</script>
						<div class="container-fluid settings mb-4" id="<%= s.categoryId %>div">
							<% s.categoryOptionsList.forEach( option=> {
								let Allowed = canUseList[s.categoryId][option.optionId];
								%>

								<% if (!option.themeOptions) option.themeOptions={}; let
									themeOptions=option.themeOptions; %>
									<% if (themeOptions?.startNewSection?.first || !themeOptions?.startNewSection) { %>
										<div class="mt-4">
											<div class="col-12 item starting">
												<div class="card mb-4">
													<div class="card-header pb-0">
														<% if(option.optionType.type !=="collapsable" &&
															option.optionType.type !=="modal" ) { if
															(!option.themeOptions?.hideOptionName || !option.optionName)
															{ %>
															<% if (themeOptions?.startNewSection?.first &&
																themeOptions?.startNewSection?.title ) { %>
																<h4>
																	<%- themeOptions?.startNewSection?.title %>
																</h4>
																<% } else { %>
																	<h4>
																		<%- option.optionName %>
																	</h4>
																	<% } %>
																		<% } %>
																			<% if (!option.themeOptions?.hideOptionDesc
																				|| !option.optionDescription) { %>
																				<% if
																					(themeOptions?.startNewSection?.first
																					&&
																					themeOptions?.startNewSection?.description)
																					{ %>
																					<a>
																						<%- themeOptions?.startNewSection?.description
																							%>
																					</a>
																					<% } else { %>
																						<a>
																							<%- option.optionDescription
																								%>
																						</a>
																						<% } %>
																							<% } } %>
													</div>
													<% if(option.optionType.type !=="collapsable" &&
														option.optionType.type !=="modal" ) { %>
														<hr>
														<% } %>
															<div class="card-body px-0 pt-0 pb-2"
																style="padding: 0 1.5rem 1.5rem !important;">
																<% } %>
																	<div class="mt-3">
																		<%- include(`components/formTypes/${option.optionType.type}.ejs`,
																			{option, s, Allowed}); %>
																	</div>
																	<% if (!themeOptions?.startNewSection ||
																		themeOptions?.startNewSection &&
																		themeOptions?.startNewSection?.last &&
																		!themeOptions?.startNewSection?.first) { %>
															</div>
												</div>
											</div>
										</div>
										<% } %>
											<% }); %>
												<% }); %>
						</div>
						<div id="saveChanges"
							class="animated card card-body blur shadow-blur mx-4 mt-n6 overflow-hidden">
							<div class="row gx-4">
								<div class="col-auto my-auto">
									<div class="h-100">
										<h5 class="mb-1">
											Changes Detected!
										</h5>
									</div>
								</div>
								<div class="buttons col-lg-4">
									<div class="nav-wrapper position-relative end-0" style="width: max-content;">
										<ul class="nav nav-pills nav-fill p-1 bg-transparent" role="tablist">
											<li class="nav-item" style="height: min-content;">
												<a style="float: right; margin: 0;" class="btn" data-bs-toggle="tab"
													onclick="discardChanges()" role="tab" aria-selected="false">
													<span class="ms-1">Reset</span>
												</a>
											</li>
											<li class="nav-item">
												<a style="margin: 0 20px; float: right;" class="btn bg-gradient-primary"
													data-bs-toggle="tab" onclick="saveChanges()" role="tab"
													aria-selected="false">
													<span class="ms-1">Save Changes</span>
												</a>
											</li>
									</div>
								</div>
							</div>
						</div>
				</div>

		</div>
		</main>

<!--   Core JS Files   -->
<script id="helper" category="<%= req.params.category %>" gid="<%= req.params.id %>" refresh="<%= settings.find(s => s.categoryId === req.params?.category)?.refreshOnSave || false %>"
		src="/js/dashboard/functions.js"></script>
<script src="../assets/js/core/popper.min.js"></script>
<script src="../assets/js/core/bootstrap.min.js"></script>
<script src="../assets/js/plugins/perfect-scrollbar.min.js"></script>
<script src="../assets/js/plugins/smooth-scrollbar.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>
<script>
	var win = navigator.platform.indexOf("Win") > -1;
	if (win && document.querySelector("#sidenav-scrollbar")) {
		var options = {
			damping: "0.5"
		}
		Scrollbar.init(document.querySelector("#sidenav-scrollbar"), options);
	}
</script>
<script>
	$(document).ready(function () {
		<% if ( req.query.error === "premiumRequired" ) { %>
		sweetalert("error", "<%= themeConfig?.sweetalert?.error?.requirePremium || "Premium is required for this category" %>", 2000);
		window.history.replaceState({}, title, window.location.href.split("?")[0]);
		<% } %>
					$(".multiSelect").select2({ closeOnSelect: true });
				$(".tags").select2({ theme: "classic", tags: true })
				$(".select2-selection").addClass("form-control")
				$(".select2-search__field").attr("formType", "tagInput");
			});

			function updateSlider(slideAmount, id) {
				var sliderDiv = document.getElementById(`value_${id}`);
				sliderDiv.innerHTML = slideAmount;
			}
		</script>
		<!-- Control Center for Soft Dashboard: parallax effects, scripts for the example pages etc -->
		<%- include("partials/scripts.ejs", {now: "settings" }) %>
</body>

</html>
