<xf:macro name="widget">
<xf:if is="$xf.options.advally_feedback_enable AND $xf.visitor.user_id">
<xf:set var="$advFeedbackAllowed" value="{{ false }}" />
<xf:foreach loop="$xf.options.advally_feedback_allowed_user_groups ?: []" value="$_advFeedbackGid">
	<xf:if is="$xf.visitor.isMemberOf($_advFeedbackGid)"><xf:set var="$advFeedbackAllowed" value="{{ true }}" /></xf:if>
</xf:foreach>
<xf:if is="$advFeedbackAllowed">
<xf:css>
/* === Bug bubble (bottom-right, collapses to edge tab) === */
#advally-bug-expanded { position:fixed; bottom:80px; right:20px; z-index:99999; display:flex; align-items:center; gap:4px; transition:opacity .2s, transform .2s; }
#advally-bug-expanded.is-hidden { opacity:0; pointer-events:none; transform:translateX(20px); }
#advally-bug-bubble { width:50px; height:50px; border-radius:50%; background:#1466b8; color:#fff; border:none; box-shadow:0 4px 12px rgba(0,0,0,.3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s, box-shadow .2s, background .2s; }
#advally-bug-bubble:hover { transform:scale(1.1); box-shadow:0 6px 16px rgba(0,0,0,.4); background:#0f4c8c; }
#advally-bug-bubble:active { transform:scale(.95); }
#advally-bug-bubble svg { width:24px; height:24px; }
#advally-bug-collapse-btn { width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s, background .2s; padding:0; font-size:14px; line-height:1; }
#advally-bug-expanded:hover #advally-bug-collapse-btn { opacity:1; }
#advally-bug-collapse-btn:hover { background:rgba(0,0,0,.7); }
#advally-bug-tab { position:fixed; bottom:100px; right:0; z-index:99999; width:32px; height:48px; border-radius:8px 0 0 8px; background:#1466b8; color:#fff; border:none; box-shadow:-2px 2px 8px rgba(0,0,0,.2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity .2s, transform .2s, width .2s; }
#advally-bug-tab.is-hidden { opacity:0; pointer-events:none; transform:translateX(100%); }
#advally-bug-tab:hover { width:40px; background:#0f4c8c; }
#advally-bug-tab svg { width:18px; height:18px; }

