{#
  One editable fragment. Also the swap target for "Use default", which is why
  the whole card carries the id rather than just the textarea.
#}
{% set field_id = "frag-" ~ fragment.key | replace(".", "-") %}
<section class="card" id="{{ field_id }}">
  <div class="card__header">
    <h2 class="card__title">
      {{ fragment.label }}
      {% if overridden %}<span class="badge badge--leaf">edited</span>{% endif %}
      {% for family in fragment.families %}<span class="badge">{{ family }}</span>{% endfor %}
      {% if fragment.when_tools %}<span class="badge">with tools</span>{% endif %}
    </h2>
    <button class="btn btn--sm" type="button"
            hx-post="/admin/prompts/default"
            hx-vals='{"key": "{{ fragment.key }}"}'
            hx-target="#{{ field_id }}" hx-swap="outerHTML"
            hx-confirm="Put the built-in wording back in this box? Your edit is lost, but nothing is saved until you press Save settings.">
      Use default
    </button>
  </div>

  {% if fragment.hint %}<p class="card__lede">{{ fragment.hint }}</p>{% endif %}

  <div class="field">
    <label class="field__label visually-hidden" for="{{ field_id }}-text">
      {{ fragment.label }}
    </label>
    <textarea class="textarea" id="{{ field_id }}-text" name="prompt.{{ fragment.key }}"
              rows="4" spellcheck="true">{{ value }}</textarea>
    <p class="field__hint">
      <code>{{ fragment.key }}</code>
      {% for name in fragment.variables %}
      <code>&lbrace;&lbrace;{{ name }}&rbrace;&rbrace;</code>
      {% endfor %}
      {% if fragment.requires %}
      — only appears when
      {% for name in fragment.requires %}
      <code>&lbrace;&lbrace;{{ name }}&rbrace;&rbrace;</code>{% if not loop.last %} and {% endif %}
      {% endfor %}
      has something in it.
      {% endif %}
      Leave the box empty to leave this out of the prompt entirely.
    </p>
  </div>
</section>