const showNotice = ({ title, message, retryLabel = scanMessages.retry }) => {
            if (typeof document === 'undefined') {
                return;
            }

            dismissNotice();

            notice = document.createElement('aside');
            notice.className = 'scan-location-notice';
            notice.setAttribute('role', 'alert');
            notice.innerHTML = `
                <strong class="scan-location-notice__title">${title}</strong>
                <p class="scan-location-notice__copy">${message}</p>
                <div class="scan-location-notice__actions">
                    <button type="button" class="scan-location-notice__button" data-scan-location-retry>${retryLabel}</button>
                    <button type="button" class="scan-location-notice__button scan-location-notice__button--secondary" data-scan-location-dismiss>${scanMessages.dismiss}</button>
                </div>
            `;

            notice.querySelector('[data-scan-location-retry]')?.addEventListener('click', () => {
                triedHighAccuracy = false;
                requestLocationWithFallback();
            });

            notice.querySelector('[data-scan-location-dismiss]')?.addEventListener('click', () => {
                dismissNotice();
            });

            document.body.appendChild(notice);
        };

        const showPermissionNotice = () => {
            showNotice({
                title: scanMessages.permissionTitle,
                message: scanMessages.permissionMessage,
            });
        };

        const showUnavailableNotice = () => {
            showNotice({
                title: scanMessages.unavailableTitle,
                message: scanMessages.unavailableMessage,
            });
        };

        const showTimeoutNotice = () => {
            showNotice({
                title: scanMessages.timeoutTitle,
                message: scanMessages.timeoutMessage,
            });
        };