Refactor collapse components (#4152)

* Rename .collapse component to .box-collapse

* Remove dead .js class

* Add new basic .collapse component

web/css/src/themes/dark.css

@@ -355,10 +355,10 @@
 	box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
 }
 
-/* Collapse component
+/* Box collapse component
 		========================================================================== */
 
-.collapse-header {
+.box-collapse-header {
 	background: #454545;
 	border-color: #505050;
 	text-shadow: 0 1px rgb(0 0 0 / 40%);
@@ -368,6 +368,13 @@
 	color: #fff;
 }
 
+/* Collapse component
+   ========================================================================== */
+
+.collapse-header {
+	border-bottom-color: #484848;
+}
+
 /* Units table
    ========================================================================== */
 
@@ -575,10 +582,6 @@
 	color: #a2a2a2;
 }
 
-.section-title {
-	border-bottom-color: #484848;
-}
-
 /* Buttons
    ========================================================================== */
 

web/css/src/themes/default.css

@@ -1719,18 +1719,6 @@
 	font-size: 0.8rem;
 }
 
-.section-title {
-	display: flex;
-	cursor: pointer;
-	justify-content: space-between;
-	align-items: center;
-	font-size: 1.05rem;
-	font-weight: 600;
-	padding-top: 28px;
-	padding-bottom: 12px;
-	border-bottom: 1px solid #ccc;
-}
-
 /* Modals
    ========================================================================== */
 
@@ -2070,17 +2058,17 @@
 	border-radius: var(--border-radius-base);
 }
 
-/* Collapse component
+/* Box collapse component
    ========================================================================== */
 
-.collapse {
+.box-collapse {
 }
 
-.collapse[open] .collapse-header::after {
+.box-collapse[open] .box-collapse-header::after {
 	transform: rotate(180deg);
 }
 
-.collapse-header {
+.box-collapse-header {
 	background: linear-gradient(to bottom, rgb(247 247 247 / 100%) 0%, rgb(255 255 255 / 100%) 100%);
 	border: 1px solid #ddd;
 	text-shadow: 0 1px rgb(255 255 255 / 95%);
@@ -2117,7 +2105,7 @@
 	}
 }
 
-.collapse-content {
+.box-collapse-content {
 	box-sizing: border-box; /* Work around box-sizing not inheriting in <details> in many browsers */
 	padding: 20px 20px 10px;
 
@@ -2126,6 +2114,49 @@
 	}
 }
 
+/* Collapse component
+   ========================================================================== */
+
+.collapse {
+}
+
+.collapse[open] .collapse-header::after {
+	content: "\f146";
+}
+
+.collapse-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	cursor: pointer;
+	color: var(--color-text-heading);
+	font-size: 1.05rem;
+	font-weight: 600;
+	padding-top: 28px;
+	padding-bottom: 12px;
+	border-bottom: 1px solid #ccc;
+
+	&:hover {
+		&::after {
+			color: var(--icon-color-maroon);
+		}
+	}
+
+	&::after {
+		font: var(--fa-font-solid);
+		content: "\f0fe";
+		color: #ddd;
+		display: inline-block;
+		text-rendering: auto;
+		-webkit-font-smoothing: antialiased;
+	}
+}
+
+.collapse-content {
+	box-sizing: border-box; /* Work around box-sizing not inheriting in <details> in many browsers */
+	padding-top: 15px;
+}
+
 /* Login
    ========================================================================== */
 

web/css/src/themes/flat.css

@@ -105,10 +105,10 @@
 	}
 }
 
-/* Collapse component
+/* Box collapse component
    ========================================================================== */
 
