{% if S_USER_LOGGED_IN and S_TOPICPINS_ENABLE %}
<script>
(function () {
	'use strict';

	var L_PINNED = '{{ lang('TOPICPINS_MSG_PINNED')|escape('js') }}';
	var L_UNPINNED = '{{ lang('TOPICPINS_MSG_UNPINNED')|escape('js') }}';
	var L_CONFIRM_UNPIN = '{{ lang('TOPICPINS_CONFIRM_UNPIN')|escape('js') }}';
	var L_TOPICPINS_PIN = '{{ lang('TOPICPINS_PIN')|escape('js') }}';
	var L_VIEW_LATEST_POST = '{{ lang('VIEW_LATEST_POST') }}';
	var L_POST_BY_AUTHOR = '{{ lang('POST_BY_AUTHOR') }}';
	var L_READ_PROFILE = '{{ lang('READ_PROFILE') }}';
	var L_TOPICPINS_NONE = '{{ lang('TOPICPINS_NONE') }}';

	// Delay (in ms) before the unpinned row disappears from the index
	var UNPIN_REMOVE_DELAY_MS = 1200;

	var currentConfirm = null;

	function flash(msg, type) {
		var box = document.getElementById('topicpins-flash');
		if (!box) {
			box = document.createElement('div');
			box.id = 'topicpins-flash';
			document.body.appendChild(box);
		}
		box.className = 'topicpins-flash ' + (type || 'info');
		box.textContent = msg;
		box.style.display = 'block';
		setTimeout(function () { box.style.display = 'none'; }, 2200);
	}

	function ajax(url) {
		// Ensure ajax=1
		if (!/[?&]ajax=1\b/.test(url)) {
			url += (url.indexOf('?') === -1 ? '?' : '&') + 'ajax=1';
		}
		return fetch(url, { credentials: 'same-origin' }).then(function (r) { return r.json(); });
	}

	function removeConfirm() {
		if (!currentConfirm) return;
		var el = currentConfirm.el;
		if (el && el.parentNode) el.parentNode.removeChild(el);
		document.removeEventListener('mousedown', currentConfirm.onOutside);
		document.removeEventListener('keydown', currentConfirm.onKey);
		window.removeEventListener('resize', currentConfirm.onReposition);
		window.removeEventListener('scroll', currentConfirm.onReposition, true);
		currentConfirm = null;
	}
	function positionConfirm(el, anchor) {
		var r = anchor.getBoundingClientRect();
		var w = el.offsetWidth;
		var top = r.bottom + window.scrollY + 6;
		var left = Math.min(
			Math.max(8, r.right + window.scrollX - w),
			window.scrollX + document.documentElement.clientWidth - w - 8
		);
		el.style.top = top + 'px';
		el.style.left = left + 'px';
	}
	function showConfirm(anchor, onConfirm) {
		removeConfirm();
		var msg = L_CONFIRM_UNPIN || 'Unpin this post?';
		var ok	= '{{ lang('TOPICPINS_UNPIN')|escape('js') }}' || 'Unpin';
		var no	= '{{ lang('CANCEL')|escape('js') }}' || 'Cancel';
		var el = document.createElement('div');
		el.className = 'topicpin-confirm';
		el.innerHTML =
			'<div class="text">' + msg + '</div>' +
			'<div class="actions">' +
				'<button type="button" class="btn btn--danger btn-unpin">' + ok + '</button>' +
				'<button type="button" class="btn btn--muted btn-cancel">' + no + '</button>' +
			'</div>';
		document.body.appendChild(el);
		positionConfirm(el, anchor);
		var onOutside = function (e) {
			if (el.contains(e.target) || anchor.contains(e.target)) return;
			removeConfirm();
		};
		var onKey = function (e) { if (e.key === 'Escape') removeConfirm(); };
		var onReposition = function () { positionConfirm(el, anchor); };
		el.querySelector('.btn-unpin').addEventListener('click', function () { removeConfirm(); onConfirm(); });
		el.querySelector('.btn-cancel').addEventListener('click', function () { removeConfirm(); });
		setTimeout(function () {
			document.addEventListener('mousedown', onOutside);
			document.addEventListener('keydown', onKey);
			window.addEventListener('resize', onReposition);
			window.addEventListener('scroll', onReposition, true);
		}, 0);
		currentConfirm = { el: el, onOutside: onOutside, onKey: onKey, onReposition: onReposition };
	}

	function removePinnedRowAfterDelay(anchor) {
		// Only remove from the index block (#topicpins)
		var container = document.getElementById('topicpins');
		if (!container) return;
		var list = container.querySelector('ul.topiclist.forums');
		var row = anchor.closest('li.row');
		if (!list || !row) return;

		// Wait the configured delay, then fade out and remove the row
		setTimeout(function () {
			row.classList.add('topicpins-removing');
			setTimeout(function () {
				if (row.parentNode) row.parentNode.removeChild(row);
			}, 300); // match CSS transition
		}, UNPIN_REMOVE_DELAY_MS);
	}

	function escapeHtml(s) {
		if (s === null || s === undefined) return '';
		return String(s).replace(/[&<>"']/g, function (m) { return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]; });
	}
	function escapeAttr(s) {
		return escapeHtml(s).replace(/"/g, '&quot;');
	}

	function createPinnedListItem(pin) {
		var subject = escapeHtml(pin.POST_SUBJECT || '');
		var topicTitle = escapeHtml(pin.TOPIC_TITLE || '');
		var postTimeAttr = pin.POST_TIME_RFC3339 || '';
		var postTimeDisp = pin.POST_TIME_DISP || '';
		var firstTimeAttr = pin.FIRST_POST_TIME_RFC3339 || '';
		var firstTimeDisp = pin.FIRST_POST_TIME_DISP || '';

		var avatarHtml = pin.AVATAR_HTML || '';
		var usernameFull = pin.USERNAME_FULL || '';
		var topicAuthorFull = pin.TOPIC_AUTHOR_FULL || '';
		var previewHtml = pin.PREVIEW_HTML || '';

		var uViewPost = pin.U_VIEW_POST || '#';
		var uViewFirst = pin.U_VIEW_FIRST_POST || '#';
		var uUnpin = pin.U_TOPICPIN_UNPIN || '';

		var html = ''
			+ '<dl class="row-item">'
			+ '<dt>'
			+ '	<div class="topicpins-avatar">';

		if (avatarHtml) {
			html += '	<span class="forum-image">' + avatarHtml + '</span>';
		} else {
			html += '	<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" class="mchat-avatar" alt="' + escapeAttr(L_READ_PROFILE) + '" />';
		}

		html += ''
			+ '	</div>'
			+ '	<div class="list-inner">'
			+ '	<a href="' + escapeAttr(uViewPost) + '" title="' + escapeAttr(subject) + '" class="lastsubject">' + subject + '</a>';

		if (uUnpin) {
			html += '	<a href="' + escapeAttr(uUnpin) + '" class="topicpins-btn topicpins-btn--inline is-pinned js-topicpins-unpin" title="{{ lang('TOPICPINS_UNPIN') }}">'
					+ '		<i class="icon fa-thumb-tack fa-fw fa-rotate-90" aria-hidden="true"></i><span class="sr-only">{{ lang('TOPICPINS_UNPIN') }}</span>'
					+ '	</a>';
		}

		html += '	<br />'
			+ '	<a href="' + escapeAttr(uViewPost) + '" title="' + escapeAttr(L_VIEW_LATEST_POST) + '">'
			+ '		<i class="icon fa-file fa-fw icon-lightgray icon-md" aria-hidden="true"></i><span class="sr-only">' + L_VIEW_LATEST_POST + '</span>'
			+ '	</a> '
			+ '	' + L_POST_BY_AUTHOR + ' ' + usernameFull + ' &raquo;';

		if (postTimeAttr && postTimeDisp) {
			html += ' <time datetime="' + escapeAttr(postTimeAttr) + '">' + escapeHtml(postTimeDisp) + '</time>';
		}

		if (previewHtml) {
			html += '	<div class="content">' + previewHtml + '</div>';
		}

		html += '	</div>'
			+ '</dt>'
			+ '<dd class="topics"></dd>'
			+ '<dd class="posts"></dd>'
			+ '<dd class="lastpost">'
			+ '	<span>'
			+ '	<a href="' + escapeAttr(uViewFirst) + '">' + topicTitle + '</a><br />'
			+ '	' + L_POST_BY_AUTHOR + ' ' + topicAuthorFull + ' &raquo;';

		if (firstTimeAttr && firstTimeDisp) {
			html += '	<time datetime="' + escapeAttr(firstTimeAttr) + '">' + escapeHtml(firstTimeDisp) + '</time>';
		}

		html += '	</span>'
			+ '</dd>'
			+ '</dl>';

		var li = document.createElement('li');
		li.className = 'row';
		li.setAttribute('data-post-id', pin.POST_ID || '');
		if (pin.TOPIC_ID) li.setAttribute('data-topic-id', pin.TOPIC_ID);
		if (pin.PINNED_AT) li.setAttribute('data-pinned-at', pin.PINNED_AT);

		li.innerHTML = html;
		return li;
	}

	function removePlaceholderIfPresent(list) {
		if (!list) return;
		var rows = list.querySelectorAll('li.row');
		if (rows.length === 1) {
			var first = rows[0];
			if (first && first.textContent && first.textContent.trim() === L_TOPICPINS_NONE) {
				first.parentNode.removeChild(first);
			}
		}
	}

	// Build the full block wrapper (for cases where no block existed yet).
	// IMPORTANT CHANGE: do NOT fall back to inserting into the header area when the server
	// did not render a placeholder or wrapper on this page. This prevents the client from
	// creating the header block on pages where the template intentionally omitted it.
	function buildTopicpinsBlock() {
		var forabg = document.createElement('div');
		forabg.className = 'forabg';
		forabg.id = 'topicpins';

		var inner = document.createElement('div');
		inner.className = 'inner';

		// Header UL (as in template)
		var headerUl = document.createElement('ul');
		headerUl.className = 'topiclist';

		var headerLi = document.createElement('li');
		headerLi.className = 'header';
		headerLi.innerHTML = '<dl class="row-item"><dt><div class="list-inner">{{ lang('TOPICPINS') }}</div></dt><dd class="topics"></dd><dd class="posts"></dd><dd class="lastpost"><span>{{ lang('TOPICPINS_TOPICS') }}</span></dd></dl>';

		headerUl.appendChild(headerLi);
		inner.appendChild(headerUl);

		// Data UL
		var dataUl = document.createElement('ul');
		dataUl.className = 'topiclist forums';
		inner.appendChild(dataUl);

		forabg.appendChild(inner);

		// Only insert into the DOM if the server left a placeholder or wrapper for us.
		var placeholder = document.getElementById('topicpins-placeholder');
		if (placeholder) {
			placeholder.parentNode.replaceChild(forabg, placeholder);
			return forabg;
		}

		var containerWrapper = document.getElementById('topicpins-container');
		if (containerWrapper) {
			// Remove any existing forabg inside wrapper first (safety)
			var existing = containerWrapper.querySelector('.forabg#topicpins');
			if (existing && existing.parentNode) {
				existing.parentNode.removeChild(existing);
			}
			// Append the new forabg inside the wrapper so CSS that targets .topicpins-container will still match
			containerWrapper.appendChild(forabg);
			return forabg;
		}

		// NO placeholder and NO wrapper: do not create the block on this page.
		return null;
	}

	function rebuildTopicpinsList(pins) {
		// If the block isn't present, only rebuild if the server rendered a placeholder/wrapper — otherwise skip.
		var container = document.getElementById('topicpins');
		if (!container) {
			var wrapper = document.getElementById('topicpins-container');
			var placeholder = document.getElementById('topicpins-placeholder');
			// If neither placeholder nor wrapper exists, don't create the block here.
			if (!wrapper && !placeholder) {
				return;
			}
			container = wrapper ? (wrapper.querySelector('.forabg#topicpins') || buildTopicpinsBlock()) : buildTopicpinsBlock();
		}

		if (!container) return;

		var list = container.querySelector('ul.topiclist.forums');
		if (!list) {
			list = document.createElement('ul');
			list.className = 'topiclist forums';
			container.querySelector('.inner').appendChild(list);
		}
		while (list.firstChild) { list.removeChild(list.firstChild); }

		if (pins && pins.length) {
			pins.forEach(function (p) {
				var li = createPinnedListItem(p);
				list.appendChild(li);
			});
		} else {
			var li = document.createElement('li');
			li.className = 'row';
			li.innerHTML = '<dl class="row-item"><dt><div class="list-inner">' + L_TOPICPINS_NONE + '</div></dt><dd>&nbsp;</dd><dd>&nbsp;</dd><dd class="lastpost"><span>&nbsp;</span></dd></dl>';
			list.appendChild(li);
		}
	}

	function getPostIdFromAnchor(a) {
		if (!a) return null;
		var row = a.closest('li.row');
		if (row) {
			var pid = row.getAttribute('data-post-id');
			if (pid) return pid;
		}
		var href = a.getAttribute('href') || '';
		var m;
		m = href.match(/(?:unpin_post|pin_post)[\/\?_&-]*?(\d+)/i);
		if (m && m[1]) return m[1];
		m = href.match(/post_id=(\d+)/i);
		if (m && m[1]) return m[1];
		m = href.match(/[?&]p=(\d+)/i);
		if (m && m[1]) return m[1];
		var parent = a.closest('[id^="p"]');
		if (parent && parent.id) {
			var idm = parent.id.match(/^p(\d+)$/);
			if (idm && idm[1]) return idm[1];
		}
		return null;
	}

	// Update anchors inside the post element: set class + href appropriately
	function updatePostAnchorsToUnpin(postId, unpinHref) {
		if (!postId) return;
		var postEl = document.getElementById('p' + postId) || document.querySelector('[data-post-id="' + postId + '"]');
		if (!postEl) return;
		var anchors = postEl.querySelectorAll('a.js-topicpins-pin, a.js-topicpins-unpin');
		anchors.forEach(function (anchor) {
			anchor.classList.remove('js-topicpins-pin');
			anchor.classList.add('js-topicpins-unpin', 'is-pinned');
			if (unpinHref) {
				anchor.href = unpinHref;
			} else {
				anchor.href = anchor.href.replace(/pin_post/i, 'unpin_post');
			}
			anchor.title = '{{ lang('TOPICPINS_UNPIN')|escape('js') }}';
			var i = anchor.querySelector('i.icon');
			if (i) { i.classList.add('fa-rotate-90'); }
		});
	}

	function updatePostAnchorsToPin(postId) {
		if (!postId) return;
		var postEl = document.getElementById('p' + postId) || document.querySelector('[data-post-id="' + postId + '"]');
		if (!postEl) return;
		var anchors = postEl.querySelectorAll('a.js-topicpins-unpin, a.js-topicpins-pin');
		anchors.forEach(function (anchor) {
			anchor.classList.remove('js-topicpins-unpin', 'is-pinned');
			anchor.classList.add('js-topicpins-pin');
			anchor.href = anchor.href.replace(/unpin_post/i, 'pin_post');
			anchor.title = L_TOPICPINS_PIN || '{{ lang('TOPICPINS_PIN')|escape('js') }}';
			var i = anchor.querySelector('i.icon');
			if (i) { i.classList.remove('fa-rotate-90'); }
		});
	}

	// Toggle viewtopic post controls when a pin/unpin happens elsewhere (header)
	function toggleViewtopicPinState(postId, toPinned, unpinHref) {
		if (!postId) return;
		if (toPinned) {
			updatePostAnchorsToUnpin(postId, unpinHref);
		} else {
			updatePostAnchorsToPin(postId);
		}
	}

	// Update header labels (plural-aware) from server-provided localized strings.
	function updateHeaderLabels(labels) {
		if (!labels) return;
		var container = document.getElementById('topicpins');
		// If inner .forabg is missing but wrapper exists, target the wrapper instead
		var wrapper = document.getElementById('topicpins-container');
		var target = container || (wrapper ? wrapper.querySelector('.forabg#topicpins') : null);

		// If still no target, try to find placeholder header elements
		if (!target) {
			// try to find any header list that matches our structure
			target = document.querySelector('#topicpins, #topicpins-container .forabg#topicpins');
		}
		if (!target) return;

		// header title node
		var titleNode = target.querySelector('.topiclist > .header .list-inner');
		if (titleNode && labels.L_TOPICPINS) {
			titleNode.textContent = labels.L_TOPICPINS;
		}

		// lastpost column header (span)
		var lastpostNode = target.querySelector('.topiclist > .header .lastpost span');
		if (lastpostNode && labels.L_TOPICPINS_TOPICS) {
			lastpostNode.textContent = labels.L_TOPICPINS_TOPICS;
		}
	}

	document.addEventListener('click', function (e) {
		var a = e.target.closest('a.js-topicpins-pin');
		if (a) {
			e.preventDefault();
			ajax(a.href).then(function (j) {
				if (j && j.status === 'OK') {
					flash(L_PINNED, 'success');

					var serverUnpin = j && j.pin && j.pin.U_TOPICPIN_UNPIN ? j.pin.U_TOPICPIN_UNPIN : null;
					if (serverUnpin) {
						a.href = serverUnpin;
					} else {
						a.href = a.href.replace(/pin_post/i, 'unpin_post');
					}
					a.classList.remove('js-topicpins-pin');
					a.classList.add('js-topicpins-unpin', 'is-pinned');
					a.title = '{{ lang('TOPICPINS_UNPIN')|escape('js') }}';
					var i = a.querySelector('i.icon');
					if (i) { i.classList.add('fa-rotate-90'); }

					var postId = getPostIdFromAnchor(a);
					toggleViewtopicPinState(postId, true, serverUnpin);

					try {
						// Only insert into header if the server rendered a placeholder or wrapper on this page.
						var container = document.getElementById('topicpins');
						if (!container) {
							// if neither placeholder nor wrapper exist, do NOT create the header block on this page
							if (!document.getElementById('topicpins-placeholder') && !document.getElementById('topicpins-container')) {
								// Update localized labels if provided (header may exist on other pages / future loads)
								if (j && j.labels) updateHeaderLabels(j.labels);
								return;
							}
						}

						// If we reach here, either container existed, or placeholder/wrapper exists and build is permitted.
						if (!container) {
							container = buildTopicpinsBlock();
						}
						if (container && j.pin) {
							var list = container.querySelector('ul.topiclist.forums');
							if (!list) {
								list = document.createElement('ul');
								list.className = 'topiclist forums';
								container.querySelector('.inner').appendChild(list);
							}

							removePlaceholderIfPresent(list);

							var newItem = createPinnedListItem(j.pin);
							var firstData = list.querySelector('li.row');
							if (firstData) {
								list.insertBefore(newItem, firstData);
							} else {
								list.appendChild(newItem);
							}
							// Ensure wrapper keeps its class if present
							var wrapper = document.getElementById('topicpins-container');
							if (wrapper) { wrapper.classList.remove('topicpins-empty'); }

							var max = parseInt(j.max_pins || 0, 10);
							if (max > 0) {
								var rows = list.querySelectorAll('li.row');
								while (rows.length > max) {
									var last = rows[rows.length - 1];
									if (last && last.parentNode) { last.parentNode.removeChild(last); }
									rows = list.querySelectorAll('li.row');
								}
							}
						}

						// Update header labels from server (so singular/plural updates without reload)
						if (j && j.labels) {
							updateHeaderLabels(j.labels);
						}
					} catch (ex) {
						console.error('topicpins: failed to insert new pin', ex);
					}
				} else {
					flash((j && j.error) ? j.error : 'Error', 'error');
				}
			}).catch(function () { flash('Error', 'error'); });
			return;
		}

		var b = e.target.closest('a.js-topicpins-unpin');
		if (b) {
			e.preventDefault();
			showConfirm(b, function () {
				ajax(b.href).then(function (j) {
					if (j && j.status === 'OK') {
						flash(L_UNPINNED, 'success');

						var postId = getPostIdFromAnchor(b);
						updatePostAnchorsToPin(postId);

						// Animate removal of the clicked row if it was inside the header.
						if (b.closest('#topicpins')) {
							removePinnedRowAfterDelay(b);
						}

						// If AJAX returned pins_total and pins array, use it to refresh the header.
						if (j && typeof j.pins_total !== 'undefined') {
							var total = parseInt(j.pins_total || 0, 10);
							var pins = Array.isArray(j.pins) ? j.pins : [];

							// If wrapper exists, keep it and rebuild inner list; only remove inner forabg when total==0
							var wrapper = document.getElementById('topicpins-container');
							if (wrapper) {
								if (total > 0) {
									setTimeout(function () {
										rebuildTopicpinsList(pins);
										// Update header labels from server after rebuild
										if (j.labels) updateHeaderLabels(j.labels);
									}, UNPIN_REMOVE_DELAY_MS + 350);
								} else {
									// Replace inner forabg with placeholder so wrapper remains (so CSS selectors still match)
									setTimeout(function () {
										var forabg = wrapper.querySelector('.forabg#topicpins');
										if (forabg && forabg.parentNode) {
											forabg.parentNode.removeChild(forabg);
										}
										// Ensure placeholder exists for future re-insert
										if (!wrapper.querySelector('#topicpins-placeholder')) {
											var ph = document.createElement('div');
											ph.id = 'topicpins-placeholder';
											wrapper.appendChild(ph);
										}
										// Update header labels to zero state (if provided)
										if (j.labels) updateHeaderLabels(j.labels);
									}, UNPIN_REMOVE_DELAY_MS + 350);
								}
							} else {
								// No wrapper: fall back to removing/adding the whole block only if the block was present
								var container = document.getElementById('topicpins');
								if (container) {
									if (total > 0) {
										setTimeout(function () {
											rebuildTopicpinsList(pins);
											if (j.labels) updateHeaderLabels(j.labels);
										}, UNPIN_REMOVE_DELAY_MS + 350);
									} else {
										setTimeout(function () {
											if (container.parentNode) container.parentNode.removeChild(container);
											// No header to update when removed, wrapper absent.
										}, UNPIN_REMOVE_DELAY_MS + 350);
									}
								}
							}
						} else {
							// Fallback behavior: if no server info, and click was in header, remove row and possibly the block
							var container = document.getElementById('topicpins');
							if (b.closest('#topicpins') && container) {
								setTimeout(function () {
									var list = container.querySelector('ul.topiclist.forums');
									if (list && list.querySelectorAll('li.row').length === 0) {
										// If wrapper exists, remove only inner forabg and leave wrapper with placeholder
										var wrapper = document.getElementById('topicpins-container');
										if (wrapper) {
											var forabg = wrapper.querySelector('.forabg#topicpins');
											if (forabg && forabg.parentNode) { forabg.parentNode.removeChild(forabg); }
											if (!wrapper.querySelector('#topicpins-placeholder')) {
												var ph = document.createElement('div');
												ph.id = 'topicpins-placeholder';
												wrapper.appendChild(ph);
											}
										} else {
											if (container.parentNode) container.parentNode.removeChild(container);
										}
									}
								}, UNPIN_REMOVE_DELAY_MS + 350);
							}
						}
					} else {
						flash((j && j.error) ? j.error : 'Error', 'error');
					}
				}).catch(function () { flash('Error', 'error'); });
			});
		}
	});
})();
</script>
{% endif %}