{{-- Client-side avatar renderer (matches x-messenger.avatar / MessengerAvatar payload) --}}
<script>
window.msgrRenderAvatar = function(user, options) {
    options = options || {};
    var size = options.size || 'md';
    var showStatus = !!options.showStatus;
    var online = !!(user && user.is_online);
    var name = (user && user.name) ? String(user.name) : 'User';
    var hasImage = !!(user && user.has_image && user.image_url);
    var imageUrl = hasImage ? String(user.image_url) : '';
    var initials = (user && user.initials) ? String(user.initials) : (name.charAt(0) || '?').toUpperCase();
    var esc = window.pmsEscapeHtml;
    var imgHtml = hasImage
        ? '<img src="' + esc(imageUrl) + '" alt="' + esc(name) + '" class="pms-user-avatar__img" loading="lazy" decoding="async" onerror="this.classList.add(\'d-none\'); this.nextElementSibling.classList.remove(\'d-none\');">'
        : '';
    var placeholderClass = hasImage ? 'pms-user-avatar__placeholder d-none' : 'pms-user-avatar__placeholder';
    var statusHtml = showStatus
        ? '<span class="pms-user-avatar__status' + (online ? ' is-online' : '') + '" aria-label="' + (online ? 'Online' : 'Offline') + '"></span>'
        : '';
    return '<span class="pms-user-avatar pms-user-avatar--' + esc(size) + '">' +
        '<span class="pms-user-avatar__inner">' + imgHtml +
        '<span class="' + placeholderClass + '" aria-hidden="true" title="' + esc(name) + '">' +
        '<i class="fas fa-user"></i><span class="pms-user-avatar__initials">' + esc(initials) + '</span></span></span>' +
        statusHtml + '</span>';
};
window.msgrApplyAvatarToHead = function(user) {
    var wrap = document.getElementById('msgrHeadAvatarWrap');
    if (!wrap) return;
    wrap.innerHTML = window.msgrRenderAvatar(user || {}, { size: 'lg', showStatus: true });
};
</script>