-.collapse-header {
+.box-collapse-header {
 	background: #fafafa;
 	box-shadow: none;
 }

web/css/src/themes/vestia.css

@@ -388,10 +388,10 @@ h1 {
 	border-radius: 0;
 }
 
-/* Collapse component
+/* Box collapse component
    ========================================================================== */
 
-.collapse-header {
+.box-collapse-header {
 	background: #fafafa;
 	box-shadow: none;
 	color: #444;

web/templates/pages/add_dns.php

@@ -89,7 +89,7 @@
 						<?= _("Advanced Options") ?>
 					</button>
 				</div>
-				<div x-cloak  x-show="showAdvanced" id="advtable">
+				<div x-cloak x-show="showAdvanced" id="advtable">
 					<?php if ($_SESSION["DNS_CLUSTER_SYSTEM"] == "hestia-zone" && $_SESSION["SUPPORT_DNSSEC"] == "yes") { ?>
 						<div class="form-check u-mb10">
 							<input class="form-check-input" type="checkbox" name="v_dnssec" id="v_dnssec" value="yes" <?php if ($v_dnssec === 'yes'){ echo ' checked'; } ?>>

web/templates/pages/add_package.php

@@ -18,13 +18,6 @@
 <div class="container">
 
 	<form
-		x-data="{
-			showWebOptions: false,
-			showDnsOptions: false,
-			showMailOptions: false,
-			showDatabaseOptions: false,
-			showSystemOptions: false,
-		}"
 		id="main-form"
 		name="v_add_package"
 		method="post"
@@ -65,60 +58,40 @@
 				<label for="v_backups" class="form-label"><?= _("Backups") ?></label>
 				<input type="text" class="form-control" name="v_backups" id="v_backups" value="<?= htmlentities(trim($v_backups, "'")) ?>">
 			</div>
-			<h2 x-on:click="showWebOptions = !showWebOptions" class="section-title">
-				<?= _("WEB") ?>
-				<i
-					x-bind:class="showWebOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showWebOptions" id="web-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_web_domains" class="form-label"><?= _("Web Domains") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_web_domains" id="v_web_domains" value="<?= htmlentities(trim($v_web_domains, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+			<details class="collapse" id="web-options">
+				<summary class="collapse-header">
+					<?= _("WEB") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_web_domains" class="form-label"><?= _("Web Domains") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_web_domains" id="v_web_domains" value="<?= htmlentities(trim($v_web_domains, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-				</div>
-				<div class="u-mb10">
-					<label for="v_web_aliases" class="form-label">
-						<?= _("Web Aliases") ?> <span class="optional">(<?= _("per domain") ?>)</span>
-					</label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?= htmlentities(trim($v_web_aliases, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+					<div class="u-mb10">
+						<label for="v_web_aliases" class="form-label">
+							<?= _("Web Aliases") ?> <span class="optional">(<?= _("per domain") ?>)</span>
+						</label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?= htmlentities(trim($v_web_aliases, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-				</div>
-				<div class="u-mb10">
-					<label for="v_web_template" class="form-label">
-						<?= _("Web Template") . " <span class='optional'> " . strtoupper($_SESSION["WEB_SYSTEM"]) . "</span>" ?>
-					</label>
-					<select class="form-select" name="v_web_template" id="v_web_template">
-						<?php
-							foreach ($web_templates as $key => $value) {
-								echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-								if ((!empty($v_web_template)) && ( $value == trim($v_web_template, "'"))){
-									echo ' selected' ;
-								}
-								echo ">".htmlentities($value)."</option>\n";
-							}
-						?>
-					</select>
-				</div>
-				<?php if (!empty($_SESSION['WEB_BACKEND'])) { echo ""; ?>
 					<div class="u-mb10">
-						<label for="v_backend_template" class="form-label">
-							<?= _("Backend Template") . "<span class='optional'>" . strtoupper($_SESSION["WEB_BACKEND"]) . "</span>" ?>
+						<label for="v_web_template" class="form-label">
+							<?= _("Web Template") . " <span class='optional'> " . strtoupper($_SESSION["WEB_SYSTEM"]) . "</span>" ?>
 						</label>
-						<select class="form-select" name="v_backend_template" id="v_backend_template">
+						<select class="form-select" name="v_web_template" id="v_web_template">
 							<?php
-								foreach ($backend_templates as $key => $value) {
-									echo "\t\t\t\t<option value=\"".$value."\"";
-									if ((!empty($v_backend_template)) && ( $value == trim($v_backend_template, "'"))){
+								foreach ($web_templates as $key => $value) {
+									echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+									if ((!empty($v_web_template)) && ( $value == trim($v_web_template, "'"))){
 										echo ' selected' ;
 									}
 									echo ">".htmlentities($value)."</option>\n";
@@ -126,17 +99,58 @@
 							?>
 						</select>
 					</div>
-				<?=""; }?>
-				<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { echo ""; ?>
+					<?php if (!empty($_SESSION['WEB_BACKEND'])) { echo ""; ?>
+						<div class="u-mb10">
+							<label for="v_backend_template" class="form-label">
+								<?= _("Backend Template") . "<span class='optional'>" . strtoupper($_SESSION["WEB_BACKEND"]) . "</span>" ?>
+							</label>
+							<select class="form-select" name="v_backend_template" id="v_backend_template">
+								<?php
+									foreach ($backend_templates as $key => $value) {
+										echo "\t\t\t\t<option value=\"".$value."\"";
+										if ((!empty($v_backend_template)) && ( $value == trim($v_backend_template, "'"))){
+											echo ' selected' ;
+										}
+										echo ">".htmlentities($value)."</option>\n";
+									}
+								?>
+							</select>
+						</div>
+					<?=""; }?>
+					<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { echo ""; ?>
+						<div class="u-mb10">
+							<label for="v_proxy_template" class="form-label">
+								<?= _("Proxy Template") . "<span class='optional'>" . strtoupper($_SESSION["PROXY_SYSTEM"]) . "</span>" ?>
+							</label>
+							<select class="form-select" name="v_proxy_template" id="v_proxy_template">
+								<?php
+									foreach ($proxy_templates as $key => $value) {
+										echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+										if ((!empty($v_proxy_template)) && ( $value == trim($v_proxy_template, "'"))){
+											echo ' selected' ;
+										}
+										echo ">".htmlentities($value)."</option>\n";
+									}
+								?>
+							</select>
+						</div>
+					<?=""; }?>
+				</div>
+			</details>
+			<details class="collapse" id="dns-options">
+				<summary class="collapse-header">
+					<?= _("DNS") ?>
+				</summary>
+				<div class="collapse-content">
 					<div class="u-mb10">
-						<label for="v_proxy_template" class="form-label">
-							<?= _("Proxy Template") . "<span class='optional'>" . strtoupper($_SESSION["PROXY_SYSTEM"]) . "</span>" ?>
+						<label for="v_dns_template" class="form-label">
+							<?= _("DNS Template") . "<span class='optional'>" . strtoupper($_SESSION["DNS_SYSTEM"]) . "</span>" ?>
 						</label>
-						<select class="form-select" name="v_proxy_template" id="v_proxy_template">
+						<select class="form-select" name="v_dns_template" id="v_dns_template">
 							<?php
-								foreach ($proxy_templates as $key => $value) {
+								foreach ($dns_templates as $key => $value) {
 									echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-									if ((!empty($v_proxy_template)) && ( $value == trim($v_proxy_template, "'"))){
+									if ((!empty($v_dns_template)) && ( $value == trim($v_dns_template, "'"))){
 										echo ' selected' ;
 									}
 									echo ">".htmlentities($value)."</option>\n";
@@ -144,188 +158,157 @@
 							?>
 						</select>
 					</div>
-				<?=""; }?>
-			</div>
-			<h2 x-on:click="showDnsOptions = !showDnsOptions" class="section-title">
-				<?= _("DNS") ?>
-				<i
-					x-bind:class="showDnsOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showDnsOptions" id="dns-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_dns_template" class="form-label">
-						<?= _("DNS Template") . "<span class='optional'>" . strtoupper($_SESSION["DNS_SYSTEM"]) . "</span>" ?>
-					</label>
-					<select class="form-select" name="v_dns_template" id="v_dns_template">
+					<div class="u-mb10">
+						<label for="v_dns_domains" class="form-label"><?= _("DNS Zones") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?= htmlentities(trim($v_dns_domains, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
+					</div>
+					<div class="u-mb10">
+						<label for="v_dns_records" class="form-label">
+							<?= _("DNS Records") ?> <span class="optional">(<?= _("per domain") ?>)</span>
+						</label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?= htmlentities(trim($v_dns_records, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
+					</div>
+					<?php if (isset($_SESSION["DNS_SYSTEM"]) && !empty($_SESSION["DNS_SYSTEM"])) { ?>
+						<p class="form-label u-mb10"><?= _("Name Servers") ?></p>
+						<div class="u-mb5">
+							<input type="text" class="form-control" name="v_ns1" value="<?= htmlentities(trim($v_ns1, "'")) ?>">
+						</div>
+						<div class="u-mb5">
+							<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
+						</div>
 						<?php
-							foreach ($dns_templates as $key => $value) {
-								echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-								if ((!empty($v_dns_template)) && ( $value == trim($v_dns_template, "'"))){
-									echo ' selected' ;
-								}
-								echo ">".htmlentities($value)."</option>\n";
+							if ($v_ns3) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns4) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns5) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns6) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns7) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns8) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
 							}
 						?>
-					</select>
-				</div>
-				<div class="u-mb10">
-					<label for="v_dns_domains" class="form-label"><?= _("DNS Zones") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?= htmlentities(trim($v_dns_domains, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
+						<button type="button" class="form-link u-mt20 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
+							<?= _("Add Name Server") ?>
 						</button>
-					</div>
+					<?php } ?>
 				</div>
-				<div class="u-mb10">
-					<label for="v_dns_records" class="form-label">
-						<?= _("DNS Records") ?> <span class="optional">(<?= _("per domain") ?>)</span>
-					</label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?= htmlentities(trim($v_dns_records, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
-					</div>
-				</div>
-				<?php if (isset($_SESSION["DNS_SYSTEM"]) && !empty($_SESSION["DNS_SYSTEM"])) { ?>
-					<p class="form-label u-mb10"><?= _("Name Servers") ?></p>
-					<div class="u-mb5">
-						<input type="text" class="form-control" name="v_ns1" value="<?= htmlentities(trim($v_ns1, "'")) ?>">
+			</details>
+			<details class="collapse" id="mail-options">
+				<summary class="collapse-header">
+					<?= _("MAIL") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_mail_domains" class="form-label"><?= _("Mail Domains") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_mail_domains" id="v_mail_domains" value="<?= htmlentities(trim($v_mail_domains, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-					<div class="u-mb5">
-						<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
+					<div class="u-mb10">
+						<label for="v_mail_accounts" class="form-label">
+							<?= _("Mail Accounts") ?> <span class="optional">(<?= _("per domain") ?>)</span>
+						</label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?= htmlentities(trim($v_mail_accounts, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-					<?php
-						if ($v_ns3) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns4) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns5) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns6) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns7) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns8) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-					?>
-					<button type="button" class="form-link u-mt20 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
-						<?= _("Add Name Server") ?>
-					</button>
-				<?php } ?>
-			</div>
-			<h2 x-on:click="showMailOptions = !showMailOptions" class="section-title">
-				<?= _("MAIL") ?>
-				<i
-					x-bind:class="showMailOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showMailOptions" id="mail-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_mail_domains" class="form-label"><?= _("Mail Domains") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_mail_domains" id="v_mail_domains" value="<?= htmlentities(trim($v_mail_domains, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+					<div class="u-mb10">
+						<label for="v_ratelimit" class="form-label">
+							<?= _("Rate Limit") ?> <span class="optional">(<?= _("per account / hour") ?>)</span>
+						</label>
+						<input type="text" class="form-control" name="v_ratelimit" id="v_ratelimit" value="<?= htmlentities(trim($v_ratelimit, "'")) ?>">
 					</div>
 				</div>
-				<div class="u-mb10">
-					<label for="v_mail_accounts" class="form-label">
-						<?= _("Mail Accounts") ?> <span class="optional">(<?= _("per domain") ?>)</span>
-					</label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?= htmlentities(trim($v_mail_accounts, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+			</details>
+			<details class="collapse" id="database-options">
+				<summary class="collapse-header">
+					<?= _("DB") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_databases" class="form-label"><?= _("Databases") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_databases" id="v_databases" value="<?= htmlentities(trim($v_databases, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
 				</div>
-				<div class="u-mb10">
-					<label for="v_ratelimit" class="form-label">
-						<?= _("Rate Limit") ?> <span class="optional">(<?= _("per account / hour") ?>)</span>
-					</label>
-					<input type="text" class="form-control" name="v_ratelimit" id="v_ratelimit" value="<?= htmlentities(trim($v_ratelimit, "'")) ?>">
-				</div>
-			</div>
-			<h2 x-on:click="showDatabaseOptions = !showDatabaseOptions" class="section-title">
-				<?= _("DB") ?>
-				<i
-					x-bind:class="showDatabaseOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showDatabaseOptions" id="database-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_databases" class="form-label"><?= _("Databases") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_databases" id="v_databases" value="<?= htmlentities(trim($v_databases, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+			</details>
+			<details class="collapse" id="system-options">
+				<summary class="collapse-header">
+					<?= _("System") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_cron_jobs" class="form-label"><?= _("Cron Jobs") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_cron_jobs" id="v_cron_jobs" value="<?= htmlentities(trim($v_cron_jobs, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-				</div>
-			</div>
-			<h2 x-on:click="showSystemOptions = !showSystemOptions" class="section-title">
-				<?= _("System") ?>
-				<i
-					x-bind:class="showSystemOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showSystemOptions" id="system-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_cron_jobs" class="form-label"><?= _("Cron Jobs") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_cron_jobs" id="v_cron_jobs" value="<?= htmlentities(trim($v_cron_jobs, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+					<div class="u-mb10">
+						<label for="v_shell" class="form-label"><?= _("SSH Access") ?></label>
+						<select class="form-select" name="v_shell" id="v_shell">
+							<?php foreach ($shells as $key => $value): ?>
+								<option value="<?= htmlentities($value) ?>"
+									<?php if (!empty($v_shell) && $value == trim($v_shell, "''")): ?>
+										selected
+									<?php endif; ?>
+								>
+									<?= htmlentities($value) ?>
+								</option>
+							<?php endforeach; ?>
+						</select>
 					</div>
 				</div>
-				<div class="u-mb10">
-					<label for="v_shell" class="form-label"><?= _("SSH Access") ?></label>
-					<select class="form-select" name="v_shell" id="v_shell">
-						<?php foreach ($shells as $key => $value): ?>
-							<option value="<?= htmlentities($value) ?>"
-								<?php if (!empty($v_shell) && $value == trim($v_shell, "''")): ?>
-									selected
-								<?php endif; ?>
-							>
-								<?= htmlentities($value) ?>
-							</option>
-						<?php endforeach; ?>
-					</select>
-				</div>
-			</div>
+			</details>
 		</div>
 
 	</form>

web/templates/pages/edit_package.php

@@ -18,13 +18,6 @@
 <div class="container">
 
 	<form
-		x-data="{
-			showWebOptions: false,
-			showDnsOptions: false,
-			showMailOptions: false,
-			showDatabaseOptions: false,
-			showSystemOptions: false,
-		}"
 		id="main-form"
 		name="v_edit_package"
 		method="post"
@@ -67,60 +60,40 @@
 				<label for="v_backups" class="form-label"><?= _("Backups") ?></label>
 				<input type="text" class="form-control" name="v_backups" id="v_backups" value="<?= htmlentities(trim($v_backups, "'")) ?>">
 			</div>
-			<h2 x-on:click="showWebOptions = !showWebOptions" class="section-title">
-				<?= _("WEB") ?>
-				<i
-					x-bind:class="showWebOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showWebOptions" id="web-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_web_domains" class="form-label"><?= _("Web Domains") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_web_domains" id="v_web_domains" value="<?= htmlentities(trim($v_web_domains, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+			<details class="collapse" id="web-options">
+				<summary class="collapse-header">
+					<?= _("WEB") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_web_domains" class="form-label"><?= _("Web Domains") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_web_domains" id="v_web_domains" value="<?= htmlentities(trim($v_web_domains, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-				</div>
-				<div class="u-mb10">
-					<label for="v_web_aliases" class="form-label">
-						<?= _("Web Aliases") ?> <span class="optional">(<?= _("per domain") ?>)</span>
-					</label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?= htmlentities(trim($v_web_aliases, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+					<div class="u-mb10">
+						<label for="v_web_aliases" class="form-label">
+							<?= _("Web Aliases") ?> <span class="optional">(<?= _("per domain") ?>)</span>
+						</label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_web_aliases" id="v_web_aliases" value="<?= htmlentities(trim($v_web_aliases, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-				</div>
-				<div class="u-mb10">
-					<label for="v_web_template" class="form-label">
-						<?= _("Web Template") . " <span class='optional'> " . strtoupper($_SESSION["WEB_SYSTEM"]) . "</span>" ?>
-					</label>
-					<select class="form-select" name="v_web_template" id="v_web_template">
-						<?php
-							foreach ($web_templates as $key => $value) {
-								echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-								if ((!empty($v_web_template)) && ( $value == trim($v_web_template, "'"))){
-									echo ' selected' ;
-								}
-								echo ">".htmlentities($value)."</option>\n";
-							}
-						?>
-					</select>
-				</div>
-				<?php if (!empty($_SESSION['WEB_BACKEND'])) { echo ""; ?>
 					<div class="u-mb10">
-						<label for="v_backend_template" class="form-label">
-							<?= _("Backend Template") . "<span class='optional'>" . strtoupper($_SESSION["WEB_BACKEND"]) . "</span>" ?>
+						<label for="v_web_template" class="form-label">
+							<?= _("Web Template") . " <span class='optional'> " . strtoupper($_SESSION["WEB_SYSTEM"]) . "</span>" ?>
 						</label>
-						<select class="form-select" name="v_backend_template" id="v_backend_template">
+						<select class="form-select" name="v_web_template" id="v_web_template">
 							<?php
-								foreach ($backend_templates as $key => $value) {
-									echo "\t\t\t\t<option value=\"".$value."\"";
-									if ((!empty($v_backend_template)) && ( $value == trim($v_backend_template, "'"))){
+								foreach ($web_templates as $key => $value) {
+									echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+									if ((!empty($v_web_template)) && ( $value == trim($v_web_template, "'"))){
 										echo ' selected' ;
 									}
 									echo ">".htmlentities($value)."</option>\n";
@@ -128,17 +101,61 @@
 							?>
 						</select>
 					</div>
-				<?=""; }?>
-				<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { echo ""; ?>
+					<?php if (!empty($_SESSION['WEB_BACKEND'])) { echo ""; ?>
+						<div class="u-mb10">
+							<label for="v_backend_template" class="form-label">
+								<?= _("Backend Template") . "<span class='optional'>" . strtoupper($_SESSION["WEB_BACKEND"]) . "</span>" ?>
+							</label>
+							<select class="form-select" name="v_backend_template" id="v_backend_template">
+								<?php
+									foreach ($backend_templates as $key => $value) {
+										echo "\t\t\t\t<option value=\"".$value."\"";
+										if ((!empty($v_backend_template)) && ( $value == trim($v_backend_template, "'"))){
+											echo ' selected' ;
+										}
+										echo ">".htmlentities($value)."</option>\n";
+									}
+								?>
+							</select>
+						</div>
+					<?=""; }?>
+					<?php if (!empty($_SESSION['PROXY_SYSTEM'])) { echo ""; ?>
+						<div class="u-mb10">
+							<label for="v_proxy_template" class="form-label">
+								<?= _("Proxy Template") . "<span class='optional'>" . strtoupper($_SESSION["PROXY_SYSTEM"]) . "</span>" ?>
+							</label>
+							<select class="form-select" name="v_proxy_template" id="v_proxy_template">
+								<?php
+									foreach ($proxy_templates as $key => $value) {
+										echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
+										if ((!empty($v_proxy_template)) && ( $value == trim($v_proxy_template, "'"))){
+											echo ' selected' ;
+										}
+										echo ">".htmlentities($value)."</option>\n";
+									}
+								?>
+							</select>
+						</div>
+					<?=""; }?>
+				</div>
+			</details>
+			<details class="collapse" id="dns-options">
+				<summary class="collapse-header">
+					<?= _("DNS") ?>
+				</summary>
+				<div class="collapse-content">
 					<div class="u-mb10">
-						<label for="v_proxy_template" class="form-label">
-							<?= _("Proxy Template") . "<span class='optional'>" . strtoupper($_SESSION["PROXY_SYSTEM"]) . "</span>" ?>
+						<label for="v_dns_template" class="form-label">
+							<?= _("DNS Template") . "<span class='optional'>" . strtoupper($_SESSION["DNS_SYSTEM"]) . "</span>" ?>
 						</label>
-						<select class="form-select" name="v_proxy_template" id="v_proxy_template">
+						<select class="form-select" name="v_dns_template" id="v_dns_template">
 							<?php
-								foreach ($proxy_templates as $key => $value) {
+								foreach ($dns_templates as $key => $value) {
 									echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-									if ((!empty($v_proxy_template)) && ( $value == trim($v_proxy_template, "'"))){
+									if ((!empty($v_dns_template)) && ( $value == $v_dns_template)){
+										echo ' selected' ;
+									}
+									if ((!empty($v_dns_template)) && ( $value == trim($v_dns_template, "'"))){
 										echo ' selected' ;
 									}
 									echo ">".htmlentities($value)."</option>\n";
@@ -146,191 +163,157 @@
 							?>
 						</select>
 					</div>
-				<?=""; }?>
-			</div>
-			<h2 x-on:click="showDnsOptions = !showDnsOptions" class="section-title">
-				<?= _("DNS") ?>
-				<i
-					x-bind:class="showDnsOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showDnsOptions" id="dns-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_dns_template" class="form-label">
-						<?= _("DNS Template") . "<span class='optional'>" . strtoupper($_SESSION["DNS_SYSTEM"]) . "</span>" ?>
-					</label>
-					<select class="form-select" name="v_dns_template" id="v_dns_template">
+					<div class="u-mb10">
+						<label for="v_dns_domains" class="form-label"><?= _("DNS Zones") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?= htmlentities(trim($v_dns_domains, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
+					</div>
+					<div class="u-mb10">
+						<label for="v_dns_records" class="form-label">
+							<?= _("DNS Records") ?> <span class="optional">(<?= _("per domain") ?>)</span>
+						</label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?= htmlentities(trim($v_dns_records, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
+					</div>
+					<?php if (isset($_SESSION["DNS_SYSTEM"]) && !empty($_SESSION["DNS_SYSTEM"])) { ?>
+						<p class="form-label u-mb10"><?= _("Name Servers") ?></p>
+						<div class="u-mb5">
+							<input type="text" class="form-control" name="v_ns1" value="<?= htmlentities(trim($v_ns1, "'")) ?>">
+						</div>
+						<div class="u-mb5">
+							<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
+						</div>
 						<?php
-							foreach ($dns_templates as $key => $value) {
-								echo "\t\t\t\t<option value=\"".htmlentities($value)."\"";
-								if ((!empty($v_dns_template)) && ( $value == $v_dns_template)){
-									echo ' selected' ;
-								}
-								if ((!empty($v_dns_template)) && ( $value == trim($v_dns_template, "'"))){
-									echo ' selected' ;
-								}
-								echo ">".htmlentities($value)."</option>\n";
+							if ($v_ns3) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns4) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns5) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns6) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns7) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
+							}
+							if ($v_ns8) {
+								echo '<div class="u-side-by-side u-mb5">
+									<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
+									<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
+								</div>';
 							}
 						?>
-					</select>
-				</div>
-				<div class="u-mb10">
-					<label for="v_dns_domains" class="form-label"><?= _("DNS Zones") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_dns_domains" id="v_dns_domains" value="<?= htmlentities(trim($v_dns_domains, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
+						<button type="button" class="form-link u-mt20 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
+							<?= _("Add Name Server") ?>
 						</button>
-					</div>
-				</div>
-				<div class="u-mb10">
-					<label for="v_dns_records" class="form-label">
-						<?= _("DNS Records") ?> <span class="optional">(<?= _("per domain") ?>)</span>
-					</label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_dns_records" id="v_dns_records" value="<?= htmlentities(trim($v_dns_records, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
-					</div>
+					<?php } ?>
 				</div>
-				<?php if (isset($_SESSION["DNS_SYSTEM"]) && !empty($_SESSION["DNS_SYSTEM"])) { ?>
-					<p class="form-label u-mb10"><?= _("Name Servers") ?></p>
-					<div class="u-mb5">
-						<input type="text" class="form-control" name="v_ns1" value="<?= htmlentities(trim($v_ns1, "'")) ?>">
+			</details>
+			<details class="collapse" id="mail-options">
+				<summary class="collapse-header">
+					<?= _("MAIL") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_mail_domains" class="form-label"><?= _("Mail Domains") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_mail_domains" id="v_mail_domains" value="<?= htmlentities(trim($v_mail_domains, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-					<div class="u-mb5">
-						<input type="text" class="form-control" name="v_ns2" value="<?= htmlentities(trim($v_ns2, "'")) ?>">
+					<div class="u-mb10">
+						<label for="v_mail_accounts" class="form-label">
+							<?= _("Mail Accounts") ?> <span class="optional">(<?= _("per domain") ?>)</span>
+						</label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?= htmlentities(trim($v_mail_accounts, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-					<?php
-						if ($v_ns3) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns3" value="'.htmlentities(trim($v_ns3, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns4) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns4" value="'.htmlentities(trim($v_ns4, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns5) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns5" value="'.htmlentities(trim($v_ns5, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns6) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns6" value="'.htmlentities(trim($v_ns6, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns7) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns7" value="'.htmlentities(trim($v_ns7, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-						if ($v_ns8) {
-							echo '<div class="u-side-by-side u-mb5">
-								<input type="text" class="form-control" name="v_ns8" value="'.htmlentities(trim($v_ns8, "'")).'">
-								<span class="u-ml10 js-remove-ns"><i class="fas fa-trash icon-dim icon-red"></i></span>
-							</div>';
-						}
-					?>
-					<button type="button" class="form-link u-mt20 js-add-ns" <?php if ($v_ns8) echo 'style="display:none;"'; ?>>
-						<?= _("Add Name Server") ?>
-					</button>
-				<?php } ?>
-			</div>
-			<h2 x-on:click="showMailOptions = !showMailOptions" class="section-title">
-				<?= _("MAIL") ?>
-				<i
-					x-bind:class="showMailOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showMailOptions" id="mail-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_mail_domains" class="form-label"><?= _("Mail Domains") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_mail_domains" id="v_mail_domains" value="<?= htmlentities(trim($v_mail_domains, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+					<div class="u-mb10">
+						<label for="v_ratelimit" class="form-label">
+							<?= _("Rate Limit") ?> <span class="optional">(<?= _("per account / hour") ?>)</span>
+						</label>
+						<input type="text" class="form-control" name="v_ratelimit" id="v_ratelimit" value="<?= htmlentities(trim($v_ratelimit, "'")) ?>">
 					</div>
 				</div>
-				<div class="u-mb10">
-					<label for="v_mail_accounts" class="form-label">
-						<?= _("Mail Accounts") ?> <span class="optional">(<?= _("per domain") ?>)</span>
-					</label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_mail_accounts" id="v_mail_accounts" value="<?= htmlentities(trim($v_mail_accounts, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+			</details>
+			<details class="collapse" id="database-options">
+				<summary class="collapse-header">
+					<?= _("DB") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_databases" class="form-label"><?= _("Databases") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_databases" id="v_databases" value="<?= htmlentities(trim($v_databases, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
 				</div>
-				<div class="u-mb10">
-					<label for="v_ratelimit" class="form-label">
-						<?= _("Rate Limit") ?> <span class="optional">(<?= _("per account / hour") ?>)</span>
-					</label>
-					<input type="text" class="form-control" name="v_ratelimit" id="v_ratelimit" value="<?= htmlentities(trim($v_ratelimit, "'")) ?>">
-				</div>
-			</div>
-			<h2 x-on:click="showDatabaseOptions = !showDatabaseOptions" class="section-title">
-				<?= _("DB") ?>
-				<i
-					x-bind:class="showDatabaseOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showDatabaseOptions" id="database-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_databases" class="form-label"><?= _("Databases") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_databases" id="v_databases" value="<?= htmlentities(trim($v_databases, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+			</details>
+			<details class="collapse" id="system-options">
+				<summary class="collapse-header">
+					<?= _("System") ?>
+				</summary>
+				<div class="collapse-content">
+					<div class="u-mb10">
+						<label for="v_cron_jobs" class="form-label"><?= _("Cron Jobs") ?></label>
+						<div class="u-pos-relative">
+							<input type="text" class="form-control" name="v_cron_jobs" id="v_cron_jobs" value="<?= htmlentities(trim($v_cron_jobs, "'")) ?>">
+							<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
+								<i class="fas fa-infinity"></i>
+							</button>
+						</div>
 					</div>
-				</div>
-			</div>
-			<h2 x-on:click="showSystemOptions = !showSystemOptions" class="section-title">
-				<?= _("System") ?>
-				<i
-					x-bind:class="showSystemOptions ? 'fa-square-minus' : 'fa-square-plus'"
-					class="fas icon-dim icon-maroon js-section-toggle-icon"
-				></i>
-			</h2>
-			<div x-cloak x-show="showSystemOptions" id="system-options">
-				<div class="u-mt15 u-mb10">
-					<label for="v_cron_jobs" class="form-label"><?= _("Cron Jobs") ?></label>
-					<div class="u-pos-relative">
-						<input type="text" class="form-control" name="v_cron_jobs" id="v_cron_jobs" value="<?= htmlentities(trim($v_cron_jobs, "'")) ?>">
-						<button type="button" class="unlimited-toggle js-unlimited-toggle" title="<?= _("Unlimited") ?>">
-							<i class="fas fa-infinity"></i>
-						</button>
+					<div class="u-mb10">
+						<label for="v_shell" class="form-label"><?= _("SSH Access") ?></label>
+						<select class="form-select" name="v_shell" id="v_shell">
+							<?php foreach ($shells as $key => $value): ?>
+								<option value="<?= htmlentities($value) ?>"
+									<?php if (!empty($v_shell) && $value == trim($v_shell, "''")): ?>
+										selected
+									<?php endif; ?>
+								>
+									<?= htmlentities($value) ?>
+								</option>
+							<?php endforeach; ?>
+						</select>
 					</div>
 				</div>
-				<div class="u-mb10">
-					<label for="v_shell" class="form-label"><?= _("SSH Access") ?></label>
-					<select class="form-select" name="v_shell" id="v_shell">
-						<?php foreach ($shells as $key => $value): ?>
-							<option value="<?= htmlentities($value) ?>"
-								<?php if (!empty($v_shell) && $value == trim($v_shell, "''")): ?>
-									selected
-								<?php endif; ?>
-							>
-								<?= htmlentities($value) ?>
-							</option>
-						<?php endforeach; ?>
-					</select>
-				</div>
-			</div>
+			</details>
 		</div>
 
 	</form>

web/templates/pages/edit_server.php

@@ -37,9 +37,6 @@
 			webmailAlias: '<?= $_SESSION["WEBMAIL_ALIAS"] ?? "" ?>',
 			apiSystem: '<?= $_SESSION["API_SYSTEM"] ?>',
 			legacyApi: '<?= $_SESSION["API"] ?>',
-			showSystemOptions: false,
-			showProtectionOptions: false,
-			showPolicyOptions: false,
 		}"
 		id="main-form"
 		name="v_configure_server"
@@ -55,11 +52,11 @@
 			<?php show_alert_message($_SESSION); ?>
 
 			<!-- Basic options section -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-gear u-mr10"></i><?= _("Basic Options") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<div class="u-mb10">
 						<label for="v_hostname" class="form-label">
 							<?= _("Hostname") ?>
@@ -145,11 +142,11 @@
 			</details>
 
 			<!-- Updates section -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-code-branch u-mr10"></i><?= _("Updates") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<p class="u-mb10">
 						<?= _("Version") ?>:
 						<span class="optional">
@@ -212,11 +209,11 @@
 			</details>
 
 			<!-- Web Server section -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-earth-americas u-mr10"></i><?= _("Web Server") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<?php if (!empty($_SESSION["PROXY_SYSTEM"])) { ?>
 						<p>
 							<?= _("Proxy Server") ?>:
@@ -319,11 +316,11 @@
 
 			<!-- DNS Server section -->
 			<?php if (!empty($_SESSION["DNS_SYSTEM"])) { ?>
-				<details class="collapse u-mb10">
-					<summary class="collapse-header">
+				<details class="box-collapse u-mb10">
+					<summary class="box-collapse-header">
 						<i class="fas fa-book-atlas u-mr10"></i><?= _("DNS Server") ?>
 					</summary>
-					<div class="collapse-content">
+					<div class="box-collapse-content">
 						<p>
 							<?= _("DNS Server") ?>:
 							<span class="u-ml5">
@@ -364,11 +361,11 @@
 
 			<!-- Mail Server section -->
 			<?php if (!empty($_SESSION["MAIL_SYSTEM"])) { ?>
-				<details class="collapse u-mb10">
-					<summary class="collapse-header">
+				<details class="box-collapse u-mb10">
+					<summary class="box-collapse-header">
 						<i class="fas fa-envelopes-bulk u-mr10"></i><?= _("Mail Server") ?>
 					</summary>
-					<div class="collapse-content">
+					<div class="box-collapse-content">
 						<p>
 							<?= _("Mail Server") ?>:
 							<span class="u-ml5">
@@ -488,11 +485,11 @@
 
 			<!-- Databases section -->
 			<?php if (!empty($_SESSION["DB_SYSTEM"])) { ?>
-				<details class="collapse u-mb10">
-					<summary class="collapse-header">
+				<details class="box-collapse u-mb10">
+					<summary class="box-collapse-header">
 						<i class="fas fa-database u-mr10"></i><?= _("Databases") ?>
 					</summary>
-					<div class="collapse-content">
+					<div class="box-collapse-content">
 						<div class="u-mb10">
 							<p>
 								<?= _("MySQL Support") ?>:
@@ -653,11 +650,11 @@
 			<?php } ?>
 
 			<!-- Backups section -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-arrow-rotate-left u-mr10"></i><?= _("Backups") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<div class="u-mb10">
 						<label for="v_backup" class="form-label">
 							<?= _("Local Backup") ?>
@@ -910,12 +907,12 @@
 				</div>
 			</details>
 
-			<!-- SSL tab -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<!-- SSL section -->
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-lock u-mr10"></i><?= _("SSL") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<div class="u-mb20">
 						<label for="v_ssl_crt" class="form-label">
 							<?= _("SSL Certificate") ?>
@@ -981,393 +978,390 @@
 				</div>
 			</details>
 
-			<!-- Security tab -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<!-- Security section -->
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-key u-mr10"></i><?= _("Security") ?>
 				</summary>
-				<div class="collapse-content">
-					<h2 x-on:click="showSystemOptions = !showSystemOptions" class="section-title">
-						<?= _("System") ?>
-						<i
-							x-bind:class="showSystemOptions ? 'fa-square-minus' : 'fa-square-plus'"
-							class="fas icon-dim icon-maroon js-section-toggle-icon"
-						></i>
-					</h2>
-					<div x-cloak x-show="showSystemOptions">
-						<h3 class="u-mt20 u-mb10">
-							<?= _("API") ?>
-						</h3>
-						<div class="u-mb10">
-							<label for="v_api_system" class="form-label">
-								<?= _("Enable API access") ?>
-							</label>
-							<select x-model="apiSystem" class="form-select" name="v_api_system" id="v_api_system">
-								<option value="0">
-									<?= _("Disabled") ?>
-								</option>
-								<option value="1">
-									<?= _("Enabled for admin") ?>
-								</option>
-								<option value="2">
-									<?= _("Enabled for all users") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_api" class="form-label">
-								<?= _("Enable legacy API access") ?>
-							</label>
-							<select x-model="legacyApi" class="form-select" name="v_api" id="v_api">
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no">
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div x-cloak x-show="legacyApi === 'yes' || apiSystem > 0">
+				<div class="box-collapse-content">
+
+					<details class="collapse">
+						<summary class="collapse-header">
+							<?= _("System") ?>
+						</summary>
+						<div class="collapse-content">
+							<h3 class="u-mb10">
+								<?= _("API") ?>
+							</h3>
 							<div class="u-mb10">
-								<label for="v_api_allowed_ip" class="form-label u-side-by-side">
-									<?= _("Allowed IP addresses for API") ?>
-									<span class="optional">1 IP address per line</span>
+								<label for="v_api_system" class="form-label">
+									<?= _("Enable API access") ?>
 								</label>
-								<textarea class="form-control" name="v_api_allowed_ip" id="v_api_allowed_ip"><?php
-										foreach (explode(",", $_SESSION["API_ALLOWED_IP"]) as $ip) {
-											echo trim($ip)."\n";
-										}
-									?></textarea>
+								<select x-model="apiSystem" class="form-select" name="v_api_system" id="v_api_system">
+									<option value="0">
+										<?= _("Disabled") ?>
+									</option>
+									<option value="1">
+										<?= _("Enabled for admin") ?>
+									</option>
+									<option value="2">
+										<?= _("Enabled for all users") ?>
+									</option>
+								</select>
 							</div>
-						</div>
-						<h3 class="u-mt20 u-mb10">
-							<?= _("Login") ?>
-						</h3>
-						<div class="u-mb10">
-							<label for="v_login_style" class="form-label">
-								<?= _("Login screen style") ?>
-							</label>
-							<select class="form-select" name="v_login_style" id="v_login_style">
-								<option value="default">
-									<?= _("Default") ?>
-								</option>
-								<option value="old" <?= $_SESSION["LOGIN_STYLE"] == "old" ? "selected" : "" ?>>
-									<?= _("Old Style") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_system_password_reset" class="form-label">
-								<?= _("Allow users to reset their passwords") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_system_password_reset"
-								id="v_policy_system_password_reset"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option
-									value="no"
-									<?= $_SESSION["POLICY_SYSTEM_PASSWORD_RESET"] == "no" ? "selected" : "" ?>
+							<div class="u-mb10">
+								<label for="v_api" class="form-label">
+									<?= _("Enable legacy API access") ?>
+								</label>
+								<select x-model="legacyApi" class="form-select" name="v_api" id="v_api">
+									<option value="yes">
+										<?= _("Yes") ?>
+									</option>
+									<option value="no">
+										<?= _("No") ?>
+									</option>
+								</select>
+							</div>
+							<div x-cloak x-show="legacyApi === 'yes' || apiSystem > 0">
+								<div class="u-mb10">
+									<label for="v_api_allowed_ip" class="form-label u-side-by-side">
+										<?= _("Allowed IP addresses for API") ?>
+										<span class="optional">1 IP address per line</span>
+									</label>
+									<textarea class="form-control" name="v_api_allowed_ip" id="v_api_allowed_ip"><?php
+											foreach (explode(",", $_SESSION["API_ALLOWED_IP"]) as $ip) {
+												echo trim($ip)."\n";
+											}
+										?></textarea>
+								</div>
+							</div>
+							<h3 class="u-mt20 u-mb10">
+								<?= _("Login") ?>
+							</h3>
+							<div class="u-mb10">
+								<label for="v_login_style" class="form-label">
+									<?= _("Login screen style") ?>
+								</label>
+								<select class="form-select" name="v_login_style" id="v_login_style">
+									<option value="default">
+										<?= _("Default") ?>
+									</option>
+									<option value="old" <?= $_SESSION["LOGIN_STYLE"] == "old" ? "selected" : "" ?>>
+										<?= _("Old Style") ?>
+									</option>
+								</select>
+							</div>
+							<div class="u-mb10">
+								<label for="v_policy_system_password_reset" class="form-label">
+									<?= _("Allow users to reset their passwords") ?>
+								</label>
+								<select
+									class="form-select"
+									name="v_policy_system_password_reset"
+									id="v_policy_system_password_reset"
 								>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb20">
-							<label for="v_inactive_session_timeout" class="form-label">
-								<?= _("Inactive session timeout") ?> (<?= _("Minutes") ?>)
-							</label>
-							<input
-								type="text"
-								class="form-control"
-								name="v_inactive_session_timeout"
-								id="v_inactive_session_timeout"
-								value="<?= trim($_SESSION["INACTIVE_SESSION_TIMEOUT"], "'") ?>"
-							>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_csrf_strictness" class="form-label">
-								<?= _("Prevent CSRF") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_csrf_strictness"
-								id="v_policy_csrf_strictness"
-							>
-								<option value="0">
-									<?= _("Disabled") ?>
-								</option>
-								<option value="1"	<?= $_SESSION["POLICY_CSRF_STRICTNESS"] == "1" ? "selected" : "" ?>>
-									<?= _("Enabled") ?>
-								</option>
-								<option value="2"	<?= $_SESSION["POLICY_CSRF_STRICTNESS"] == "2" ? "selected" : "" ?>>
-									<?= _("Strict") ?>
-								</option>
-							</select>
+									<option value="yes">
+										<?= _("Yes") ?>
+									</option>
+									<option
+										value="no"
+										<?= $_SESSION["POLICY_SYSTEM_PASSWORD_RESET"] == "no" ? "selected" : "" ?>
+									>
+										<?= _("No") ?>
+									</option>
+								</select>
+							</div>
+							<div class="u-mb20">
+								<label for="v_inactive_session_timeout" class="form-label">
+									<?= _("Inactive session timeout") ?> (<?= _("Minutes") ?>)
+								</label>
+								<input
+									type="text"
+									class="form-control"
+									name="v_inactive_session_timeout"
+									id="v_inactive_session_timeout"
+									value="<?= trim($_SESSION["INACTIVE_SESSION_TIMEOUT"], "'") ?>"
+								>
+							</div>
+							<div class="u-mb10">
+								<label for="v_policy_csrf_strictness" class="form-label">
+									<?= _("Prevent CSRF") ?>
+								</label>
+								<select
+									class="form-select"
+									name="v_policy_csrf_strictness"
+									id="v_policy_csrf_strictness"
+								>
+									<option value="0">
+										<?= _("Disabled") ?>
+									</option>
+									<option value="1"	<?= $_SESSION["POLICY_CSRF_STRICTNESS"] == "1" ? "selected" : "" ?>>
+										<?= _("Enabled") ?>
+									</option>
+									<option value="2"	<?= $_SESSION["POLICY_CSRF_STRICTNESS"] == "2" ? "selected" : "" ?>>
+										<?= _("Strict") ?>
+									</option>
+								</select>
+							</div>
 						</div>
-					</div>
+					</details>
 
 					<?php if ($_SESSION["userContext"] === "admin" && $_SESSION["user"] === "admin") { ?>
-						<h2 x-on:click="showProtectionOptions = !showProtectionOptions" class="section-title">
-							<?= _("System Protection") ?>
-							<i
-								x-bind:class="showProtectionOptions ? 'fa-square-minus' : 'fa-square-plus'"
-								class="fas icon-dim icon-maroon js-section-toggle-icon"
-							></i>
-						</h2>
-						<div x-cloak x-show="showProtectionOptions">
-							<h3 class="u-mt20 u-mb10">
-								<?= _("System Administrator account") ?>
+						<details class="collapse">
+							<summary class="collapse-header">
+								<?= _("System Protection") ?>
+							</summary>
+							<div class="collapse-content">
+								<h3 class="u-mb10">
+									<?= _("System Administrator account") ?>
+								</h3>
+								<div class="u-mb10">
+									<label for="v_policy_system_protected_admin" class="form-label">
+										<?= _("Restrict access to read-only for other administrators") ?>
+									</label>
+									<select
+										class="form-select"
+										name="v_policy_system_protected_admin"
+										id="v_policy_system_protected_admin"
+									>
+										<option value="yes">
+											<?= _("Yes") ?>
+										</option>
+										<option value="no" <?= $_SESSION["POLICY_SYSTEM_PROTECTED_ADMIN"] !== "yes" ? "selected" : "" ?>>
+											<?= _("No") ?>
+										</option>
+									</select>
+								</div>
+								<div class="u-mb10">
+									<label for="v_policy_system_hide_admin" class="form-label">
+										<?= _("Hide account from other administrators") ?>
+									</label>
+									<select
+										class="form-select"
+										name="v_policy_system_hide_admin"
+										id="v_policy_system_hide_admin"
+									>
+										<option value="yes">
+											<?= _("Yes") ?>
+										</option>
+										<option value="no" <?= $_SESSION["POLICY_SYSTEM_HIDE_ADMIN"] !== "yes" ? "selected" : "" ?>>
+											<?= _("No") ?>
+										</option>
+									</select>
+								</div>
+								<div class="u-mb10">
+									<label for="v_policy_system_hide_services" class="form-label">
+										<?= _("Do not allow other administrators to access Server Settings") ?>
+									</label>
+									<select
+										class="form-select"
+										name="v_policy_system_hide_services"
+										id="v_policy_system_hide_services"
+									>
+										<option value="yes">
+											<?= _("Yes") ?>
+										</option>
+										<option value="no" <?= $_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes" ? "selected" : "" ?>>
+											<?= _("No") ?>
+										</option>
+									</select>
+								</div>
+							</div>
+						</details>
+					<?php } ?>
+
+					<details class="collapse">
+						<summary class="collapse-header">
+							<?= _("Policies") ?>
+						</summary>
+						<div class="collapse-content">
+							<h3 class="u-mb10">
+								<?= _("Users") ?>
 							</h3>
 							<div class="u-mb10">
-								<label for="v_policy_system_protected_admin" class="form-label">
-									<?= _("Restrict access to read-only for other administrators") ?>
+								<label for="v_policy_user_edit_details" class="form-label">
+									<?= _("Allow users to edit their account details") ?>
 								</label>
 								<select
 									class="form-select"
-									name="v_policy_system_protected_admin"
-									id="v_policy_system_protected_admin"
+									name="v_policy_user_edit_details"
+									id="v_policy_user_edit_details"
 								>
 									<option value="yes">
 										<?= _("Yes") ?>
 									</option>
-									<option value="no" <?= $_SESSION["POLICY_SYSTEM_PROTECTED_ADMIN"] !== "yes" ? "selected" : "" ?>>
+									<option value="no" <?= $_SESSION["POLICY_USER_EDIT_DETAILS"] == "no" ? "selected" : "" ?>>
 										<?= _("No") ?>
 									</option>
 								</select>
 							</div>
 							<div class="u-mb10">
-								<label for="v_policy_system_hide_admin" class="form-label">
-									<?= _("Hide account from other administrators") ?>
+								<label for="v_policy_user_edit_web_templates" class="form-label">
+									<?= _("Allow users to change templates when editing web domains") ?>
+								</label>
+								<select class="form-select" name="v_policy_user_edit_web_templates" id="v_policy_user_edit_web_templates">
+									<option value="yes">
+										<?= _("Yes") ?>
+									</option>
+									<option value="no" <?= $_SESSION["POLICY_USER_EDIT_WEB_TEMPLATES"] == "no" ? "selected" : "" ?>>
+										<?= _("No") ?>
+									</option>
+								</select>
+							</div>
+							<div class="u-mb10">
+								<label for="v_policy_user_edit_dns_templates" class="form-label">
+									<?= _("Allow users to change templates when editing DNS zones") ?>
 								</label>
 								<select
 									class="form-select"
-									name="v_policy_system_hide_admin"
-									id="v_policy_system_hide_admin"
+									name="v_policy_user_edit_dns_templates"
+									id="v_policy_user_edit_dns_templates"
 								>
 									<option value="yes">
 										<?= _("Yes") ?>
 									</option>
-									<option value="no" <?= $_SESSION["POLICY_SYSTEM_HIDE_ADMIN"] !== "yes" ? "selected" : "" ?>>
+									<option value="no" <?= $_SESSION["POLICY_USER_EDIT_DNS_TEMPLATES"] == "no" ? "selected" : "" ?>>
 										<?= _("No") ?>
 									</option>
 								</select>
 							</div>
 							<div class="u-mb10">
-								<label for="v_policy_system_hide_services" class="form-label">
-									<?= _("Do not allow other administrators to access Server Settings") ?>
+								<label for="v_policy_user_view_logs" class="form-label">
+									<?= _("Allow users to view action and login history logs") ?>
 								</label>
 								<select
 									class="form-select"
-									name="v_policy_system_hide_services"
-									id="v_policy_system_hide_services"
+									name="v_policy_user_view_logs"
+									id="v_policy_user_view_logs"
 								>
 									<option value="yes">
 										<?= _("Yes") ?>
 									</option>
-									<option value="no" <?= $_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes" ? "selected" : "" ?>>
+									<option value="no" <?= $_SESSION["POLICY_USER_VIEW_LOGS"] == "no" ? "selected" : "" ?>>
 										<?= _("No") ?>
 									</option>
 								</select>
 							</div>
-						</div>
-					<?php } ?>
-					<h2 x-on:click="showPolicyOptions = !showPolicyOptions" class="section-title">
-						<?= _("Policies") ?>
-						<i
-							x-bind:class="showPolicyOptions ? 'fa-square-minus' : 'fa-square-plus'"
-							class="fas icon-dim icon-maroon js-section-toggle-icon"
-						></i>
-					</h2>
-					<div x-cloak x-show="showPolicyOptions">
-						<h3 class="u-mt20 u-mb10">
-							<?= _("Users") ?>
-						</h3>
-						<div class="u-mb10">
-							<label for="v_policy_user_edit_details" class="form-label">
-								<?= _("Allow users to edit their account details") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_user_edit_details"
-								id="v_policy_user_edit_details"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_USER_EDIT_DETAILS"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_user_edit_web_templates" class="form-label">
-								<?= _("Allow users to change templates when editing web domains") ?>
-							</label>
-							<select class="form-select" name="v_policy_user_edit_web_templates" id="v_policy_user_edit_web_templates">
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_USER_EDIT_WEB_TEMPLATES"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_user_edit_dns_templates" class="form-label">
-								<?= _("Allow users to change templates when editing DNS zones") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_user_edit_dns_templates"
-								id="v_policy_user_edit_dns_templates"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_USER_EDIT_DNS_TEMPLATES"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_user_view_logs" class="form-label">
-								<?= _("Allow users to view action and login history logs") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_user_view_logs"
-								id="v_policy_user_view_logs"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_USER_VIEW_LOGS"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_user_delete_logs" class="form-label">
-								<?= _("Allow users to delete log history") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_user_delete_logs"
-								id="v_policy_user_delete_logs"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_USER_DELETE_LOGS"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<?php if ($_SESSION["POLICY_SYSTEM_ENABLE_BACON"] === "true") { ?>
 							<div class="u-mb10">
-								<label for="v_policy_user_view_suspended" class="form-label">
-									<?= _("Allow suspended users to log in with read-only access") ?>
-									<span class="hint">(<?= _("Preview") ?>)</span>
+								<label for="v_policy_user_delete_logs" class="form-label">
+									<?= _("Allow users to delete log history") ?>
 								</label>
 								<select
 									class="form-select"
-									name="v_policy_user_view_suspended"
-									id="v_policy_user_view_suspended"
+									name="v_policy_user_delete_logs"
+									id="v_policy_user_delete_logs"
 								>
 									<option value="yes">
 										<?= _("Yes") ?>
 									</option>
-									<option value="no" <?= $_SESSION["POLICY_USER_VIEW_SUSPENDED"] == "no" ? "selected" : "" ?>>
+									<option value="no" <?= $_SESSION["POLICY_USER_DELETE_LOGS"] == "no" ? "selected" : "" ?>>
+										<?= _("No") ?>
+									</option>
+								</select>
+							</div>
+							<?php if ($_SESSION["POLICY_SYSTEM_ENABLE_BACON"] === "true") { ?>
+								<div class="u-mb10">
+									<label for="v_policy_user_view_suspended" class="form-label">
+										<?= _("Allow suspended users to log in with read-only access") ?>
+										<span class="hint">(<?= _("Preview") ?>)</span>
+									</label>
+									<select
+										class="form-select"
+										name="v_policy_user_view_suspended"
+										id="v_policy_user_view_suspended"
+									>
+										<option value="yes">
+											<?= _("Yes") ?>
+										</option>
+										<option value="no" <?= $_SESSION["POLICY_USER_VIEW_SUSPENDED"] == "no" ? "selected" : "" ?>>
+											<?= _("No") ?>
+										</option>
+									</select>
+								</div>
+							<?php } ?>
+							<div class="u-mb10">
+								<label for="v_policy_backup_suspended_users" class="form-label">
+									<?= _("Allow suspended users to create new backups") ?>
+								</label>
+								<select
+									class="form-select"
+									name="v_policy_backup_suspended_users"
+									id="v_policy_backup_suspended_users"
+								>
+									<option value="yes">
+										<?= _("Yes") ?>
+									</option>
+									<option value="no" <?= $_SESSION["POLICY_BACKUP_SUSPENDED_USERS"] == "no" ? "selected" : "" ?>>
+										<?= _("No") ?>
+									</option>
+								</select>
+							</div>
+							<div class="u-mb10">
+								<label for="v_policy_sync_error_documents" class="form-label">
+									<?= _("Sync Error document templates on user rebuild") ?>
+								</label>
+								<select
+									class="form-select"
+									name="v_policy_sync_error_documents"
+									id="v_policy_sync_error_documents"
+								>
+									<option value="yes">
+										<?= _("Yes") ?>
+									</option>
+									<option value="no" <?= $_SESSION["POLICY_SYNC_ERROR_DOCUMENTS"] == "no" ? "selected" : "" ?>>
+										<?= _("No") ?>
+									</option>
+								</select>
+							</div>
+							<div class="u-mb10">
+								<label for="v_policy_sync_skeleton" class="form-label">
+									<?= _("Sync Skeleton templates") ?>
+								</label>
+								<select
+									class="form-select"
+									name="v_policy_sync_skeleton"
+									id="v_policy_sync_skeleton"
+								>
+									<option value="yes">
+										<?= _("Yes") ?>
+									</option>
+									<option value="no" <?= $_SESSION["POLICY_SYNC_SKELETON"] == "no" ? "selected" : "" ?>>
+										<?= _("No") ?>
+									</option>
+								</select>
+							</div>
+							<h3 class="u-mt20 u-mb10">
+								<?= _("Domains") ?>
+							</h3>
+							<div class="u-mb10">
+								<label for="v_enforce_subdomain_ownership" class="form-label">
+									<?= _("Enforce subdomain ownership") ?>
+								</label>
+								<select
+									class="form-select"
+									name="v_enforce_subdomain_ownership"
+									id="v_enforce_subdomain_ownership"
+								>
+									<option value="yes">
+										<?= _("Yes") ?>
+									</option>
+									<option value="no" <?= $_SESSION["ENFORCE_SUBDOMAIN_OWNERSHIP"] == "no" ? "selected" : "" ?>>
 										<?= _("No") ?>
 									</option>
 								</select>
 							</div>
-						<?php } ?>
-						<div class="u-mb10">
-							<label for="v_policy_backup_suspended_users" class="form-label">
-								<?= _("Allow suspended users to create new backups") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_backup_suspended_users"
-								id="v_policy_backup_suspended_users"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_BACKUP_SUSPENDED_USERS"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_sync_error_documents" class="form-label">
-								<?= _("Sync Error document templates on user rebuild") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_sync_error_documents"
-								id="v_policy_sync_error_documents"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_SYNC_ERROR_DOCUMENTS"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<div class="u-mb10">
-							<label for="v_policy_sync_skeleton" class="form-label">
-								<?= _("Sync Skeleton templates") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_policy_sync_skeleton"
-								id="v_policy_sync_skeleton"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["POLICY_SYNC_SKELETON"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
-						</div>
-						<h3 class="u-mt20 u-mb10">
-							<?= _("Domains") ?>
-						</h3>
-						<div class="u-mb10">
-							<label for="v_enforce_subdomain_ownership" class="form-label">
-								<?= _("Enforce subdomain ownership") ?>
-							</label>
-							<select
-								class="form-select"
-								name="v_enforce_subdomain_ownership"
-								id="v_enforce_subdomain_ownership"
-							>
-								<option value="yes">
-									<?= _("Yes") ?>
-								</option>
-								<option value="no" <?= $_SESSION["ENFORCE_SUBDOMAIN_OWNERSHIP"] == "no" ? "selected" : "" ?>>
-									<?= _("No") ?>
-								</option>
-							</select>
 						</div>
-					</div>
+					</details>
+
 				</div>
 			</details>
 
-			<!-- Plugins tab -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<!-- Plugins section -->
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-puzzle-piece u-mr10"></i><?= _("Plugins") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<div class="u-mb10">
 						<label for="v_plugin_app_installer" class="form-label">
 							<?= _("Quick App Installer") ?>

web/templates/pages/edit_whitelabel.php

@@ -35,12 +35,12 @@
 			<?php show_alert_message($_SESSION); ?>
 
 			<!-- Basic options section -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-gear u-mr15"></i>
 					<?= _("General") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<div class="u-mb10">
 						<label for="v_app_name" class="form-label">
 							<?= _("Application Name") ?>
@@ -113,12 +113,12 @@
 				</div>
 			</details>
 			<!-- Custom Logo options section -->
-			<details class="collapse u-mb10">
-				<summary class="collapse-header">
+			<details class="box-collapse u-mb10">
+				<summary class="box-collapse-header">
 					<i class="fas fa-gear u-mr15"></i>
 					<?= _("Custom Logo") ?>
 				</summary>
-				<div class="collapse-content">
+				<div class="box-collapse-content">
 					<div class="u-mb10">
 						<label for="v_custom_logo" class="form-label">
 							<?= _("Custom Logo") ?>