{% set id = widget.attrs.id %}{% if widget.validate_url %}<div class="validated-textarea"{% if id %} id="{{ id }}_vtextarea"{% endif %} x-data="{ hasErrors: {{ 'true' if widget.aria_invalid else 'false' }} }">
  <div x-ref="backdrop" id="{{ id }}_highlights" class="validated-textarea-highlights" aria-hidden="true">{% if widget.value %}{{ widget.value }}{% endif %}</div>
  <textarea x-ref="textarea" name="{{ widget.name }}"{% if id %} id="{{ id }}"{% endif %}{% for name, value in widget.attrs.items() %}{% if value is not false and name != "id" and name != "aria-invalid" %} {{ name }}{% if value is not true %}="{{ value|string }}"{% endif %}{% endif %}{% endfor %} :aria-invalid="hasErrors ? 'true' : 'false'" @scroll="$refs.backdrop.scrollTop = $el.scrollTop" hx-post="{{ widget.validate_url }}" hx-trigger="input changed delay:500ms" hx-target="#{{ id }}_highlights" hx-swap="innerHTML" hx-params="none" hx-on::config:request="event.detail.ctx.request.body.set('text', this.value); event.detail.ctx.request.body.set('field_name', '{{ widget.name }}'); event.detail.ctx.request.body.set('errors_id', '{{ id }}_errors')" hx-on::after:swap="Alpine.$data(this.closest('[x-data]')).hasErrors = !!document.getElementById('{{ id }}_errors').querySelector('p')">{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
  <div class="tooltip tooltip-error tooltip-bottom tooltip-open validated-textarea-tooltip"{% if id %} id="{{ id }}_vttooltip"{% endif %}>
    <div class="validated-textarea-spacer"></div>
    <div class="tooltip-content formwork-errors"{% if id %} id="{{ id }}_errors"{% endif %} role="alert"></div>
  </div>
</div>{% else %}<textarea name="{{ widget.name }}"{% if id %} id="{{ id }}"{% endif %}{% for name, value in widget.attrs.items() %}{% if value is not false and name != "id" %} {{ name }}{% if value is not true %}="{{ value|string }}"{% endif %}{% endif %}{% endfor %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>{% endif %}