nodebb-theme-harmony 3.0.0-beta.1 → 3.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "nbbpm": {
     "compatibility": "^4.14.0"
   },
@@ -45,7 +45,7 @@
     "@fontsource/poppins": "5.2.7"
   },
   "devDependencies": {
-    "eslint": "10.4.1",
+    "eslint": "10.5.0",
     "eslint-config-nodebb": "^2.0.2"
   }
 }

package/public/harmony.js

@@ -141,7 +141,7 @@ $(document).ready(function () {
 	}
 
 	function setupDrafts() {
-		require(['composer/drafts', 'bootbox'], function (drafts, bootbox) {
+		require(['composer/drafts', 'bootbox', 'api'], function (drafts, bootbox, api) {
 			const draftsEl = $('[component="sidebar/drafts"]');
 			const bottomBarDraftsEl = $('[component="bottombar"] [component="sidebar/drafts"]');
 			function updateBadgeCount() {
@@ -159,17 +159,15 @@ $(document).ready(function () {
 					draftListEl.find('.draft-item-container').html('');
 					return;
 				}
-				draftItems.reverse().forEach((draft) => {
-					if (draft) {
-						if (draft.title) {
-							draft.title = utils.escapeHTML(String(draft.title));
-						}
-						draft.text = utils.escapeHTML(
-							draft.text
-						).replace(/(?:\r\n|\r|\n)/g, '<br>');
+				draftItems.reverse();
+				await Promise.all(draftItems.map(async (item) => {
+					const cid = String(item.cid);
+					if (item && item.action === 'topics.post' && cid !== '0') {
+						const categoryUrl = cid !== '-1' ?
+							`/api/category/${encodeURIComponent(cid)}` : `/api/world`;
+						item.category = await api.get(categoryUrl, {});
 					}
-				});
-
+				}));
 				const html = await app.parseAndTranslate('partials/sidebar/drafts', 'drafts', { drafts: draftItems });
 				draftListEl.find('.no-drafts').addClass('hidden');
 				draftListEl.find('.placeholder-wave').addClass('hidden');

package/scss/harmony.scss

@@ -10,7 +10,6 @@
 @import "mobilebar";
 @import "status";
 @import "account";
-@import "groups";
 @import "world";
 @import "modals";
 
@@ -19,7 +18,6 @@
 @import "modules/user-menu";
 @import "modules/topic-navigator";
 @import "modules/topics-list";
-@import "modules/cover";
 @import "modules/nprogress";
 @import "modules/paginator";
 @import "modules/filters";

package/templates/account/categories.tpl

@@ -2,7 +2,7 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
 	<div class="d-flex gap-1">
-		<h3 class="fw-semibold fs-5 mb-0">{title}</h3>
+		<h3 class="fw-semibold fs-5 mb-0">{tx(title)}</h3>
 	</div>
 
 	<div class="d-flex gap-1">

package/templates/account/consent.tpl

@@ -54,7 +54,8 @@
 
 				<hr />
 
-				<div class="btn-group-vertical d-grid">
+				{{{ if canExport }}}
+				<div class="d-grid gap-2">
 					<a data-action="export-profile" class="btn btn-outline-secondary">
 						<i class="fa fa-download"></i> [[user:consent.export-profile]]
 					</a>
@@ -65,6 +66,7 @@
 						<i class="fa fa-download"></i> [[user:consent.export-uploads]]
 					</a>
 				</div>
+				{{{ end }}}
 			</div>
 		</div>
 	</div>

package/templates/account/profile.tpl

@@ -10,7 +10,7 @@
 
 {{{ if aboutme }}}
 <div component="aboutme" class="text-sm text-break">
-{{aboutmeParsed}}
+{{txEscape(aboutmeParsed)}}
 </div>
 {{{ end }}}
 
@@ -76,7 +76,7 @@
 		{{{ if ./value }}}
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {./name}</span></span>
+				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {tx(./name)}</span></span>
 				{{{ if (./type == "input-link") }}}
 				<a class="text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{./value}" rel="nofollow noreferrer">{./linkValue}</a>
 				{{{ else }}}

package/templates/account/settings.tpl

@@ -10,7 +10,7 @@
 		<label for="bootswatchSkin" class="form-label fw-bold">[[user:select-skin]]</label>
 		<select class="form-select form-select-sm" id="bootswatchSkin" data-property="bootswatchSkin">
 			{{{each bootswatchSkinOptions}}}
-			<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{bootswatchSkinOptions.name}</option>
+			<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{tx(bootswatchSkinOptions.name)}</option>
 			{{{end}}}
 		</select>
 
@@ -177,7 +177,7 @@
 				<label class="form-label text-sm" for="dailyDigestFreq">[[user:digest-label]]</label>
 				<select class="form-select form-select-sm" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
 					{{{each dailyDigestFreqOptions}}}
-					<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{./name}</option>
+					<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{tx(./name)}</option>
 					{{{end}}}
 				</select>
 				<p class="form-text text-xs">[[user:digest-description]]</p>
@@ -271,7 +271,7 @@
 					<tr component="notification/setting" class="align-middle">
 						<td style="width:100%;">
 							<div class="align-items-center">
-								<label class="text-sm tracking-tight" for="{./name}">{./label}</label>
+								<label class="text-sm tracking-tight" for="{./name}">{tx(./label)}</label>
 								<input type="hidden" data-property="{./name}" value="{./value}">
 							</div>
 						</td>

package/templates/account/tags.tpl

@@ -2,7 +2,7 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
 	<div class="d-flex gap-1">
-		<h3 class="fw-semibold fs-5 mb-0">{title}</h3>
+		<h3 class="fw-semibold fs-5 mb-0">{tx(title)}</h3>
 	</div>
 </div>
 

package/templates/account/uploads.tpl

@@ -1,6 +1,6 @@
 <!-- IMPORT partials/account/header.tpl -->
 
-<h3 class="fw-semibold fs-5">{title}</h3>
+<h3 class="fw-semibold fs-5">{tx(title)}</h3>
 
 <div class="alert alert-info text-center">
 	{{{ if privateUploads }}}[[uploads:private-uploads-info]]{{{ else }}}[[uploads:public-uploads-info]]{{{ end }}}

package/templates/category.tpl

@@ -18,7 +18,7 @@
 					<span class="text-lowercase fw-normal">[[global:posts]]</span>
 				</span>
 				{{{ if !isNumber(cid) }}}
-				<a href="{escape(./url)}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
+				<a href="{./url}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
 					<span class="fw-normal">View Original</span>
 					<i class="fa fa-external-link"></i>
 				</a>

package/templates/notifications.tpl

@@ -10,7 +10,7 @@
 				<hr/>
 				{{{ else }}}
 				<a class="btn btn-ghost d-flex gap-2 text-start align-items-baseline text-sm ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
-					<div class="flex-grow-1">{filters.name}</div>
+					<div class="flex-grow-1">{tx(filters.name)}</div>
 					{{{ if ./filter }}}
 					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
 					{{{ end }}}

package/templates/partials/account/header.tpl

@@ -1,5 +1,5 @@
 <div class="account w-100 mx-auto">
-	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({escape(cover:url)}); background-position: {cover:position};">
+	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
 		<div class="container">
 			{{{ if (allowCoverPicture && canEdit) }}}
 			<div class="controls text-center">

package/templates/partials/account/sidebar-left.tpl

@@ -119,7 +119,7 @@
 
 		{{{ each profile_links }}}
 		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn btn-ghost btn-sm ff-secondary text-xs text-start plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
-			<div class="flex-grow-1">{./name}</div>
+			<div class="flex-grow-1">{tx(./name)}</div>
 		</a>
 		{{{end}}}
 	</div>

package/templates/partials/cookie-consent.tpl

@@ -1,6 +1,6 @@
 <div class="position-fixed bottom-0 w-100 px-3 px-md-0 pb-5 mb-5 pb-lg-0 mb-lg-0" style="z-index: 2;">
     <div class="cookie-consent d-flex flex-column flex-lg-row gap-2 text-bg-info col-12 col-sm-8 col-lg-6 p-3 mx-auto rounded mb-5 mb-md-3 justify-content-between align-items-center">
-        <span>{message} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{link}</a></span>
-        <button class="btn btn-primary text-nowrap">{dismiss}</button>
+        <span>{tx(message)} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{tx(link)}</a></span>
+        <button class="btn btn-primary text-nowrap">{tx(dismiss)}</button>
     </div>
 </div>

package/templates/partials/mobile-nav.tpl

@@ -10,14 +10,14 @@
 			<ul class="navigation-dropdown dropdown-menu" role="menu">
 				{{{ each navigation }}}
 				{{{ if displayMenuItem(@root, @index) }}}
-				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{tx(./title)}">
 					<a class="nav-link navigation-link px-3 py-2 {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}" {{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 						<span class="d-inline-flex justify-content-between align-items-center w-100">
 							<span class="text-nowrap">
 								{{{ if ./iconClass }}}
 								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
 								{{{ end }}}
-								{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{./text}</span>{{{ end }}}
+								{{{ if ./text }}}<span class="nav-text px-2 fw-semibold">{tx(./text)}</span>{{{ end }}}
 							</span>
 							<span component="navigation/count" class="badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>

package/templates/partials/notifications_list.tpl

@@ -23,11 +23,11 @@
 
 			<div class="d-flex flex-grow-1 flex-column gap-1 align-items-start position-relative">
 				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link" component="notifications/item/link">
-					{./bodyShort}
+					{{./bodyShort}}
 				</a>
 				{{{ if ./bodyLong}}}
 				<div class="text-secondary text-sm line-clamp-2 text-contain hidden-blockquote hidden-pre hidden-first-child-br">
-					{./bodyLong}
+					{{./bodyLong}}
 				</div>
 				{{{ end }}}
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>

package/templates/partials/search-results.tpl

@@ -1,6 +1,5 @@
 {{{ if matchCount }}}
-<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">[[search:results-matching, {matchCount}, {txEscape(search_query)}, {time}]]
-</div>
+<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">{{tx("search:results-matching", matchCount, txEscape(search_query), time)}}</div>
 {{{ else }}}
 {{{ if search_query }}}
 <div class="badge text-bg-warning align-self-start">[[search:no-matches]]</div>
@@ -25,7 +24,7 @@
 			<div class="d-flex gap-3 post-info">
 				<div class="post-author d-flex gap-1">
 					<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{{buildAvatar(./user, "16px", true, "not-responsive")}}</a>
-					<a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
+					<a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{./user.displayname}</a>
 				</div>
 				<span class="timeago text-sm text-muted" title="{./timestampISO}"></span>
 			</div>

package/templates/partials/sidebar/drafts.tpl

@@ -35,17 +35,22 @@
 							{{{ end }}}
 
 							{{{ if (./action == "posts.reply") }}}
-							<div class="text text-xs fw-semibold line-clamp-2 text-break">[[topic:composer.replying-to, "{txEscape(./title)}"]]</div>
+							<div class="text text-xs fw-semibold line-clamp-2 text-break">{{tx("topic:composer.replying-to", txEscape(quote(./title)))}}</div>
 							{{{ end }}}
 
 							{{{ if (./action == "posts.edit") }}}
-							<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.editing-in, "{txEscape(./title)}"]]</div>
+							<div class="text text-xs fw-semibold line-clamp-2">{{tx("topic:composer.editing-in", txEscape(quote(./title)))}}</div>
 							{{{ end }}}
 
 							{{{ if ./text }}}
 							<div class="text text-sm line-clamp-3 text-break">{./text}</div>
 							{{{ end }}}
-							<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
+							<div class="d-flex align-items-baseline gap-2">
+								{{{ if (./action == "topics.post") }}}
+								{{buildCategoryLabel(./category, "span", "border")}}
+								{{{ end }}}
+								<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
+							</div>
 						</a>
 						<div>
 							<button component="drafts/delete" data-save-id="{./save_id}" class="btn btn-light btn-sm">

package/templates/partials/tags_list.tpl

@@ -1,8 +1,8 @@
 {{{each tags}}}
 <div>
-	<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn btn-ghost ff-base d-flex flex-column gap-1 align-items-start justify-content-start text-truncate p-2">
-		<div class="fw-semibold text-nowrap tag-item w-100 text-start text-truncate">{./valueEscaped}</div>
-		<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {txEscape(formattedNumber(./score))}]]</div>
+	<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./value}" class="btn btn-ghost ff-base d-flex flex-column gap-1 align-items-start justify-content-start text-truncate p-2">
+		<div class="fw-semibold text-nowrap tag-item w-100 text-start text-truncate">{./value}</div>
+		<div class="text-xs text-muted text-nowrap tag-topic-count">{tx("global:x-topics", formattedNumber(./score))}</div>
 	</a>
 </div>
 {{{end}}}

package/templates/partials/topic/post.tpl

@@ -17,7 +17,7 @@
 			{{{ else }}}
 			<span component="user/locality" class="position-absolute top-100 start-100 lh-1 border border-white border-2 rounded-circle small" title="[[global:remote-user]]">
 				<span class="visually-hidden">[[global:remote-user]]</span>
-				<i class="fa fa-globe"></i>
+				<i class="fa fa-globe fa-width-auto"></i>
 			</span>
 			{{{ end }}}
 		</a>
@@ -37,7 +37,7 @@
 							{{{ else }}}
 							<span component="user/locality" class="position-absolute top-100 start-100 lh-1 border border-white border-2 rounded-circle small" title="[[global:remote-user]]">
 								<span class="visually-hidden">[[global:remote-user]]</span>
-								<i class="fa fa-globe"></i>
+								<i class="fa fa-globe fa-width-auto"></i>
 							</span>
 							{{{ end }}}
 						</a>
@@ -64,13 +64,10 @@
 				</div>
 
 				{{{ if posts.user.custom_profile_info.length }}}
-				<div>
-					<span>
-
-						{{{ each posts.user.custom_profile_info }}}
-						{{posts.user.custom_profile_info.content}}
-						{{{ end }}}
-					</span>
+				<div class="d-flex gap-1 align-items-center">
+					{{{ each posts.user.custom_profile_info }}}
+					{{posts.user.custom_profile_info.content}}
+					{{{ end }}}
 				</div>
 				{{{ end }}}
 			</div>
@@ -86,7 +83,7 @@
 
 		<div component="post/footer" class="post-footer border-bottom pb-2">
 			{{{ if posts.user.signature }}}
-			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{{posts.user.signature}}</div>
+			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{{txEscape(posts.user.signature)}}</div>
 			{{{ end }}}
 
 			<div class="d-flex flex-wrap-reverse gap-2 {{{ if (hideReplies || !posts.replies.count) }}}justify-content-end{{{ else }}}justify-content-between{{{ end }}}">

package/templates/partials/topic-list-bar.tpl

@@ -54,7 +54,7 @@
 
 				<!-- IMPORT partials/category/tools-dropdown-left.tpl -->
 
-				<a href="{{{ if (template.category || template.world) }}}{escape(url)}{{{ else }}}{config.relative_path}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
+				<a href="{{{ if (template.category || template.world) }}}{url}{{{ else }}}{config.relative_path}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
 					<i class="fa fa-fw fa-arrow-up"></i> [[recent:load-new-posts]]
 				</a>
 			</div>

package/templates/partials/topics_list.tpl

@@ -3,7 +3,7 @@
 	{{{ each topics }}}
 	<li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {generateTopicClass(@value)}" <!-- IMPORT partials/data/category.tpl -->>
 		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
-		<meta itemprop="name" content="{{generateTopicTitle(@value)}}" />
+		<meta itemprop="name" content="{./title}" />
 		<meta itemprop="itemListOrder" content="descending" />
 		<meta itemprop="position" content="{increment(./index, "1")}" />
 		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
@@ -21,7 +21,7 @@
 			</div>
 			<div class="flex-grow-1 d-flex flex-wrap gap-1 position-relative">
 				<h3 component="topic/header" class="title text-break text-wrap-pretty fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
-					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{{generateTopicTitle(@value)}}</a>
+					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
 				</h3>
 				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100">
 					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">

package/templates/world.tpl

@@ -43,7 +43,7 @@
 									</div>
 									<div class="d-grid gap-0">
 										<div class="title fw-semibold">
-											<a class="text-reset stretched-link" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{../name}</a>
+											<a class="text-reset stretched-link" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{./name}</a>
 										</div>
 										{{{ if ./descriptionParsed }}}
 										<div class="description text-muted text-xs w-100 line-clamp-sm-5">{{./descriptionParsed}}</div>

package/scss/groups.scss

@@ -1,20 +0,0 @@
-.template-groups-details #panel {
-	margin-top: 0px!important;
-}
-
-.group-hover-bg {
-	$hover-color: mix($body-bg, $body-color, 90%);
-	$border-color: mix($body-bg, $body-color, 90%);
-	border-color: $border-color!important;
-	&:hover {
-		background-color: $hover-color;
-	}
-}
-
-.groups.details {
-	margin-top: 200px;
-
-	@include media-breakpoint-up(md) {
-		margin-top: 300px;
-	}
-}

package/scss/modules/cover.scss

@@ -1,104 +0,0 @@
-// used in group and account pages
-.cover {
-	background-size: cover;
-	background-repeat: no-repeat;
-	height: 200px;
-	position: absolute;
-	background-origin: content-box;
-	width: 100%;
-	top: var(--panel-offset)!important;
-	left: auto;
-	right: 0px;
-
-	&:hover .controls, .controls:focus-within {
-		opacity: 1;
-	}
-
-	.controls {
-		height: 200px;
-		line-height: 200px;
-		opacity: 0;
-		@include transition(opacity .15s linear);
-		cursor: pointer;
-		pointer-events: none;
-
-		> * {
-			pointer-events: all;
-		}
-	}
-
-	&.active {
-		&:hover {
-			cursor: move;
-		}
-
-		.controls {
-			> * {
-				display: none;
-			}
-		}
-
-		.save {
-			display: inline-block;
-		}
-	}
-
-	&.saving {
-		.save {
-			display: none;
-		}
-
-		.indicator {
-			display: inline-block;
-		}
-	}
-
-	.save, .indicator {
-		display: inline-block;
-		position: absolute;
-		bottom: 1em;
-		left: 50%;
-		transform: translateX(-50%);
-		opacity: 1;
-		padding: 0.5em;
-		font-weight: bold;
-
-		&:hover {
-			cursor: pointer;
-		}
-	}
-
-	.save {
-		display: none;
-	}
-
-	.indicator {
-		display: none;
-	}
-}
-
-.cover > .container {
-	height: 200px;
-	position: relative;
-	pointer-events: none;
-	.save {
-		pointer-events: all;
-	}
-	.controls {
-		pointer-events: none;
-		> * {
-			pointer-events: all;
-		}
-	}
-}
-
-@include media-breakpoint-up(md) {
-	.cover,  .cover > .container {
-		height: 300px;
-
-		.controls {
-			height: 300px;
-			line-height: 300px;
-		}
-	}
-}

package/templates/groups/details.tpl

@@ -1,92 +0,0 @@
-<div component="groups/container" class="groups details flex-fill">
-	<div class="cover position-absolute start-0 top-0" component="groups/cover" style="background-image: url({escape(group.cover:url)}?{config.cache-buster}); background-position: {group.cover:position};">
-		<div class="container">
-			{{{ if group.isOwner }}}
-			<div class="controls text-center">
-				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
-				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
-				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
-			</div>
-			<a href="#" class="save btn btn-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></a>
-			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-			{{{ end }}}
-		</div>
-	</div>
-
-	<div class="d-flex flex-column flex-md-row justify-content-md-between pb-4 mb-4 mt-2 border-bottom gap-3">
-		<div class="d-flex flex-column mt-1 gap-2">
-			<div class="d-flex flex-column flex-md-row align-items-md-center gap-2">
-				<h3 class="mb-0 text-capitalize">{generateGroupDisplayName(group)}</h3>
-				<div>
-					{{{ if group.private }}}<span class="badge text-bg-light border border-1">[[groups:details.private]]</span>{{{ end }}}
-					{{{ if group.hidden }}}<span class="badge text-bg-light border border-1">[[groups:details.hidden]]</span>{{{ end }}}
-				</div>
-			</div>
-			<div>
-				{{group.descriptionParsed}}
-			</div>
-		</div>
-		<div class="d-flex gap-2 align-items-start">
-			{{{ if loggedIn }}}
-			{{membershipBtn(group)}}
-			{{{ end }}}
-			{{{ if isAdmin }}}
-			<a href="{config.relative_path}/admin/manage/groups/{group.slug}" target="_blank" class="btn btn-light text-nowrap"><i class="fa fa-gear"></i> [[user:edit]]</a>
-			{{{ end }}}
-		</div>
-	</div>
-
-	<div class="d-flex flex-column flex-md-row">
-		<div data-widget-area="left">
-			{{{each widgets.left}}}
-			{{widgets.left.html}}
-			{{{end}}}
-		</div>
-		<!-- IMPORT partials/groups/sidebar-left.tpl -->
-
-		<div class="flex-grow-1 ps-md-2 ps-lg-5" style="min-width:0;">
-			<div class="tab-content">
-				<div class="tab-pane fade show active" id="groups-posts" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
-					{{{ if !posts.length }}}
-					<div class="alert alert-info my-2">[[groups:details.has-no-posts]]</div>
-					{{{ end }}}
-					<!-- IMPORT partials/posts_list.tpl -->
-				</div>
-				<div class="tab-pane fade" id="groups-members" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.members]]</h3>
-
-					<!-- IMPORT partials/groups/memberlist.tpl -->
-				</div>
-				{{{ if group.isOwner }}}
-				<div class="tab-pane fade" id="groups-pending" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.pending]]</h3>
-					<!-- IMPORT partials/groups/pending.tpl -->
-				</div>
-
-				<div class="tab-pane fade" id="groups-invited" role="tabpanel">
-					<h3 class="fw-semibold fs-5 mb-3">[[groups:details.invited]]</h3>
-					<!-- IMPORT partials/groups/invited.tpl -->
-				</div>
-
-				<div class="tab-pane fade" id="groups-admin" role="tabpanel">
-					<div class="d-flex align-items-center gap-1 justify-content-between mb-3 flex-wrap">
-						<h3 class="fw-semibold fs-5">[[groups:details.owner-options]]</h3>
-						<div class="d-flex justify-content-end gap-2">
-							<button class="btn btn-link btn-sm text-danger border-danger" type="button" data-action="delete">[[groups:details.delete-group]]</button>
-							<button class="btn btn-primary btn-sm" type="button" data-action="update">[[global:save-changes]]</button>
-						</div>
-					</div>
-					<!-- IMPORT partials/groups/admin.tpl -->
-				</div>
-				{{{ end }}}
-			</div>
-		</div>
-
-		<div data-widget-area="right">
-			{{{each widgets.right}}}
-			{{widgets.right.html}}
-			{{{end}}}
-		</div>
-	</div>
-</div>

package/templates/groups/list.tpl

@@ -1,58 +0,0 @@
-<div data-widget-area="header">
-	{{{each widgets.header}}}
-	{{widgets.header.html}}
-	{{{end}}}
-</div>
-<div class="groups list flex-fill">
-	<h3 class="fw-semibold">[[pages:groups]]</h3>
-	<div class="d-flex flex-wrap justify-content-between">
-		<div class="mb-2 mb-md-0">
-			<div class="text-sm d-flex flex-wrap align-items-center gap-2">
-				[[topic:sort-by]]
-				<div class="d-flex flex-wrap gap-2">
-					<a href="?sort=alpha" class="btn btn-ghost btn-sm ff-secondary fw-semibold text-nowrap {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
-					<a href="?sort=count" class="btn btn-ghost btn-sm ff-secondary fw-semibold text-nowrap {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
-					<a href="?sort=date" class="btn btn-ghost btn-sm ff-secondary fw-semibold text-nowrap {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
-				</div>
-			</div>
-		</div>
-		<div>
-			<div class="d-flex justify-content-end gap-2">
-				<div>
-					{{{ if allowGroupCreation }}}
-					<button class="btn btn-primary btn-sm text-nowrap" data-action="new"><i class="fa fa-users"></i> [[groups:new-group]]</button>
-					{{{ end }}}
-					<select class="form-select hidden" id="search-sort">
-						<option value="alpha">[[groups:details.group-name]]</option>
-						<option value="count">[[groups:details.member-count]]</option>
-						<option value="date">[[groups:details.creation-date]]</option>
-					</select>
-				</div>
-				<div>
-					<div class="input-group">
-						<input type="text" class="form-control form-control-sm" placeholder="[[global:search]]" name="query" id="search-text">
-						<button id="search-button" class="btn btn-primary btn-sm" aria-label="[[global:search]]">
-							<i class="fa fa-search"></i>
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<hr />
-
-	<div component="groups/container" class="row" id="groups-list">
-		{{{ if groups.length }}}
-		<!-- IMPORT partials/groups/list.tpl -->
-		{{{ else }}}
-		<div class="col-12">
-			<div class="alert alert-warning">
-			[[groups:no-groups-found]]
-			</div>
-		</div>
-		{{{ end }}}
-	</div>
-
-	<!-- IMPORT partials/paginator.tpl -->
-</div>

package/templates/groups/members.tpl

@@ -1,10 +0,0 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
-<div class="users flex-fill">
-	<div id="users-container" class="users-container row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4">
-		{{{ each users }}}
-		<!-- IMPORT partials/users/item.tpl -->
-		{{{ end }}}
-	</div>
-
-	<!-- IMPORT partials/paginator.tpl -->
-</div>

package/templates/partials/groups/admin.tpl

@@ -1,90 +0,0 @@
-<div class="options mb-5">
-	<form component="groups/settings" role="form">
-		<div class="row">
-			<div class="col-12 col-lg-6">
-				<div class="mb-3">
-					<label class="form-label" for="name">[[groups:details.group-name]]</label>
-					<input {{{ if group.system }}}readonly{{{ end }}} class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="description">[[groups:details.description]]</label>
-					<textarea class="form-control" name="description" id="description" type="text" maxlength="255" rows="5">{group.description}</textarea>
-				</div>
-
-				<div class="form-check mb-3">
-					<label class="form-check-label" for="private">[[groups:details.private]]</label>
-					<input class="form-check-input" name="private" id="private" type="checkbox"{{{ if group.private }}} checked{{{ end }}}>
-					{{{ if !allowPrivateGroups }}}
-					<p class="form-text">
-						[[groups:details.private-system-help]]
-					</p>
-					{{{ end }}}
-					<p class="form-text text-xs m-0">
-						[[groups:details.private-help]]
-					</p>
-				</div>
-				<div class="form-check mb-3">
-					<label class="form-check-label" for="hidden">[[groups:details.hidden]]</label>
-					<input class="form-check-input" name="hidden" id="hidden" type="checkbox"{{{ if group.hidden }}} checked{{{ end }}}>
-					<p class="form-text text-xs m-0">
-						[[groups:details.hidden-help]]
-					</p>
-				</div>
-
-				<div class="form-check mb-3">
-					<label class="form-check-label" for="disableJoinRequests">[[groups:details.disableJoinRequests]]</label>
-					<input class="form-check-input" name="disableJoinRequests" id="disableJoinRequests" type="checkbox"{{{ if group.disableJoinRequests }}} checked{{{ end }}}>
-				</div>
-				<div class="form-check mb-3">
-					<label class="form-check-label" for="disableLeave">[[groups:details.disableLeave]]</label>
-					<input class="form-check-input" name="disableLeave" id="disableLeave" type="checkbox"{{{if group.disableLeave}}} checked{{{end}}}>
-				</div>
-
-				<div class="mb-3">
-					<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
-					<div class="d-flex gap-1">
-						<div class="member-post-cids-selector">
-							<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
-						</div>
-						<input id="memberPostCids" type="text" class="form-control form-control-sm" value="{group.memberPostCids}">
-					</div>
-				</div>
-			</div>
-			<div class="col-12 col-lg-6">
-				<div class="d-flex gap-2 align-items-center mb-3">
-					<div class="form-check">
-						<label class="form-check-label" for="userTitleEnabled">[[groups:details.userTitleEnabled]]</label>
-						<input class="form-check-input" name="userTitleEnabled" id="userTitleEnabled" type="checkbox"{{{ if group.userTitleEnabled }}} checked{{{ end }}}>
-					</div>
-					<span class="badge rounded-1 text-uppercase text-truncate rounded-1 d-flex align-items-center gap-1 {{{ if !group.userTitleEnabled }}} hide{{{ end }}}" style="max-width:150px; color: {group.textColor}; background-color: {group.labelColor}"><i class="fa {{{ if (group.icon && (group.icon != "fa-nbb-none")) }}}{group.icon}{{{ else }}}hidden{{{ end }}}"></i><span class="badge-text">{{{ if group.userTitle }}}{group.userTitle}{{{ end }}}</span></span>
-				</div>
-
-
-				<div class="mb-3">
-					<label class="form-label" for="userTitle">[[groups:details.badge-text]]</label>
-					<div class="d-flex gap-1">
-						<input component="groups/userTitleOption" class="form-control" name="userTitle" id="userTitle" type="text" maxlength="40" value="{group.userTitleEscaped}"{{{ if !group.userTitleEnabled }}} disabled{{{ end }}} />
-						<button component="groups/userTitleOption" type="button" class="btn btn-outline-secondary text-nowrap" data-action="icon-select"{{{ if !group.userTitleEnabled }}} disabled{{{ end }}}>[[groups:details.change-icon]]</button>
-						<input type="hidden" name="icon" value="{{{ if group.icon }}}{group.icon}{{{ end }}}" />
-						<div id="icons" class="hidden">
-							<div class="icon-container">
-								<div class="row nbb-fa-icons">
-									<!-- IMPORT partials/fontawesome.tpl -->
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="mb-3 d-flex align-items-center justify-content-between gap-5">
-					<label class="form-label mb-0 text-nowrap" for="labelColor" class="badge-color-label">[[groups:details.change-label-colour]]</label>
-					<input class="form-control p-1" component="groups/userTitleOption" type="color" name="labelColor" id="labelColor" value="{{{ if group.labelColor }}}{group.labelColor}{{{ end }}}" style="width: 128px;" />
-				</div>
-				<div class="d-flex align-items-center justify-content-between gap-5">
-					<label class="form-label mb-0 text-nowrap" for="textColor" class="badge-color-label">[[groups:details.change-text-colour]]</label>
-					<input class="form-control p-1" component="groups/userTitleOption" type="color" name="textColor" id="textColor" value="{{{ if group.textColor }}}{group.textColor}{{{ end }}}" style="width: 128px;"/>
-				</div>
-			</div>
-		</div>
-
-	</form>
-</div>

package/templates/partials/groups/badge.tpl

@@ -1 +0,0 @@
-<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none d-flex align-items-center gap-1" style="max-width: 150px; line-height: normal; color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if (./icon && (./icon != "fa-nbb-none")) }}}{./icon}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>

