<%
  var _id   = locals.id   || 'date-' + Math.random().toString(36).substr(2, 9);
  var _dis  = locals.disabled ? 'disabled' : '';
  var _req  = locals.required ? 'required' : '';

  var baseClass = "block w-full rounded-md border bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-sunken transition-colors px-3 py-2 text-sm";
  var stateClass = locals.error
    ? "border-error focus:border-error focus:ring-error/20"
    : "border-border focus:border-primary hover:border-text-tertiary";
%>

  <% if (locals.label) { %>
    
      <%= locals.label %><% if (locals.required) { %> *<% } %>
    
  <% } %>
  
    <%= _req %>
    <% if (locals.value) { %>value="<%= locals.value %>"<% } %>
    <% if (locals.min)   { %>min="<%= locals.min %>"<% } %>
    <% if (locals.max)   { %>max="<%= locals.max %>"<% } %>
    <% if (locals.name)  { %>name="<%= locals.name %>"<% } %>
    aria-invalid="<%= locals.error ? 'true' : 'false' %>"
  >
  <% if (locals.hint || locals.error) { %>
    

      <%= locals.error || locals.hint %>
    
  <% } %>