<%
  const actionMenuId = `client-actions-${itemId}`;
  const moreActionsLabel = rowLocale === 'ar' ? 'إجراءات إضافية' : 'More actions';
  const moreActionsText = rowLocale === 'ar' ? 'المزيد' : 'More';
  const accessMenuTitle = rowLocale === 'ar' ? 'إدارة الوصول' : 'Access controls';
  const accessMenuHint = rowLocale === 'ar'
    ? 'اختر حالة تشغيل الحساب'
    : 'Choose the account access state';
  const blockActionHint = rowLocale === 'ar'
    ? (isBlocked ? 'استعادة وصول المستخدم' : 'إيقاف الوصول إلى الحساب')
    : (isBlocked ? 'Restore user access' : 'Stop access to this account');
  const activationActionHint = rowLocale === 'ar'
    ? (isActive ? 'إيقاف الحساب مؤقتًا' : 'إتاحة الوصول إلى الحساب')
    : (isActive ? 'Pause this account temporarily' : 'Allow account access');
%>

<div class="kt-client-actions" data-client-action-group>
  <div class="kt-client-actions__primary">
    <a
      class="kt-people-action kt-client-action kt-client-action--labeled kt-client-action--view"
      data-client-action-kind="view"
      href="/dashboard/clients/show/<%= itemId %>"
      title="<%= rowCopy.view %>"
      aria-label="<%= rowCopy.view %>: <%= accessibleName %>"
    >
      <i class="ti ti-eye" aria-hidden="true"></i>
      <span><%= rowCopy.view %></span>
    </a>

    <a
      class="kt-people-action kt-client-action kt-client-action--labeled kt-client-action--edit"
      data-client-action-kind="edit"
      href="/dashboard/clients/edit/<%= itemId %>"
      title="<%= rowCopy.edit %>"
      aria-label="<%= rowCopy.edit %>: <%= accessibleName %>"
    >
      <i class="ti ti-pencil" aria-hidden="true"></i>
      <span><%= rowCopy.edit %></span>
    </a>
  </div>

  <div
    class="kt-client-menu kt-client-row-menu"
    data-people-menu
    data-people-menu-presentation="portal"
  >
    <button
      class="kt-people-action kt-client-action kt-client-action--labeled kt-client-action--more kt-client-row-menu__trigger"
      type="button"
      aria-label="<%= moreActionsLabel %>: <%= accessibleName %>"
      title="<%= moreActionsLabel %>"
      aria-haspopup="menu"
      aria-expanded="false"
      aria-controls="<%= actionMenuId %>"
      id="<%= actionMenuId %>-trigger"
      data-people-menu-trigger
      data-client-action-kind="more"
    >
      <i class="ti ti-dots" aria-hidden="true"></i>
      <span><%= moreActionsText %></span>
    </button>

    <div
      class="kt-client-menu__panel kt-client-row-menu__panel"
      id="<%= actionMenuId %>"
      role="menu"
      aria-label="<%= moreActionsLabel %>"
      data-people-menu-panel
      hidden
    >
      <div class="kt-client-menu__header">
        <strong><%= accessMenuTitle %></strong>
        <small><%= accessMenuHint %></small>
      </div>

      <button
        class="kt-client-menu__item kt-client-menu__item--access"
        type="button"
        role="menuitem"
        data-people-action="<%= isBlocked ? 'unblock' : 'block' %>"
        data-people-id="<%= itemId %>"
        data-people-url="/dashboard/clients/blockUnBlock?id=<%= itemId %>&status=<%= item.status %>"
        data-people-method="PATCH"
        data-people-title="<%= isBlocked ? rowCopy.unblockTitle : rowCopy.blockTitle %>"
        data-people-description="<%= isBlocked ? rowCopy.unblockDescription : rowCopy.blockDescription %>"
        data-people-confirm="<%= isBlocked ? rowCopy.unblockConfirm : rowCopy.blockConfirm %>"
      >
        <span class="kt-client-menu__icon" aria-hidden="true">
          <i class="ti <%= isBlocked ? 'ti-lock-open' : 'ti-user-x' %>"></i>
        </span>
        <span>
          <strong><%= isBlocked ? rowCopy.unblock : rowCopy.block %></strong>
          <small><%= blockActionHint %></small>
        </span>
      </button>

      <% if (!isBlocked) { %>
        <button
          class="kt-client-menu__item kt-client-menu__item--activation"
          type="button"
          role="menuitem"
          data-people-action="<%= isActive ? 'deactivate' : 'activate' %>"
          data-people-id="<%= itemId %>"
          data-people-url="/dashboard/clients/activateDeactivate?id=<%= itemId %>"
          data-people-method="PATCH"
          data-people-title="<%= isActive ? rowCopy.deactivateTitle : rowCopy.activateTitle %>"
          data-people-description="<%= isActive ? rowCopy.deactivateDescription : rowCopy.activateDescription %>"
          data-people-confirm="<%= isActive ? rowCopy.deactivateConfirm : rowCopy.activateConfirm %>"
        >
          <span class="kt-client-menu__icon" aria-hidden="true">
            <i class="ti <%= isActive ? 'ti-user-pause' : 'ti-user-check' %>"></i>
          </span>
          <span>
            <strong><%= isActive ? rowCopy.deactivate : rowCopy.activate %></strong>
            <small><%= activationActionHint %></small>
          </span>
        </button>
      <% } %>
    </div>
  </div>

  <span class="kt-client-actions__divider" aria-hidden="true"></span>

  <button
    class="kt-people-action kt-client-action kt-client-action--labeled kt-client-action--delete"
    data-client-action-kind="delete"
    type="button"
    data-people-action="delete"
    data-people-id="<%= itemId %>"
    data-people-url="/dashboard/clients/delete"
    data-people-title="<%= rowCopy.deleteTitle %>"
    data-people-description="<%= rowCopy.deleteDescription %>"
    data-people-confirm="<%= rowCopy.deleteConfirm %>"
    aria-label="<%= rowCopy.delete %>: <%= accessibleName %>"
    title="<%= rowCopy.delete %>"
  >
    <i class="ti ti-trash" aria-hidden="true"></i>
    <span><%= rowCopy.delete %></span>
  </button>
</div>
