<%
  // ─── Avatar Partial ──────────────────────────────────────────────────────
  // Usage: include('partials/avatar', { name, size })
  // Options: name (required), size (px, default 32), avatarUrl (optional URL)
  const _name = (typeof name !== 'undefined' && name) ? String(name).trim() : '?';
  const _size = typeof size !== 'undefined' ? size : 32;
  const _avatarUrl = typeof avatarUrl !== 'undefined' ? avatarUrl : null;

  // استخراج الحروف الأولى (حرفين كحد أقصى)
  const parts = _name.split(/\s+/).filter(Boolean);
  let initials = '?';
  if (parts.length >= 2) {
    initials = parts[0].charAt(0) + parts[parts.length - 1].charAt(0);
  } else if (parts.length === 1) {
    initials = parts[0].substring(0, 2);
  }

  // توليد لون متسق من hash الاسم
  const COLORS = [
    '#4f6bed', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899',
    '#06b6d4', '#84cc16', '#f97316', '#6366f1', '#14b8a6', '#a855f7',
  ];
  let hash = 0;
  for (let i = 0; i < _name.length; i++) {
    hash = ((hash << 5) - hash) + _name.charCodeAt(i);
    hash |= 0;
  }
  const _bg = COLORS[Math.abs(hash) % COLORS.length];

  // حجم الخط نسبي للحجم الكلي
  const _fontSize = Math.max(11, Math.floor(_size * 0.40));
%>
<% if (_avatarUrl) { %>
  <img src="<%= _avatarUrl %>"
       alt="<%= _name %>"
       title="<%= _name %>"
       style="width:<%= _size %>px;height:<%= _size %>px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;flex-shrink:0;"
       loading="lazy">
<% } else { %>
  <span title="<%= _name %>"
        style="width:<%= _size %>px;height:<%= _size %>px;border-radius:50%;background:<%= _bg %>;color:white;display:inline-flex;align-items:center;justify-content:center;font-size:<%= _fontSize %>px;font-weight:700;letter-spacing:0.5px;flex-shrink:0;vertical-align:middle;text-transform:uppercase;font-family:'Inter',sans-serif;">
    <%= initials %>
  </span>
<% } %>