/* === Modal === */
#advally-bug-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99998; display:none; align-items:center; justify-content:center; }
#advally-bug-modal.is-open { display:flex; }
#advally-bug-modal .advally-bug-card { background:#fff; color:#222; padding:24px; border-radius:8px; max-width:680px; width:92%; max-height:92vh; overflow-y:auto; font-family:inherit; }
#advally-bug-modal h3 { margin:0 0 16px; font-size:18px; display:flex; align-items:center; gap:8px; color:#222; }
#advally-bug-modal h3 svg { color:#dc3545; flex:none; width:22px; height:22px; }
#advally-bug-modal label { display:block; font-weight:600; margin-top:14px; font-size:13px; color:#333; }
#advally-bug-modal label .req { color:#dc3545; }
#advally-bug-modal input[type=text], #advally-bug-modal textarea, #advally-bug-modal select { width:100%; padding:8px; border:1px solid #ced4da; border-radius:4px; font-size:14px; box-sizing:border-box; font-family:inherit; background:#fff; color:#212529; }
#advally-bug-modal input[type=text]::placeholder, #advally-bug-modal textarea::placeholder { color:#6c757d; }
#advally-bug-modal input[type=text]:focus, #advally-bug-modal textarea:focus, #advally-bug-modal select:focus { outline:none; border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25); }
#advally-bug-modal input[readonly] { background:#e9ecef; color:#495057; }
#advally-bug-modal textarea { min-height:60px; resize:vertical; }
#advally-bug-modal .advally-bug-context-row { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
#advally-bug-modal .advally-bug-context-row label { font-size:11px; color:#666; margin-top:0; text-transform:uppercase; letter-spacing:.05em; }
#advally-bug-modal .advally-bug-context-row input { font-size:12px; padding:5px 8px; }
#advally-bug-modal hr { border:0; border-top:1px solid #eee; margin:14px 0; }
#advally-bug-modal .advally-bug-input-group { display:flex; gap:0; }
#advally-bug-modal .advally-bug-input-group input { flex:1; border-top-right-radius:0; border-bottom-right-radius:0; }
#advally-bug-modal .advally-bug-input-group button { padding:8px 14px; border:1px solid #1466b8; background:#1466b8; color:#fff; border-radius:0 4px 4px 0; cursor:pointer; font-weight:600; font-size:13px; white-space:nowrap; display:flex; align-items:center; gap:6px; }
#advally-bug-modal .advally-bug-input-group button:hover { background:#0f4c8c; }
#advally-bug-modal .advally-bug-input-group svg { width:14px; height:14px; }
#advally-bug-modal small.advally-bug-hint { display:block; margin-top:4px; font-size:12px; color:#666; }
#advally-bug-modal .advally-bug-actions { margin-top:18px; display:flex; gap:8px; justify-content:flex-end; }
#advally-bug-modal button.advally-bug-action { padding:8px 16px; border:none; border-radius:4px; font-weight:600; cursor:pointer; font-family:inherit; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
#advally-bug-modal button.advally-bug-submit { background:#1466b8; color:#fff; }
#advally-bug-modal button.advally-bug-submit[disabled] { opacity:.6; cursor:not-allowed; }
#advally-bug-modal button.advally-bug-cancel { background:#eee; color:#222; }
#advally-bug-modal .advally-bug-submit svg { width:14px; height:14px; }
#advally-bug-modal .advally-bug-message { margin-top:12px; font-size:14px; padding:8px 10px; border-radius:4px; }
#advally-bug-modal .advally-bug-message.is-error { color:#a00; background:#ffeaea; }
#advally-bug-modal .advally-bug-message.is-success { color:#2a6; background:#eaffea; }
#advally-bug-modal .advally-bug-message.is-info { color:#666; background:transparent; padding-left:0; }