package/templates/partials/groups/invited.tpl

@@ -1,33 +0,0 @@
-<label class="text-xs text-muted">[[groups:invited.search]]</label>
-<div class="input-group mb-2">
-	<input class="form-control" type="text" component="groups/members/invite"/>
-	<span class="input-group-text search-button"><i class="fa fa-search"></i></span>
-</div>
-
-<div class="mb-2">
-	<label class="text-xs text-muted">[[groups:bulk-invite-instructions]]</label>
-	<textarea class="form-control" component="groups/members/bulk-invite"></textarea>
-</div>
-
-<div class="mb-2 clearfix">
-	<button type="button" class="btn btn-primary btn-sm float-end" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
-</div>
-
-<div style="max-height: 500px; overflow: auto;">
-	<div component="groups/invited/alert" class="alert alert-info {{{ if group.invited.length }}}hidden{{{ end }}}">[[groups:invited.none]]</div>
-	<table component="groups/invited" class="table table-hover">
-		<tbody>
-			{{{ each group.invited }}}
-			<tr data-uid="{group.invited.uid}" class="align-middle">
-				<td class="member-name p-2 d-flex align-items-center justify-content-between">
-					<div class="d-flex align-items-center gap-2">
-						<a class="text-decoration-none" href="{config.relative_path}/user/{group.invited.userslug}">{{buildAvatar(group.invited, "24px", true)}}</a>
-						<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>
-					</div>
-					<button class="btn btn-outline-secondary btn-sm text-nowrap" data-action="rescindInvite">[[groups:invited.uninvite]]</button>
-				</td>
-			</tr>
-			{{{ end }}}
-		</tbody>
-	</table>
-</div>

