<%
  const rowLocale = typeof clientsLocale === 'string'
    ? clientsLocale
    : (typeof lang === 'string' && lang.toLowerCase().startsWith('en') ? 'en' : 'ar');
  const rowCopy = rowLocale === 'ar'
    ? {
        active: 'نشط',
        inactive: 'غير نشط',
        blocked: 'محظور',
        clientType: 'عميل',
        accessAllowed: 'الوصول متاح',
        accessStopped: 'الوصول موقوف',
        activated: 'الحساب مفعّل',
        awaitingActivation: 'بانتظار التفعيل',
        accountState: 'حالة الحساب',
        outOfFive: 'من 5',
        memberSince: 'عضو منذ',
        view: 'عرض',
        edit: 'تعديل',
        block: 'حظر',
        unblock: 'فك الحظر',
        activate: 'تفعيل',
        deactivate: 'تعطيل',
        delete: 'حذف',
        blockTitle: 'حظر المستخدم؟',
        blockDescription: 'سيتم منع هذا المستخدم من استخدام حسابه حتى يتم فك الحظر.',
        blockConfirm: 'تأكيد الحظر',
        unblockTitle: 'فك حظر المستخدم؟',
        unblockDescription: 'سيتمكن المستخدم من الوصول إلى حسابه وفق حالة التفعيل الحالية.',
        unblockConfirm: 'فك الحظر',
        activateTitle: 'تفعيل حساب المستخدم؟',
        activateDescription: 'سيصبح حساب المستخدم مفعّلًا ويمكنه متابعة استخدام المنصة.',
        activateConfirm: 'تفعيل الحساب',
        deactivateTitle: 'تعطيل حساب المستخدم؟',
        deactivateDescription: 'سيتم تعطيل حساب المستخدم دون حذفه من السجل.',
        deactivateConfirm: 'تعطيل الحساب',
        deleteTitle: 'حذف المستخدم؟',
        deleteDescription: 'سيتم حذف هذا المستخدم من السجل. لا يمكن التراجع عن هذه العملية.',
        deleteConfirm: 'حذف'
      }
    : {
        active: 'Active',
        inactive: 'Inactive',
        blocked: 'Blocked',
        clientType: 'Customer',
        accessAllowed: 'Access allowed',
        accessStopped: 'Access suspended',
        activated: 'Account activated',
        awaitingActivation: 'Awaiting activation',
        accountState: 'Account state',
        outOfFive: 'out of 5',
        memberSince: 'Member since',
        view: 'View',
        edit: 'Edit',
        block: 'Block',
        unblock: 'Unblock',
        activate: 'Activate',
        deactivate: 'Deactivate',
        delete: 'Delete',
        blockTitle: 'Block user?',
        blockDescription: 'This user will lose account access until unblocked.',
        blockConfirm: 'Confirm block',
        unblockTitle: 'Unblock user?',
        unblockDescription: 'The user will regain access according to the current activation state.',
        unblockConfirm: 'Unblock',
        activateTitle: 'Activate user account?',
        activateDescription: 'The account will become active and the user can continue using the platform.',
        activateConfirm: 'Activate account',
        deactivateTitle: 'Deactivate user account?',
        deactivateDescription: 'The account will be deactivated without removing it from the register.',
        deactivateConfirm: 'Deactivate account',
        deleteTitle: 'Delete user?',
        deleteDescription: 'This user will be removed from the register. This cannot be undone.',
        deleteConfirm: 'Delete'
      };
  const labels = typeof clientTableCopy === 'object' ? clientTableCopy : {};
%>

