component EmailInput {
  props {
    class = ""
    id = "email"
    name = "email"
    label = "Email"
    value = ""
    placeholder = "you@company.com"
    help = ""
    error = ""
    required = false
    disabled = false
    readonly = false
    autocomplete = "email"
  }
  view {
    <div class="wire-auth-field {class}">
      <label for="{id}" class="wire-label">{label}{#if required}<span class="wire-required"> *</span>{/if}</label>
      <div class="wire-auth-field__control">
        <span class="wire-auth-field__icon icon-[lucide--mail]" aria-hidden="true"></span>
        <input id="{id}" name="{name}" type="email" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{error ? 'true' : 'false'}" aria-describedby="{id}-help {id}-error" class="wire-input wire-auth-field__input" />
      </div>
      {#if help && !error}<p id="{id}-help" class="wire-field-message wire-field-message--help">{help}</p>{/if}
      {#if error}<p id="{id}-error" role="alert" class="wire-field-message wire-field-message--error">{error}</p>{/if}
    </div>
  }
}