{#- A JSON document in a code box: line numbers, colours, keys that indent,
    and a check as you type that says where the document stops being JSON.
    The text itself stays a plain textarea that the form sends as it is; a
    layer behind it draws the same text in colour. -#}
{% import "adminsite/_icons.html" as icons %}
{%- set lines = row.value.count("\n") + 1 -%}
<div class="flex min-w-0 flex-col gap-1.5" x-data="jsonEditor()">
  <div class="overflow-hidden rounded-field border border-line-strong bg-base-100 focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15"
       :class="problem && 'border-error! focus-within:ring-error/15'">
    <div class="flex items-center gap-1 border-b border-line bg-subtle py-1 ps-3 pe-1.5">
      <span class="text-xs font-medium text-muted">JSON</span>
      <span class="grow"></span>
      <button type="button" class="btn btn-ghost btn-xs text-link" x-show="ready" x-cloak @click="format()">
        {{ icons.icon("indent", 14) }}{{ _('Format') }}
      </button>
    </div>
    {#- Code reads left to right in any language. -#}
    <div dir="ltr" class="flex max-h-128 overflow-auto font-mono text-[13px] leading-5">
      <div aria-hidden="true" x-show="ready" x-cloak x-html="numbers"
           class="sticky start-0 z-10 min-w-11 shrink-0 select-none border-e border-line bg-subtle py-2.5 ps-3 pe-2.5 text-end text-muted"></div>
      <div class="relative grow">
        <div aria-hidden="true" x-html="colours" class="pointer-events-none absolute inset-x-0 top-0 px-3 py-2.5"></div>
        <textarea id="{{ row.input_id }}" name="{{ row.path }}" x-ref="area" rows="{{ [lines, 6]|max }}"
                  spellcheck="false" autocomplete="off" autocapitalize="off" wrap="off"
                  class="relative block min-w-full resize-none overflow-hidden whitespace-pre border-0 bg-transparent px-3 py-2.5 outline-none selection:bg-primary/20"
                  :class="ready && 'text-transparent caret-base-content'"
                  :style="ready && { width: width, height: height }"
                  @input="typed()" @keydown="key($event)"
                  @focus="focused = true" @blur="focused = false; escaped = false"
                  {% if row.required and row.browser_required %}required{% endif %} {{ field_attrs|default('') }}>{{ row.value }}</textarea>
      </div>
    </div>
  </div>
  <div class="flex min-h-5 items-center gap-2 text-[12.5px]" aria-live="polite" x-show="ready" x-cloak>
    <button type="button" class="inline-flex items-center gap-1.5 text-start text-error underline underline-offset-2"
            x-show="problem" @click="jump()">{{ icons.icon("alert", 14) }}<span x-text="problem && problem.text"></span></button>
    <span class="inline-flex items-center gap-1.5 text-success" x-show="!problem && !empty">{{ icons.icon("check", 14) }}<span x-text="summary"></span></span>
    <span class="text-muted" x-show="empty" x-text="summary"></span>
    <span class="ms-auto text-muted" x-show="focused">{{ _('Esc, then Tab, to leave the box') }}</span>
  </div>
</div>