<% (Array.isArray(clients) ? clients : []).forEach((item) => { %>
  <%
    const itemId = item && item.id ? String(item.id) : '';
    const isBlocked = item && item.status === 'block';
    const isActive = Boolean(item && item.active);
    const cardState = isBlocked ? 'is-blocked' : (isActive ? 'is-active' : 'is-inactive');
    const accessibleName = item && item.name ? item.name : (rowLocale === 'ar' ? 'مستخدم' : 'User');
    const rawAvatar = item && typeof item.avatar === 'string' ? item.avatar.trim() : '';
    const hasUnsafeAvatarSegment = /(?:^|\/)(?:undefined|null)(?:[?#]|$)/i.test(rawAvatar);
    const avatarUrl = !hasUnsafeAvatarSegment && /^(?:https?:\/\/|\/(?!\/))/i.test(rawAvatar)
      ? rawAvatar
      : '';
    const avatarInitial = accessibleName
      .trim()
      .split(/\s+/)
      .slice(0, 2)
      .map((part) => Array.from(part)[0] || '')
      .join('') || (rowLocale === 'ar' ? 'م' : 'U');
    const rating = Number(item && item.rating);
    const joinedDate = item && item.createdAt
      ? moment(item.createdAt).locale(rowLocale).format('YYYY/MM/DD')
      : '—';
  %>
  <article
    class="kt-client-card <%= cardState %>"
    role="listitem"
    aria-selected="false"
    data-people-row
    data-client-resource-row
    data-client-card
    data-client-crm-card
    data-clients-table-row
    data-clients-table-contract="clients-customer-crm-v2"
    data-people-id="<%= itemId %>"
  >
    <span class="kt-client-card__state-rail" aria-hidden="true"></span>

    <label class="kt-client-card__select" aria-label="<%= accessibleName %>">
      <input
        class="kt-people-checkbox"
        type="checkbox"
        value="<%= itemId %>"
        data-people-row-checkbox
      >
      <span><i class="ti ti-check" aria-hidden="true"></i></span>
    </label>

    <div
      class="kt-client-crm"
      data-client-zone="composition"
      data-client-row-architecture="crm-resource-card-v2"
    >
      <section class="kt-client-crm__identity" data-client-zone="identity">
        <a
          class="kt-client-card__media"
          href="/dashboard/clients/show/<%= itemId %>"
          aria-label="<%= rowCopy.view %>: <%= accessibleName %>"
        >
          <span
            class="kt-people-avatar kt-client-avatar <%= isBlocked ? 'kt-people-avatar--blocked' : '' %>"
            data-client-avatar
          >
            <% if (avatarUrl) { %>
              <img
                src="<%= avatarUrl %>"
                alt=""
                loading="lazy"
                decoding="async"
                data-people-image
              >
            <% } %>
            <span
              class="kt-people-avatar__fallback"
              data-people-avatar-fallback
              data-client-avatar-fallback
              aria-hidden="true"
              <%= avatarUrl ? 'hidden' : '' %>
            ><%= avatarInitial %></span>
          </span>
          <span class="kt-client-card__media-status <%= isBlocked ? 'is-blocked' : (isActive ? 'is-active' : '') %>" aria-hidden="true"></span>
        </a>

        <div class="kt-client-crm__profile">
          <span class="kt-client-card__eyebrow">
            <i class="ti ti-user-circle" aria-hidden="true"></i>
            <%= rowCopy.clientType %>
          </span>
          <h3 class="kt-client-crm__name">
            <a href="/dashboard/clients/show/<%= itemId %>"><%= accessibleName %></a>
          </h3>
          <div class="kt-client-crm__chips">
            <span class="kt-client-card__badge <%= isBlocked ? 'is-blocked' : 'is-accessible' %>">
              <span aria-hidden="true"></span>
              <%= isBlocked ? rowCopy.accessStopped : rowCopy.accessAllowed %>
            </span>
            <span class="kt-client-card__badge <%= isActive ? 'is-activated' : 'is-pending' %>">
              <i class="ti <%= isActive ? 'ti-shield-check' : 'ti-clock-hour-4' %>" aria-hidden="true"></i>
              <%= isActive ? rowCopy.activated : rowCopy.awaitingActivation %>
            </span>
          </div>
        </div>
      </section>

      <section class="kt-client-crm__contact" data-client-zone="contact">
        <span class="kt-client-crm__section-label">
          <i class="ti ti-address-book" aria-hidden="true"></i>
          <%= labels.contact || '' %>
        </span>
        <span class="kt-client-crm__contact-line">
          <span class="kt-client-crm__icon" aria-hidden="true">
            <i class="ti ti-phone"></i>
          </span>
          <strong dir="ltr"><%= item.fullPhone || `${item.countryCode || ''}${item.phone || ''}` || '—' %></strong>
        </span>
        <span class="kt-client-crm__contact-line">
          <span class="kt-client-crm__icon" aria-hidden="true">
            <i class="ti ti-mail"></i>
          </span>
          <span dir="ltr"><%= item.email || '—' %></span>
        </span>
      </section>

      <section class="kt-client-crm__signals" data-client-zone="status-engagement">
        <div class="kt-client-crm__signal" data-client-zone="access">
          <span class="kt-client-crm__icon" aria-hidden="true">
            <i class="ti ti-shield-lock"></i>
          </span>
          <span>
            <small><%= rowCopy.accountState %></small>
            <strong><%= isBlocked ? rowCopy.blocked : (isActive ? rowCopy.active : rowCopy.inactive) %></strong>
          </span>
        </div>

        <a
          class="kt-client-crm__signal kt-client-crm__signal--rating"
          href="/dashboard/clients/ratings/<%= itemId %>"
          data-client-zone="engagement"
        >
          <span class="kt-client-crm__icon" aria-hidden="true">
            <i class="ti ti-star-filled"></i>
          </span>
          <span>
            <small><%= labels.engagement || '' %></small>
            <strong>
              <%= Number.isFinite(rating) ? rating.toFixed(1) : '0.0' %>
              <em><%= rowCopy.outOfFive %></em>
            </strong>
          </span>
        </a>

        <div class="kt-client-crm__signal kt-client-crm__signal--joined" data-client-zone="date">
          <span class="kt-client-crm__icon" aria-hidden="true">
            <i class="ti ti-calendar-plus"></i>
          </span>
          <span>
            <small><%= rowCopy.memberSince %></small>
            <time datetime="<%= item && item.createdAt ? item.createdAt : '' %>"><%= joinedDate %></time>
          </span>
        </div>
      </section>

      <footer class="kt-client-crm__actions" data-client-zone="commands">
        <span class="kt-client-crm__section-label">
          <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
          <%= labels.actions || '' %>
        </span>
        <%- include('./partials/userActions.ejs', {
          item,
          itemId,
          accessibleName,
          isBlocked,
          isActive,
          rowCopy,
          rowLocale
        }) %>
      </footer>
    </div>
  </article>
<% }) %>