{% from "tungsten/forms/macros.html" import wrapper, mirror %}
{% call wrapper(field, v) %}
{% if v.disabled %}
<div class="tw-prose rounded-lg bg-gray-50 px-3 py-2 ring-1 ring-gray-950/10 dark:bg-transparent dark:ring-white/10">{{ v.safe_html or '—' }}</div>
{{ mirror(v) }}
{% else %}
<div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 focus-within:ring-2 focus-within:ring-primary-500 dark:bg-white/5 {{ 'ring-danger-600' if v.errors else 'ring-gray-950/10 dark:ring-white/20' }}"
     {% if v.maxlength %}x-data="{ length: {{ v.length }} }" @trix-change="length = $event.target.editor.getDocument().toString().replace(/\n/g, '').length"{% endif %}>
  <input type="hidden" id="{{ v.id }}" name="{{ v.path }}" value="{{ v.safe_html }}" {{ v.live }}>
  <trix-toolbar id="{{ v.id }}-toolbar" class="border-b border-gray-200 px-2 pt-2 dark:border-white/10"></trix-toolbar>
  <trix-editor input="{{ v.id }}" toolbar="{{ v.id }}-toolbar" class="tw-trix tw-prose"
               {% if v.placeholder %}placeholder="{{ v.placeholder }}"{% endif %}
               {% if field._live %}data-tw-live="{{ v.id }}"{% if v.live_delay %} data-tw-live-delay="{{ v.live_delay }}"{% endif %}{% if v.live_on_blur %} data-tw-live-blur{% endif %}{% endif %}></trix-editor>
  {% if v.maxlength %}
  <p class="border-t border-gray-200 px-3 py-1 text-xs dark:border-white/10" data-tw-length
     :class="length > {{ v.maxlength }} ? 'text-danger-600 dark:text-danger-400' : 'text-gray-500 dark:text-gray-400'"><span x-text="length">{{ v.length }}</span> / {{ v.maxlength }}</p>
  {% endif %}
</div>
{% endif %}
{% endcall %}