/* === Identify mode (overlay + crosshair) === */
.advally-bug-identify-mode, .advally-bug-identify-mode * { cursor:crosshair !important; }
.advally-bug-highlight { outline:3px solid #e55353 !important; outline-offset:2px; background-color:rgba(229,83,83,.1) !important; }
#advally-bug-identify-overlay { position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:99997; pointer-events:none; }
#advally-bug-identify-overlay .advally-bug-identify-instruction { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1466b8; color:#fff; padding:14px 22px; border-radius:8px; text-align:center; pointer-events:auto; box-shadow:0 4px 20px rgba(0,0,0,.3); font-size:14px; font-family:inherit; }
#advally-bug-identify-overlay .advally-bug-identify-instruction button { margin-top:10px; padding:5px 14px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6); border-radius:4px; cursor:pointer; font-family:inherit; }
#advally-bug-identify-overlay .advally-bug-identify-instruction button:hover { background:rgba(255,255,255,.15); }
</xf:css>

<div id="advally-bug-expanded">
	<button type="button" id="advally-bug-collapse-btn" title="Minimize" aria-label="Minimize bug reporter">›</button>
	<button type="button" id="advally-bug-bubble" title="Report a Bug" aria-label="Report a bug"><svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M256 0c17.7 0 32 14.3 32 32V66.7c19.5 5.4 36.5 17 48.6 32.4l29.7-17.1c15.3-8.8 34.9-3.6 43.7 11.7s3.6 34.9-11.7 43.7L368.7 154c2.2 8.4 3.3 17.1 3.3 26v40h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H372v40c0 12.4-2.1 24.3-5.9 35.4l44.1 25.4c15.3 8.8 20.5 28.4 11.7 43.7s-28.4 20.5-43.7 11.7l-39.7-22.9C320.6 437.6 290.5 448 256 448s-64.6-10.4-86.5-28.6l-39.7 22.9c-15.3 8.8-34.9 3.6-43.7-11.7s-3.6-34.9 11.7-43.7l44.1-25.4C137.1 350.3 134 338.4 134 326v-40H72c-17.7 0-32-14.3-32-32s14.3-32 32-32h64v-40c0-8.9 1.1-17.6 3.3-26L99.7 137.4C84.4 128.6 79.2 109 88 93.7s28.4-20.5 43.7-11.7l29.7 17.1c12.1-15.4 29.1-27 48.6-32.4V32c0-17.7 14.3-32 32-32zM192 192v160c0 35.3 28.7 64 64 64s64-28.7 64-64V192c0-35.3-28.7-64-64-64s-64 28.7-64 64z"/></svg></button>
</div>
<button type="button" id="advally-bug-tab" class="is-hidden" title="Report a Bug" aria-label="Expand bug reporter"><svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M256 0c17.7 0 32 14.3 32 32V66.7c19.5 5.4 36.5 17 48.6 32.4l29.7-17.1c15.3-8.8 34.9-3.6 43.7 11.7s3.6 34.9-11.7 43.7L368.7 154c2.2 8.4 3.3 17.1 3.3 26v40h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H372v40c0 12.4-2.1 24.3-5.9 35.4l44.1 25.4c15.3 8.8 20.5 28.4 11.7 43.7s-28.4 20.5-43.7 11.7l-39.7-22.9C320.6 437.6 290.5 448 256 448s-64.6-10.4-86.5-28.6l-39.7 22.9c-15.3 8.8-34.9 3.6-43.7-11.7s-3.6-34.9 11.7-43.7l44.1-25.4C137.1 350.3 134 338.4 134 326v-40H72c-17.7 0-32-14.3-32-32s14.3-32 32-32h64v-40c0-8.9 1.1-17.6 3.3-26L99.7 137.4C84.4 128.6 79.2 109 88 93.7s28.4-20.5 43.7-11.7l29.7 17.1c12.1-15.4 29.1-27 48.6-32.4V32c0-17.7 14.3-32 32-32zM192 192v160c0 35.3 28.7 64 64 64s64-28.7 64-64V192c0-35.3-28.7-64-64-64s-64 28.7-64 64z"/></svg></button>

<div id="advally-bug-modal" role="dialog" aria-modal="true" aria-hidden="true">
	<div class="advally-bug-card">
		<h3><svg viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M256 0c17.7 0 32 14.3 32 32V66.7c19.5 5.4 36.5 17 48.6 32.4l29.7-17.1c15.3-8.8 34.9-3.6 43.7 11.7s3.6 34.9-11.7 43.7L368.7 154c2.2 8.4 3.3 17.1 3.3 26v40h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H372v40c0 12.4-2.1 24.3-5.9 35.4l44.1 25.4c15.3 8.8 20.5 28.4 11.7 43.7s-28.4 20.5-43.7 11.7l-39.7-22.9C320.6 437.6 290.5 448 256 448s-64.6-10.4-86.5-28.6l-39.7 22.9c-15.3 8.8-34.9 3.6-43.7-11.7s-3.6-34.9 11.7-43.7l44.1-25.4C137.1 350.3 134 338.4 134 326v-40H72c-17.7 0-32-14.3-32-32s14.3-32 32-32h64v-40c0-8.9 1.1-17.6 3.3-26L99.7 137.4C84.4 128.6 79.2 109 88 93.7s28.4-20.5 43.7-11.7l29.7 17.1c12.1-15.4 29.1-27 48.6-32.4V32c0-17.7 14.3-32 32-32zM192 192v160c0 35.3 28.7 64 64 64s64-28.7 64-64V192c0-35.3-28.7-64-64-64s-64 28.7-64 64z"/></svg> {{ phrase('advally_feedback_widget_modal_title') }}</h3>
		<xf:form action="{{ link('advally-feedback/submit') }}" id="advally-bug-form">
			<div class="advally-bug-context-row">
				<div>
					<label>{{ phrase('advally_bug_current_page') }}</label>
					<input type="text" id="advally-bug-url" readonly="readonly" />
				</div>
				<div>
					<label>{{ phrase('advally_bug_console_errors') }}</label>
					<input type="text" id="advally-bug-errors" readonly="readonly" />
				</div>
			</div>
			<hr />
			<label>{{ phrase('advally_bug_which_element') }} <span class="req">*</span></label>
			<div class="advally-bug-input-group">
				<input type="text" id="advally-bug-element" name="affected_element" placeholder="Click the button to select an element..." readonly="readonly" required="required" />
				<button type="button" id="advally-bug-identify-btn"><svg viewBox="0 0 512 512" fill="currentColor"><path d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22-9.9 22-22c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"/></svg> {{ phrase('advally_bug_click_to_identify') }}</button>
			</div>
			<small class="advally-bug-hint">{{ phrase('advally_bug_element_hint') }}</small>

			<label>{{ phrase('advally_bug_what_trying') }} <span class="req">*</span></label>
			<textarea name="what_trying_to_do" rows="2" required="required" minlength="10" placeholder="e.g., I was trying to save changes..."></textarea>

			<label>{{ phrase('advally_bug_what_wrong') }} <span class="req">*</span></label>
			<textarea name="what_went_wrong" rows="3" required="required" minlength="10" placeholder="e.g., The page showed an error..."></textarea>

			<label>{{ phrase('advally_feedback_widget_field_severity') }}</label>
			<select name="severity">
				<option value="low">{{ phrase('advally_feedback_severity_low') }}</option>
				<option value="medium">{{ phrase('advally_feedback_severity_medium') }}</option>
				<option value="high">{{ phrase('advally_feedback_severity_high') }}</option>
				<option value="critical">{{ phrase('advally_feedback_severity_critical') }}</option>
			</select>

			<input type="hidden" name="page_url" value="" />

			<div class="advally-bug-actions">
				<button type="button" class="advally-bug-action advally-bug-cancel">{{ phrase('advally_feedback_widget_cancel') }}</button>
				<button type="submit" class="advally-bug-action advally-bug-submit"><svg viewBox="0 0 512 512" fill="currentColor"><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg> {{ phrase('advally_bug_submit_report') }}</button>
			</div>
			<div class="advally-bug-message" hidden="hidden"></div>
		</xf:form>
	</div>
</div>

<xf:js>
(function(){
	var MAX_CAPTURED_ERRORS = 10, MAX_OUTER_HTML = 1500, MAX_SELECTOR_DEPTH = 8, MAX_ANCESTOR_PATH = 5, STORAGE_KEY = 'advallyBugReporterCollapsed';
	var capturedErrors = [], selectedLabel = null, selectedContext = null, isIdentifyMode = false;

	/* ----- console + window.error capture ----- */
	var origErr = console.error;
	console.error = function(){
		try {
			var msg = Array.prototype.slice.call(arguments).map(function(a){ try { return typeof a==='object' ? JSON.stringify(a) : String(a); } catch(_){ return String(a); } }).join(' ');
			capturedErrors.push({ type:'console.error', message: msg, timestamp: new Date().toISOString() });
			if (capturedErrors.length > MAX_CAPTURED_ERRORS) capturedErrors.shift();
		} catch(_){}
		return origErr.apply(console, arguments);
	};
	window.addEventListener('error', function(ev){
		capturedErrors.push({ type:'uncaught', message: ev.message, timestamp: new Date().toISOString() });
		if (capturedErrors.length > MAX_CAPTURED_ERRORS) capturedErrors.shift();
	});

	/* ----- element labelling + selector path ----- */
	function elLabel(el){
		if (!el) return 'unknown element';
		if (el.tagName === 'LABEL') return (el.textContent||'').trim().replace(/\*$/,'').trim();
		if (el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA') {
			if (el.id) { var lbl = document.querySelector('label[for="'+el.id+'"]'); if (lbl) return (lbl.textContent||'').trim().replace(/\*$/,'').trim() + ' field'; }
			return (el.placeholder || el.name || 'Input') + ' field';
		}
		if (el.tagName === 'BUTTON' || (el.tagName === 'A' && el.classList.contains('button'))) return ((el.textContent||'').trim() || el.title || 'Button') + ' button';
		if (el.tagName === 'TD') {
			var tbl = el.closest('table');
			if (tbl) { var th = tbl.querySelector('thead th:nth-child('+(el.cellIndex+1)+')'); if (th) return (th.textContent||'').trim() + ' column'; }
			return 'Table cell';
		}
		if (el.tagName === 'TH') return (el.textContent||'').trim() + ' column header';
		if (/^H[1-6]$/.test(el.tagName)) return (el.textContent||'').trim();
		if (el.classList.contains('p-nav-list-item') || el.classList.contains('menu-linkRow')) return (el.textContent||'').trim() + ' menu item';
		var t = (el.textContent||'').trim().substring(0,50);
		if (t && t.length > 2) return t + (t.length >= 50 ? '...' : '');
		return el.tagName.toLowerCase() + ' element';
	}
	function cssSelectorFor(el){
		if (!el || el.nodeType !== 1) return null;
		if (el === document.body) return 'body';
		var parts = [], cur = el;
		while (cur && cur !== document.body && parts.length < MAX_SELECTOR_DEPTH) {
			var p = cur.tagName.toLowerCase();
			if (cur.id) { parts.unshift('#' + cur.id); break; }
			if (cur.className && typeof cur.className === 'string') {
				var classes = cur.className.trim().split(/\s+/).filter(function(c){ return c && c.indexOf('advally-bug-') !== 0; }).slice(0,3).join('.');
				if (classes) p += '.' + classes;
			}
			var par = cur.parentElement;
			if (par) {
				var sib = Array.prototype.filter.call(par.children, function(c){ return c.tagName === cur.tagName; });
				if (sib.length > 1) p += ':nth-of-type(' + (sib.indexOf(cur)+1) + ')';
			}
			parts.unshift(p);
			cur = par;
		}
		return parts.join(' > ');
	}
	function truncateOuterHtml(el){
		try {
			var clone = el.cloneNode(true);
			(function strip(n){
				if (n.nodeType !== 1) return;
				if (n.classList && n.classList.length) {
					var rm = Array.prototype.filter.call(n.classList, function(c){ return c.indexOf('advally-bug-') === 0; });
					rm.forEach(function(c){ n.classList.remove(c); });
					if (n.classList.length === 0 && n.hasAttribute('class')) n.removeAttribute('class');
				}
				for (var i=0;i<n.children.length;i++) strip(n.children[i]);
			})(clone);
			var html = clone.outerHTML || '';
			if (html.length <= MAX_OUTER_HTML) return html;
			return html.substring(0, MAX_OUTER_HTML) + '\n... [truncated, ' + (html.length - MAX_OUTER_HTML) + ' more chars]';
		} catch(_) { return null; }
	}
	function ancestorPath(el){
		var seen = {}, path = [], cur = el;
		while (cur && cur !== document.body && path.length < MAX_ANCESTOR_PATH) {
			var lbl = (elLabel(cur) || '').replace(/\s+/g,' ').trim();
			if (lbl && !seen[lbl] && lbl !== 'div element' && lbl !== 'span element') { path.push(lbl); seen[lbl] = 1; }
			cur = cur.parentElement;
		}
		return path;
	}

	/* ----- identify mode ----- */
	function enterIdentify(){
		isIdentifyMode = true;
		document.body.classList.add('advally-bug-identify-mode');
		closeModal();
		var ov = document.createElement('div');
		ov.id = 'advally-bug-identify-overlay';
		ov.innerHTML = '<div class="advally-bug-identify-instruction">{{ phrase("advally_bug_identify_overlay") }}<br/><button type="button" id="advally-bug-cancel-identify">{{ phrase("advally_feedback_widget_cancel") }}</button></div>';
		document.body.appendChild(ov);
		document.getElementById('advally-bug-cancel-identify').addEventListener('click', function(){ exitIdentify(); });
	}
	function exitIdentify(label, ctx){
		isIdentifyMode = false;
		document.body.classList.remove('advally-bug-identify-mode');
		var ov = document.getElementById('advally-bug-identify-overlay');
		if (ov) ov.remove();
		document.querySelectorAll('.advally-bug-highlight').forEach(function(e){ e.classList.remove('advally-bug-highlight'); });
		if (label) { selectedLabel = label; selectedContext = ctx || null; }
		openModal();
	}
	function onIdentifyClick(e){
		if (!isIdentifyMode) return;
		if (e.target.closest('#advally-bug-identify-overlay')) return;
		e.preventDefault(); e.stopPropagation();
		var lbl = elLabel(e.target);
		var ctx = { selector: cssSelectorFor(e.target), outerHtml: truncateOuterHtml(e.target), path: ancestorPath(e.target) };
		exitIdentify(lbl, ctx);
	}
	function onIdentifyHover(e){
		if (!isIdentifyMode) return;
		if (e.target.closest('#advally-bug-identify-overlay')) return;
		document.querySelectorAll('.advally-bug-highlight').forEach(function(x){ x.classList.remove('advally-bug-highlight'); });
		e.target.classList.add('advally-bug-highlight');
	}

	/* ----- modal show/hide ----- */
	var modal = document.getElementById('advally-bug-modal');
	var form = document.getElementById('advally-bug-form');
	var msg = form ? form.querySelector('.advally-bug-message') : null;
	function openModal(){
		if (!modal) return;
		document.getElementById('advally-bug-url').value = window.location.href;
		document.getElementById('advally-bug-errors').value = capturedErrors.length ? (capturedErrors.length + ' error(s) captured') : '{{ phrase("advally_bug_no_errors") }}';
		document.getElementById('advally-bug-element').value = selectedLabel || '';
		form.querySelector('[name=page_url]').value = window.location.href;
		if (!selectedLabel) {
			form.querySelector('[name=what_trying_to_do]').value = '';
			form.querySelector('[name=what_went_wrong]').value = '';
			form.querySelector('[name=severity]').value = '{{ $xf.options.advally_feedback_default_severity }}' || 'medium';
		}
		if (msg) { msg.hidden = true; msg.className = 'advally-bug-message'; msg.textContent = ''; }
		modal.classList.add('is-open');
		modal.setAttribute('aria-hidden', 'false');
	}
	function closeModal(){
		if (!modal) return;
		modal.classList.remove('is-open');
		modal.setAttribute('aria-hidden', 'true');
	}

	/* ----- collapse / expand bubble ----- */
	var expanded = document.getElementById('advally-bug-expanded'), tab = document.getElementById('advally-bug-tab'), collapseBtn = document.getElementById('advally-bug-collapse-btn');
	function setCollapsed(c){
		if (c) { expanded.classList.add('is-hidden'); tab.classList.remove('is-hidden'); }
		else  { expanded.classList.remove('is-hidden'); tab.classList.add('is-hidden'); }
		try { localStorage.setItem(STORAGE_KEY, c ? '1' : '0'); } catch(_){}
	}
	try { if (localStorage.getItem(STORAGE_KEY) === '1') setCollapsed(true); } catch(_){}
	collapseBtn.addEventListener('click', function(e){ e.stopPropagation(); setCollapsed(true); });
	tab.addEventListener('click', function(){ setCollapsed(false); });

	/* ----- wire submit + identify + open ----- */
	document.getElementById('advally-bug-bubble').addEventListener('click', function(){ selectedLabel = null; selectedContext = null; openModal(); });
	document.getElementById('advally-bug-identify-btn').addEventListener('click', enterIdentify);
	form.querySelector('.advally-bug-cancel').addEventListener('click', closeModal);
	modal.addEventListener('click', function(e){ if (e.target === modal) closeModal(); });
	document.addEventListener('keydown', function(e){ if (e.key === 'Escape' && modal.classList.contains('is-open')) closeModal(); });
	document.addEventListener('click', onIdentifyClick, true);
	document.addEventListener('mouseover', onIdentifyHover, true);

	form.addEventListener('submit', function(e){
		e.preventDefault();
		var affected = (form.querySelector('[name=affected_element]').value || '').trim();
		var trying   = (form.querySelector('[name=what_trying_to_do]').value || '').trim();
		var wrong    = (form.querySelector('[name=what_went_wrong]').value || '').trim();
		var severity = form.querySelector('[name=severity]').value;
		if (!affected) { showMsg('error', '{{ phrase("advally_bug_error_select_element") }}'); return; }
		if (trying.length < 10) { showMsg('error', '{{ phrase("advally_bug_what_trying") }}: min 10 chars.'); return; }
		if (wrong.length   < 10) { showMsg('error', '{{ phrase("advally_bug_what_wrong") }}: min 10 chars.'); return; }

		/* Compose title (10-250) and description (20-5000) for the server contract from rich form fields. */
		var titleRaw = affected + ': ' + (wrong.split('\n')[0] || wrong).substring(0, 80);
		var title = titleRaw.length > 250 ? titleRaw.substring(0, 247) + '...' : titleRaw;
		if (title.length < 10) title = (title + ' — bug report').substring(0, 250);

		var descParts = [
			'**What I was trying to do:**', trying, '',
			'**What went wrong:**', wrong, '',
			'**Affected element:** ' + affected
		];
		if (selectedContext && selectedContext.selector) descParts.push('', '**Element selector:** `' + selectedContext.selector + '`');
		if (selectedContext && selectedContext.path && selectedContext.path.length) descParts.push('**Element ancestor path:** ' + selectedContext.path.join(' › '));
		if (selectedContext && selectedContext.outerHtml) descParts.push('', '**Element markup:**', '```html', selectedContext.outerHtml, '```');
		if (capturedErrors.length) {
			descParts.push('', '**Console errors (' + capturedErrors.length + '):**');
			capturedErrors.forEach(function(er){ descParts.push('- [' + er.type + '] ' + er.message); });
		}
		descParts.push('', '**Viewport:** ' + window.innerWidth + 'x' + window.innerHeight);
		var description = descParts.join('\n');
		if (description.length > 5000) description = description.substring(0, 4990) + '\n…';

		var fd = new FormData(form);
		fd.set('title', title);
		fd.set('description', description);
		fd.set('severity', severity);
		fd.set('page_url', window.location.href);
		fd.set('_xfResponseType', 'json');

		var btn = form.querySelector('.advally-bug-submit');
		btn.disabled = true;
		showMsg('info', 'Submitting…');
		fetch(form.action, { method:'POST', body: fd, credentials:'same-origin', headers: { 'X-Requested-With':'XMLHttpRequest', 'Accept':'application/json' } })
			.then(function(r){ return r.json().then(function(j){ return { ok:r.ok, body:j }; }); })
			.then(function(res){
				btn.disabled = false;
				if (res.ok && res.body && res.body.success) {
					showMsg('success', '{{ phrase("advally_feedback_widget_success") }}');
					capturedErrors = []; selectedLabel = null; selectedContext = null;
					form.querySelector('[name=affected_element]').value = '';
					form.querySelector('[name=what_trying_to_do]').value = '';
					form.querySelector('[name=what_went_wrong]').value = '';
				} else {
					showMsg('error', (res.body && res.body.error) || '{{ phrase("advally_feedback_widget_error_generic") }}');
				}
			})
			.catch(function(){ btn.disabled = false; showMsg('error', '{{ phrase("advally_feedback_widget_error_generic") }}'); });
	});

	function showMsg(kind, text){
		if (!msg) return;
		msg.hidden = false;
		msg.className = 'advally-bug-message is-' + kind;
		msg.textContent = text;
	}
})();
</xf:js>
</xf:if>
</xf:if>
</xf:macro>