package/templates/partials/groups/list.tpl

@@ -1,17 +0,0 @@
-{{{ each groups }}}
-<div class="col-xl-4 col-lg-6 col-sm-12 mb-3" component="groups/summary" data-slug="{./slug}">
-	<div class="card h-100 group-hover-bg border p-1">
-		<a href="{config.relative_path}/groups/{./slug}" class="card-header border-0 rounded-1 pointer d-block list-cover" style="{{{ if ./cover:thumb:url }}}background-image: url({./cover:thumb:url});background-size: cover; min-height: 125px; background-position: {./cover:position}{{{ end }}}" aria-label="[[aria:group-page-link-for, {txEscape(./displayName)}]]"></a>
-		<a href="{config.relative_path}/groups/{./slug}" class="d-block h-100 text-reset text-decoration-none">
-			<div class="card-body d-flex flex-column gap-2  h-100 pb-2">
-				<div class="d-flex">
-					<div class="flex-grow-1 fs-6 fw-semibold text-capitalize">{generateGroupDisplayName(@value)}</div>
-					<div class="align-self-start flex-shrink-0 badge border border-gray-300 fw-normal text-body"><i class="text-secondary fa-solid fa-users"></i> {formattedNumber(./memberCount)}</div>
-				</div>
-				<div class="text-sm line-clamp-3">{./description}</div>
-				<span class="timeago text-xs text-secondary mt-auto" title="{./createtimeISO}"></span>
-			</div>
-		</a>
-	</div>
-</div>
-{{{ end }}}

