<%
  var _id   = locals.id   || 'textarea-' + Math.random().toString(36).substr(2, 9);
  var _rows = locals.rows || 4;
  var _dis  = !!locals.disabled;
  var _req  = !!locals.required;
  var _val  = (locals.value !== undefined && locals.value !== null) ? String(locals.value) : '';

  var _hintId  = (locals.hint  && !locals.error) ? (_id + '-hint')  : '';
  var _errorId = locals.error ? (_id + '-error') : '';
  var _describedBy = [_hintId, _errorId].filter(function (x) { return !!x; }).join(' ');

  var baseClass = 'block w-full rounded-md border px-3 py-2 text-sm transition-colors resize-y '
    + 'text-text-primary placeholder:text-text-disabled '
    + 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:border-border-focus '
    + 'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-sunken ';
  baseClass += locals.error
    ? 'border-error ring-1 ring-error bg-error-subtle'
    : 'border-border bg-surface-base';
%>

  
    <%= locals.label || '' %><% if (_req) { %>*(required)<% } %>
  
  placeholder="<%= locals.placeholder %>"<% } %>
    <% if (locals.name) { %>name="<%= locals.name %>"<% } %>
    <% if (_dis) { %>disabled<% } %>
    <% if (_req) { %>required<% } %>
    aria-invalid="<%= locals.error ? 'true' : 'false' %>"
    <% if (_describedBy) { %>aria-describedby="<%= _describedBy %>"<% } %>
    data-testid="textarea-<%= _id %>"
  ><%= _val %>
  <% if (_hintId) { %>
<%= locals.hint %>
<% } %>
  <% if (_errorId) { %>
<%= locals.error %>
<% } %>