<!-- Semmet Angular: Textarea — https://www.w3.org/WAI/tutorials/forms/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Message" [(value)]="message" [required]="true" />
-->
<div class="<%= dasherize(name) %>">
  <label [for]="controlId()">
    {{ label() }}
    @if (required()) {
      <span aria-hidden="true">*</span>
    }
  </label>

  <textarea
    [id]="controlId()"
    [value]="value()"
    [placeholder]="placeholder()"
    [rows]="rows()"
    [attr.maxlength]="maxLength()"
    [required]="required()"
    [disabled]="disabled()"
    [readOnly]="readOnly()"
    [attr.aria-required]="required() ? 'true' : null"
    [attr.aria-invalid]="error() ? 'true' : null"
    [attr.aria-describedby]="describedBy()"
    (input)="updateValue($event)"
  ></textarea>

  <div class="<%= dasherize(name) %>__meta">
    @if (hint()) {
      <p class="<%= dasherize(name) %>__hint" [id]="hintId()">{{ hint() }}</p>
    }

    @if (maxLength() !== null) {
      <p class="<%= dasherize(name) %>__counter" [id]="counterId()" aria-live="polite">
        {{ remainingCharacters() }} characters left
      </p>
    }
  </div>

  @if (error()) {
    <p class="<%= dasherize(name) %>__error" [id]="errorId()" role="alert">{{ error() }}</p>
  }
</div>