package/templates/partials/groups/memberlist.tpl

@@ -1,47 +0,0 @@
-<div class="d-flex {{{ if group.isOwner }}}justify-content-between{{{ else }}}justify-content-end{{{ end }}} mb-3">
-	{{{ if isAdmin }}}
-	<div class="flex-shrink-0">
-		<button component="groups/members/add" type="button" class="btn btn-primary btn-sm me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i> [[groups:details.add-member]]</button>
-	</div>
-	{{{ end }}}
-	<div>
-		<div class="input-group">
-			<input class="form-control form-control-sm" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
-			<button class="btn btn-primary btn-sm search-button" type="button">
-				<i class="fa fa-search"></i>
-			</button>
-		</div>
-	</div>
-</div>
-
-<div component="groups/members" data-nextstart="{group.membersNextStart}" class="mb-5" style="max-height: 500px; overflow: auto;">
-	<table class="table table-hover">
-		<tbody>
-			{{{each group.members}}}
-			<tr class="w-100" data-uid="{group.members.uid}" data-isowner="{{{ if group.members.isOwner }}}1{{{ else }}}0{{{ end }}}">
-				<td class="member-name p-2 w-100 ">
-					<div class="d-flex align-items-center justify-content-between">
-						<div class="d-flex align-items-center gap-2">
-							<a class="text-decoration-none" href="{config.relative_path}/user/{group.members.userslug}">{{buildAvatar(group.members, "24px", true)}}</a>
-							<a class="align-text-top" href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a>
-							<i component="groups/owner/icon" title="[[groups:owner]]" class="user-owner-icon fa fa-star align-text-top text-warning {{{ if !group.members.isOwner }}}invisible{{{ end }}}"></i>
-						</div>
-
-						{{{ if group.isOwner }}}
-						<div class="owner-controls d-flex gap-1">
-							<a class="btn btn-light btn-sm" href="#" data-action="toggleOwnership" title="[[groups:details.grant]]">
-								<i class="fa fa-star text-warning"></i>
-							</a>
-
-							<a class="btn btn-light btn-sm" href="#" data-action="kick" title="[[groups:details.kick]]">
-								<i class="fa fa-ban text-danger"></i>
-							</a>
-						</div>
-						{{{ end }}}
-					</div>
-				</td>
-			</tr>
-			{{{end}}}
-		</tbody>
-	</table>
-</div>

package/templates/partials/groups/pending.tpl

@@ -1,29 +0,0 @@
-{{{ if group.pending.length }}}
-<div class="d-flex justify-content-end gap-2 mb-3">
-	<button class="btn btn-danger btn-sm" data-action="rejectAll">[[groups:pending.reject-all]]</button>
-	<button class="btn btn-success btn-sm" data-action="acceptAll">[[groups:pending.accept-all]]</button>
-
-</div>
-{{{ end }}}
-
-<div style="max-height: 500px;overflow: auto;">
-	<div component="groups/pending/alert" class="alert alert-info {{{ if group.pending.length }}}hidden{{{ end }}}">[[groups:pending.none]]</div>
-	<table component="groups/pending" class="table table-hover">
-		<tbody>
-			{{{ each group.pending }}}
-			<tr data-uid="{group.pending.uid}" class="align-middle">
-				<td class="member-name p-2 d-flex align-items-center justify-content-between">
-					<div class="d-flex gap-2">
-						<a class="text-decoration-none" href="{config.relative_path}/user/{group.pending.userslug}">{{buildAvatar(group.pending, "24px", true)}}</a>
-						<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
-					</div>
-					<div class="d-flex gap-2">
-						<button class="btn btn-danger btn-sm" data-action="reject">[[groups:pending.reject]]</a></li>
-						<button class="btn btn-success btn-sm" data-action="accept">[[groups:pending.accept]]</a></li>
-					</div>
-				</td>
-			</tr>
-			{{{ end }}}
-		</tbody>
-	</table>
-</div>

package/templates/partials/groups/sidebar-left.tpl

@@ -1,27 +0,0 @@
-<div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
-	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
-		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn btn-ghost btn-sm text-start d-flex align-items-baseline ff-secondary fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
-			<div class="flex-grow-1">[[global:posts]]</div>
-		</button>
-		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn btn-ghost btn-sm text-start d-flex align-items-baseline ff-secondary fw-semibold gap-2">
-			<div class="flex-grow-1">[[groups:members]]</div>
-			<span component="group/member/count" class="flex-shrink-0 text-xs lh-1" title="{formattedNumber(group.memberCount)}">{humanReadableNumber(group.memberCount)}</span>
-		</button>
-
-		{{{ if group.isOwner }}}
-		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn btn-ghost btn-sm text-start d-flex align-items-baseline ff-secondary fw-semibold gap-2">
-			<div class="flex-grow-1">[[groups:details.pending]]</div>
-			<span component="group/pending/count" class="flex-shrink-0 text-xs lh-1" title="{formattedNumber(group.pending.length)}">{humanReadableNumber(group.pending.length)}</span>
-		</button>
-
-		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn btn-ghost btn-sm text-start d-flex align-items-baseline ff-secondary fw-semibold gap-2">
-			<div class="flex-grow-1">[[groups:details.invited]]</div>
-			<span component="group/invited/count" class="flex-shrink-0 text-xs lh-1" title="{formattedNumber(group.invited.length)}">{humanReadableNumber(group.invited.length)}</span>
-		</button>
-
-		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn btn-ghost btn-sm text-start d-flex align-items-baseline ff-secondary fw-semibold">
-			<div class="flex-grow-1">[[global:header.admin]]</div>
-		</button>
-		{{{ end }}}
-	</div>
-</div>

package/templates/partials/toast.tpl

@@ -1,19 +0,0 @@
-<div id="{alert_id}" role="alert" class="alert alert-dismissible alert-{type} fade show" component="toaster/toast">
-	<div class="alert-progress position-absolute top-0 start-0 bottom-0 h-100 z-0" style=" opacity:0.1;"></div>
-	<div class="d-flex flex-wrap gap-2 position-relative">
-		{{{ if image }}}
-		<img src="{image}" height="80" style="width: auto;" />
-		{{{ end }}}
-		<div class="d-flex flex-column gap-2">
-			{{{ if title }}}
-			<strong>{tx(title)}</strong>
-			{{{ end }}}
-
-			{{{ if message }}}
-			<p class="m-0">{tx(message)}</p>
-			{{{ end }}}
-		</div>
-	</div>
-
-	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
-</div>