{% macro render_field(construct, field, type, view, data=None, ds=None, errors=None) %}
  {% if type.secret and data %}
    <div class="fcu-form-group">
      <label class="fcu-label" for="{{ field }}">{{ construct.t(type.name).capitalize() }}</label>
      
      <div class="js-show">
        <div style="display: flex;">
          <div style="display: flex; align-items: center; gap: 8px; flex-grow: 1; border: 1px solid var(--fcu-border); border-right: 0; border-radius: var(--fcu-border-radius) 0 0 var(--fcu-border-radius); padding: 8px 12px; background-color: var(--fcu-surface-alt); color: var(--fcu-text-muted);">
            {{ icon("lock", style="font-size: 14px;") }}
            <span>••••••••</span>
          </div>
          <button class="fcu-btn secret-toggle-btn" style="border-radius: 0 var(--fcu-border-radius) var(--fcu-border-radius) 0;" type="button" title="{{ construct.t('crud-change') }}">
            {{ icon("edit", style="font-size: 20px;") }}
          </button>
          <input type="checkbox" name="{{ field }}-change" class="secret-change-checkbox" style="display: none;">
        </div>
        <div class="secret-input-container" style="display: none; margin-top: 8px;">
          {{ _render_field_internal(construct, field, type, view, data=None, ds=ds, skip_label=True, disabled=True) }}
        </div>
      </div>

      <div class="js-hide">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
          <div style="display: flex; align-items: center; gap: 8px; flex-grow: 1; border: 1px solid var(--fcu-border); border-radius: var(--fcu-border-radius); padding: 8px 12px; background-color: var(--fcu-surface-alt); color: var(--fcu-text-muted);">
            {{ icon("lock", style="font-size: 14px;") }}
            <span>••••••••</span>
          </div>
          <div style="display: flex; align-items: center; gap: 8px;">
            <input class="fcu-checkbox" type="checkbox" id="{{ field }}-change-fallback" name="{{ field }}-change">
            <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ field }}-change-fallback">{{ construct.t("crud-change") }}</label>
          </div>
        </div>
        {{ _render_field_internal(construct, field, type, view, data=None, ds=ds, skip_label=True) }}
      </div>
    </div>
  {% else %}
    {{ _render_field_internal(construct, field, type, view, data, ds, errors=errors) }}
  {% endif %}
{% endmacro %}

{% macro _render_field_internal(construct, field, type, view, data=None, ds=None, skip_label=False, disabled=False, errors=None) %}
  {% if type.field_type == 'bool' %}
    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: var(--fcu-gap);">
      <input type="checkbox"
             class="fcu-checkbox"
             id="{{ field }}"
             name="{{ field }}"
             {% if disabled %}disabled{% endif %}
             {% if data and data[field] %}checked{% elif not data and type.default %}checked{% endif %}>
      <label class="fcu-label" style="font-weight: 500;" for="{{ field }}">{{ construct.t(type.name).capitalize() }}</label>
    </div>
  {% elif type.field_type == 'set' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      {% set values = data[field] if data and data[field] else [] %}
      <div id="checkboxes_{{ field }}" style="display: flex; flex-direction: column; gap: 8px; margin-left: 4px;">
        {% for key, label_key in type.sets.items() %}
          <div style="display: flex; align-items: center; gap: 12px;">
            <input class="fcu-checkbox"
                   type="checkbox"
                   name="{{ field }}"
                   value="{{ key }}"
                   id="{{ field }}_{{ key }}"
                   {% if disabled %}disabled{% endif %}
                   {% if key in values %}checked{% endif %}>
            <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ field }}_{{ key }}">{{ construct.t(label_key) }}</label>
          </div>
        {% endfor %}
      </div>
    </div>
  {% elif type.readonly == True and type.field_type != 'list' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      {% set value = type.format_value(field,data) if data else "" %}
      {% if type.orgmode %}
        <div class="fcu-text" style="font-weight: 500;">{{ value | orgmode }}</div>
      {% elif type.form_input_type() == 'richtext' %}
        <div class="fcu-text" style="font-weight: 500;">{{ value | markdown }}</div>
      {% else %}
        <p class="fcu-text" style="font-weight: 500; margin: 0;">{{ value }}</p>
      {% endif %}
    </div>
  {% elif type.field_type == 'related' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label" for="selected-item-display-{{ field }}">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      <div class="js-hide">
        <select class="fcu-form-control" name="{{ field }}" {% if disabled %}disabled{% endif %}>
          {% set value = type.form_value(data) if data else None %}
          {% set value_pk = value[type.related_class._primary_key] if value else none %}
          {# The selected record is rendered first so the selection survives
             even when it falls outside search()'s bounded first page; the
             loop skips it to avoid a duplicate option. #}
          {% if value %}<option value="{{ value_pk }}" selected>{{ value }}</option>{% endif %}
          {% for related_item in type.related_class().search()[0] %}
            {% if related_item[type.related_class._primary_key] != value_pk %}
              <option value="{{ related_item[type.related_class._primary_key] }}">
                {{ related_item }}
              </option>
            {% endif %}
          {% endfor %}
        </select>
      </div>
      {% set value = type.form_value(data) if data else None %}
      <div class="js-show">
        <input type="hidden"
               id="{{ field }}"
               name="{{ field }}"
               {% if disabled %}disabled{% else %}disabled data-js-enable{% endif %}
               value="{{ value[type.related_class._primary_key] if value else '' }}">
        <div class="fcu-dropdown-group">
          <input type="text"
                 class="fcu-form-control cursor-pointer"
                 style="padding-right: 40px;"
                 id="selected-item-display-{{ field }}"
                 value="{{ value if value else '' }}"
                 placeholder="{{ construct.t(type.name).capitalize() }}"
                 readonly
                 {% if disabled %}disabled{% endif %}
                 onclick="document.getElementById('search-input-{{ field }}').focus()">
          <button class="fcu-btn"
                  style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: transparent; padding: 0; color: var(--fcu-text-muted);"
                  type="button"
                  {% if disabled %}disabled{% endif %}
                  onclick="document.getElementById('search-input-{{ field }}').focus()">
            {{ icon("search", style="font-size: 20px;") }}
          </button>
          <ul class="fcu-dropdown-menu">
            <li style="margin-bottom: 8px;">
              <input class="fcu-form-control"
                     style="background-color: var(--fcu-surface-alt); padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                     type="search"
                     id="search-input-{{ field }}"
                     name="q"
                     autocomplete="off"
                     {% if view.endpoint is defined and view.endpoint %}
                     up-href="{{ url_for(view.endpoint + '.search_related', field_name=field) }}"
                     {% else %}
                     up-href="{{ view.url.rstrip('/') }}/search/{{ field }}"
                     {% endif %}
                     up-delay="200"
                     up-min-length="0"
                     up-target="#search-results-{{ field }}"
                     up-indicator
                     placeholder="{{ construct.t("crud-search") }}">
            </li>
            <li>
              <hr style="border: 0; border-top: 1px solid var(--fcu-border); margin: 4px 0;">
            </li>
            <div id="search-results-{{ field }}" style="max-height: 240px; overflow-y: auto;"></div>
          </ul>
        </div>
      </div>
    </div>
  {% elif type.field_type == 'manyrelated' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      {% set current_items = type.form_value(data) if data else [] %}
      {% set staged_field = ((data.many_related_new if data else none) or {}).get(field) or {} %}
      <div class="js-hide">
        {% set search_result = type.related_class().search() %}
        <select class="fcu-form-control"
                id="{{ field }}" name="{{ field }}" multiple size="6" {% if disabled %}disabled{% endif %}>
          {% for item in search_result[0] %}
            {% set pk = item[type.related_class._primary_key] %}
            <option value="{{ pk }}"
                    {% for ci in current_items %}{% if ci[type.related_class._primary_key] == pk %}selected{% endif %}{% endfor %}>
              {{ type.render_display(item) }}
            </option>
          {% endfor %}
        </select>
      </div>
      {% if not disabled and type.create == 'quick' %}
        {# noscript so these inputs never submit alongside the JS chips #}
        <noscript>
          <div class="fcu-form-group" style="margin-top: 8px;">
            <input type="text"
                   class="fcu-form-control"
                   name="{{ field }}-quicknew"
                   {% set staged_quick = staged_field.get('quick') or [] %}
                   {% if staged_quick %}value="{{ staged_quick[0] }}"{% else %}placeholder="{{ construct.t('crud-enter-new-value') }}"{% endif %}>
          </div>
        </noscript>
      {% elif not disabled and type.create == 'form' %}
        <noscript>
          {% set staged_new = staged_field.get('new') or [] %}
          {{ render_newrel_panel(construct, field, type, 0, staged_new[0] if staged_new else none, errors, closable=False) }}
        </noscript>
      {% endif %}
      <div class="js-show">
        <div id="{{ field }}-hidden-inputs" data-pending-label="{{ construct.t('crud-pending-new') }}">
          {% for item in current_items %}
            <input type="hidden" name="{{ field }}" value="{{ item[type.related_class._primary_key] }}" {% if disabled %}disabled{% else %}disabled data-js-enable{% endif %}>
          {% endfor %}
        </div>
        <div class="fcu-dropdown-group">
          <div class="fcu-form-control"
               style="display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; min-height: 38px; cursor: text;"
               onclick="document.getElementById('manyrelated-search-{{ field }}').focus()">
            {% for item in current_items %}
              <span style="display: inline-flex; align-items: center; gap: 4px; background-color: var(--fcu-surface-alt); border: 1px solid var(--fcu-border); font-size: var(--fcu-font-size-sm); font-weight: 500; padding: 2px 8px; border-radius: var(--fcu-border-radius);"
                    id="{{ field }}-badge-{{ item[type.related_class._primary_key] }}">
                {{ type.render_display(item) }}
                <button type="button"
                        style="margin-left: 4px; border: none; background: transparent; padding: 0; cursor: pointer; color: var(--fcu-text-muted); display: inline-flex; align-items: center;"
                        {% if disabled %}disabled{% endif %}
                        onclick="removeManyRelatedItem('{{ field }}', '{{ item[type.related_class._primary_key] }}'); event.stopPropagation();">
                  {{ icon("close", style="font-size: 14px;") }}
                </button>
              </span>
            {% endfor %}
            {% for staged_value in staged_field.get('quick') or [] %}
              <span style="display: inline-flex; align-items: center; gap: 4px; background-color: var(--fcu-surface-alt); border: 1px dashed var(--fcu-border); font-size: var(--fcu-font-size-sm); font-weight: 500; padding: 2px 8px; border-radius: var(--fcu-border-radius);">
                <input type="hidden" name="{{ field }}-quicknew" value="{{ staged_value }}" {% if disabled %}disabled{% else %}disabled data-js-enable{% endif %}>
                {{ staged_value }}
                <span style="color: var(--fcu-text-muted); font-weight: normal;">{{ construct.t('crud-pending-new') }}</span>
                <button type="button"
                        style="margin-left: 4px; border: none; background: transparent; padding: 0; cursor: pointer; color: var(--fcu-text-muted); display: inline-flex; align-items: center;"
                        {% if disabled %}disabled{% endif %}
                        onclick="this.closest('span').remove(); event.stopPropagation();">
                  {{ icon("close", style="font-size: 14px;") }}
                </button>
              </span>
            {% endfor %}
            {% if not disabled %}
              <input type="search"
                     style="border: 0; padding: 0; flex-grow: 1; min-width: 120px; outline: none; background: transparent; font-size: inherit; color: inherit;"
                     id="manyrelated-search-{{ field }}"
                     autocomplete="off"
                     placeholder="{{ construct.t('crud-search') }}"
                     {% if view.endpoint is defined and view.endpoint %}
                     up-href="{{ url_for(view.endpoint + '.search_many_related', field_name=field) }}"
                     {% else %}
                     up-href="{{ view.url.rstrip('/') }}/search-many/{{ field }}"
                     {% endif %}
                     up-delay="200"
                     up-min-length="0"
                     up-target="#manyrelated-results-{{ field }}">
            {% endif %}
          </div>
          <div id="manyrelated-results-{{ field }}"
               class="fcu-dropdown-menu"
               style="max-height: 240px; overflow-y: auto;"></div>
        </div>
        {% if not disabled and type.create == 'form' %}
          <div id="{{ field }}-newrel-items-container" style="display: flex; flex-direction: column; gap: 16px; margin-top: 8px;">
            {% for item in staged_field.get('new') or [] %}
              {{ render_newrel_panel(construct, field, type, loop.index0, item, errors) }}
            {% endfor %}
          </div>
          <template id="{{ field }}-newrel-item-template">
            {{ render_newrel_panel(construct, field, type, '__INDEX__') }}
          </template>
          <button type="button"
                  class="fcu-btn"
                  style="margin-top: 8px; align-self: flex-start;"
                  onclick="addManyRelatedNewPanel('{{ field }}')">
            {{ icon("add", style="font-size: 14px;") }} {{ construct.t("crud-add-new-item") }}
          </button>
        {% endif %}
      </div>
    </div>
  {% elif type.field_type == 'enum' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label" for="{{ field }}">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      <select class="fcu-form-control" id="{{ field }}" name="{{ field }}" {% if type.required %}required{% endif %} {% if disabled %}disabled{% endif %}>
        {% if type.nullable %}
          <option value="">-- {{ construct.t("crud-select") }} --</option>
        {% endif %}
        {% set value = type.format_value(field, data) if data else None %}
        {% for enum_val in type.enum_class %}
          <option value="{{ enum_val.name }}" {% if value and value.v == enum_val.name %}selected{% endif %}>
            {% set translated = construct.t(enum_val.name) %}
            {{ translated if translated != enum_val.name else enum_val.value }}
          </option>
        {% endfor %}
      </select>
    </div>
  {% elif type.field_type == 'list' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      {% if data and ds %}
        {% set items = ds.get_list(data, field) %}
        {% if items %}
          {% if type.layout == 'table' %}
            <div style="border: 1px solid var(--fcu-border); border-radius: var(--fcu-border-radius); overflow: hidden; margin-bottom: 16px;">
              <div style="overflow-x: auto;">
                <table class="fcu-table fcu-table--hover">
                  <thead>
                    <tr>
                      {% if type.columns %}
                        {% for col in type.columns %}
                          {% set t = type.list_class()._schema[col] %}
                          <th>{{ construct.t(t.name).capitalize() }}</th>
                        {% endfor %}
                      {% else %}
                        {% for f, t in type.list_class()._schema.items() if t.field_type != 'pk' and t.visible_form %}
                          <th>{{ construct.t(t.name).capitalize() }}</th>
                        {% endfor %}
                      {% endif %}
                      {% if not type.readonly %}
                        <th class="{% if not type.can_delete %}hidden {% endif %}" style="width: 48px;">
                          {% if type.can_delete %}{{ icon("delete", style="font-size: 16px;") }}{% endif %}
                        </th>
                      {% endif %}
                    </tr>
                  </thead>
                  <tbody>
                    {% for item in items %}
                      {% set list_ds = type.list_class() %}
                      {% set list_pk_field = list_ds._primary_key %}
                      {% set item_id = item[list_pk_field] %}
                      <tr>
                        {% set columns_to_render = type.columns if type.columns else list_ds._schema.keys() %}
                        {% for f in columns_to_render if list_ds._schema[f].field_type != 'pk' and (type.columns or list_ds._schema[f].visible_form) %}
                          {% set t = list_ds._schema[f] %}
                          <td style="vertical-align: top;">
                            {% if type.readonly or t.readonly %}
                              {% if t.field_type == 'bool' %}
                                {% if item[f] %}
                                  {{ icon("check", style="color: var(--fcu-success); font-variation-settings: 'FILL' 1") }}
                                {% else %}
                                  {{ icon("cancel", style="color: var(--fcu-danger); font-variation-settings: 'FILL' 1") }}
                                {% endif %}
                              {% elif t.field_type == 'set' %}
                                {% if item[f] %}
                                  <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                                    {% for v in item[f] %}
                                      {% if v in t.sets %}<span style="background-color: var(--fcu-surface-alt); border: 1px solid var(--fcu-border); font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: var(--fcu-border-radius); text-transform: uppercase;">{{ construct.t(t.sets[v]) }}</span>{% endif %}
                                    {% endfor %}
                                  </div>
                                {% endif %}
                              {% elif t.field_type == 'related' %}
                                {% set curr = item %}
                                {% for part in t.related_field.split('.') %}
                                  {% set curr = curr[part] %}
                                {% endfor %}
                                <span>{{ curr }}</span>
                              {% elif t.field_type == 'enum' %}
                                <span>{{ t.format_value(f, item) }}</span>
                              {% elif t.orgmode %}
                                <div>{{ t.format_value(f, item) | orgmode }}</div>
                              {% elif t.form_input_type() == 'richtext' %}
                                <div>{{ t.format_value(f, item) | markdown }}</div>
                              {% else %}
                                <span>{{ t.format_value(f, item) }}</span>
                              {% endif %}
                            {% else %}
                              {% set input_name = field ~ "-" ~ item_id ~ "-" ~ f %}
                              {% if t.field_type == 'bool' %}
                                <input type="checkbox"
                                       class="fcu-checkbox"
                                       id="{{ input_name }}"
                                       name="{{ input_name }}"
                                       {% if item[f] %}checked{% endif %}>
                              {% elif t.field_type == 'set' %}
                                  {% set values = item[f] if item and item[f] else [] %}
                                  <div id="checkboxes_{{ input_name }}" style="display: flex; flex-direction: column; gap: 4px;">
                                    {% for key, label_key in t.sets.items() %}
                                      <div style="display: flex; align-items: center; gap: 8px;">
                                        <input class="fcu-checkbox"
                                               type="checkbox"
                                               name="{{ input_name }}"
                                               value="{{ key }}"
                                               id="{{ input_name }}_{{ key }}"
                                               {% if key in values %}checked{% endif %}>
                                        <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ input_name }}_{{ key }}">{{ construct.t(label_key) }}</label>
                                      </div>
                                    {% endfor %}
                                  </div>
                              {% elif t.field_type == 'related' %}
                                <select class="fcu-form-control" style="padding: 4px 8px; font-size: var(--fcu-font-size-sm);" id="{{ input_name }}" name="{{ input_name }}">
                                  {% set value = t.form_value(item) if item else None %}
                                  {% for related_item in t.related_class().search()[0] %}
                                    <option value="{{ related_item[t.related_class._primary_key] }}"
                                            {% if value and value[t.related_class._primary_key] == related_item[t.related_class._primary_key] %}selected{% endif %}>
                                      {{ related_item }}
                                    </option>
                                  {% endfor %}
                                </select>
                              {% elif t.field_type == 'enum' %}
                                <select class="fcu-form-control" style="padding: 4px 8px; font-size: var(--fcu-font-size-sm);" id="{{ input_name }}" name="{{ input_name }}" {% if t.required %}required{% endif %}>
                                  {% if t.nullable %}
                                    <option value="">-- {{ construct.t("crud-select") }} --</option>
                                  {% endif %}
                                  {% set value = t.format_value(f, item) if item else None %}
                                  {% for enum_val in t.enum_class %}
                                    <option value="{{ enum_val.name }}" {% if value and value.v == enum_val.name %}selected{% endif %}>
                                      {% set translated = construct.t(enum_val.name) %}
                                      {{ translated if translated != enum_val.name else enum_val.value }}
                                    </option>
                                  {% endfor %}
                                </select>
                              {% elif t.form_input_type() == 'richtext' %}
                                {% set editor_id = 'editor_' ~ input_name %}
                                {% set value = item[f] if item[f] is not none else '' %}
                                <div id="{{ editor_id }}"
                                     class="fcu-form-control"
                                     style="min-height: 100px;"
                                     data-prosemirror-editor
                                     data-field-name="{{ input_name }}"></div>
                                <textarea name="{{ input_name }}"
                                          id="{{ editor_id }}_hidden"
                                          class="hidden">{{ value }}</textarea>
                              {% else %}
                                <input type="{{ t.form_input_type() }}"
                                       {{ t.form_extra_attrs() |safe }}
                                       class="fcu-form-control"
                                       style="padding: 4px 8px; font-size: var(--fcu-font-size-sm);"
                                       id="{{ input_name }}"
                                       name="{{ input_name }}"
                                       value="{{ item[f] if item[f] is not none else '' }}">
                                {% set list_err = t.validate_value(item[f], item) if item else None %}
                                {% if list_err %}
                                  <span style="color: var(--fcu-danger); font-size: var(--fcu-font-size-sm); margin-top: 4px; display: block;">{{ construct.t(list_err.key, list_err.args) }}</span>
                                {% endif %}
                              {% endif %}
                            {% endif %}
                          </td>
                        {% endfor %}
                        {% if not type.readonly %}
                          <td class="{% if not type.can_delete %}hidden {% endif %}" style="vertical-align: top; text-align: right;">
                            <input type="hidden" name="{{ field }}-id" value="{{ item_id }}">
                            {% if type.can_delete %}
                              <span class="hidden">
                                <input type="checkbox" name="{{ field }}-delete" value="{{ item_id }}">
                              </span>
                              <button type="button"
                                      style="border: none; background: transparent; cursor: pointer; color: var(--fcu-text-muted);"
                                      onclick="this.closest('tr').style.display='none'; this.closest('td').querySelector('input[name$=-delete]').checked = true;">
                                {{ icon("delete", style="color: var(--fcu-danger);") }}
                              </button>
                            {% endif %}
                          </td>
                        {% endif %}
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
          {% elif type.layout == 'form' %}
            <div id="{{ field }}-items-container" style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px;">
              {% for item in items %}
                {% set list_ds = type.list_class() %}
                {% set list_pk_field = list_ds._primary_key %}
                {% set item_id = item[list_pk_field] %}
                <div class="fcu-card">
                  <div class="fcu-card-header">
                    <h3>{{ item }}</h3>
                    {% if not type.readonly %}
                      <div>
                        <input type="hidden" name="{{ field }}-id" value="{{ item_id }}">
                        {% if type.can_delete %}
                          <span class="hidden">
                            <input type="checkbox" name="{{ field }}-delete" value="{{ item_id }}">
                          </span>
                          <button type="button"
                                  style="border: none; background: transparent; cursor: pointer; color: var(--fcu-text-muted);"
                                  onclick="this.closest('.fcu-card').style.display='none'; this.parentNode.querySelector('input[name$=-delete]').checked = true;">
                            {{ icon("delete", style="color: var(--fcu-danger);") }}
                          </button>
                        {% endif %}
                      </div>
                    {% endif %}
                  </div>
                  <div class="fcu-card-body">
                    {% if type.template %}
                      {% include type.template %}
                    {% else %}
                      <div class="fcu-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
                        {% set columns_to_render = type.columns if type.columns else list_ds._schema.keys() %}
                        {% for f in columns_to_render if list_ds._schema[f].field_type != 'pk' and (type.columns or list_ds._schema[f].visible_form) %}
                          {% set t = list_ds._schema[f] %}
                          <div class="fcu-form-group">
                            <label class="fcu-label">{{ construct.t(t.name).capitalize() }}</label>
                            {% if type.readonly or t.readonly %}
                              {% if t.field_type == 'bool' %}
                                <div style="display: flex; align-items: center; height: 38px;">
                                  {% if item[f] %}
                                    {{ icon("check", style="color: var(--fcu-success); font-variation-settings: 'FILL' 1") }}
                                  {% else %}
                                    {{ icon("cancel", style="color: var(--fcu-danger); font-variation-settings: 'FILL' 1") }}
                                  {% endif %}
                                </div>
                              {% elif t.field_type == 'set' %}
                                {% if item[f] %}
                                  <div style="display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0;">
                                    {% for v in item[f] %}
                                      {% if v in t.sets %}<span style="background-color: var(--fcu-surface-alt); border: 1px solid var(--fcu-border); font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: var(--fcu-border-radius); text-transform: uppercase;">{{ construct.t(t.sets[v]) }}</span>{% endif %}
                                    {% endfor %}
                                  </div>
                                {% endif %}
                              {% elif t.field_type == 'related' %}
                                {% set curr = item %}
                                {% for part in t.related_field.split('.') %}
                                  {% set curr = curr[part] %}
                                {% endfor %}
                                <p class="fcu-text" style="margin: 0;">{{ curr }}</p>
                              {% elif t.field_type == 'enum' %}
                                <p class="fcu-text" style="margin: 0;">{{ t.format_value(f, item) }}</p>
                              {% elif t.orgmode %}
                                <div class="fcu-text">{{ t.format_value(f, item) | orgmode }}</div>
                              {% elif t.form_input_type() == 'richtext' %}
                                <div class="fcu-text">{{ t.format_value(f, item) | markdown }}</div>
                              {% else %}
                                <p class="fcu-text" style="margin: 0;">{{ t.format_value(f, item) }}</p>
                              {% endif %}
                            {% else %}
                              {% set input_name = field ~ "-" ~ item_id ~ "-" ~ f %}
                              {% if t.field_type == 'bool' %}
                                <div style="display: flex; align-items: center; height: 38px;">
                                  <input type="checkbox"
                                         class="fcu-checkbox"
                                         id="{{ input_name }}"
                                         name="{{ input_name }}"
                                         {% if item[f] %}checked{% endif %}>
                                </div>
                              {% elif t.field_type == 'set' %}
                                  {% set values = item[f] if item and item[f] else [] %}
                                  <div id="checkboxes_{{ input_name }}" style="display: flex; flex-direction: column; gap: 4px; padding: 4px 0;">
                                    {% for key, label_key in t.sets.items() %}
                                      <div style="display: flex; align-items: center; gap: 8px;">
                                        <input class="fcu-checkbox"
                                               type="checkbox"
                                               name="{{ input_name }}"
                                               value="{{ key }}"
                                               id="{{ input_name }}_{{ key }}"
                                               {% if key in values %}checked{% endif %}>
                                        <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ input_name }}_{{ key }}">{{ construct.t(label_key) }}</label>
                                      </div>
                                    {% endfor %}
                                  </div>
                              {% elif t.field_type == 'related' %}
                                <select class="fcu-form-control" id="{{ input_name }}" name="{{ input_name }}">
                                  {% set value = t.form_value(item) if item else None %}
                                  {% for related_item in t.related_class().search()[0] %}
                                    <option value="{{ related_item[t.related_class._primary_key] }}"
                                            {% if value and value[t.related_class._primary_key] == related_item[t.related_class._primary_key] %}selected{% endif %}>
                                      {{ related_item }}
                                    </option>
                                  {% endfor %}
                                </select>
                              {% elif t.field_type == 'enum' %}
                                <select class="fcu-form-control" id="{{ input_name }}" name="{{ input_name }}" {% if t.required %}required{% endif %}>
                                  {% if t.nullable %}
                                    <option value="">-- {{ construct.t("crud-select") }} --</option>
                                  {% endif %}
                                  {% set value = t.format_value(f, item) if item else None %}
                                  {% for enum_val in t.enum_class %}
                                    <option value="{{ enum_val.name }}" {% if value and value.v == enum_val.name %}selected{% endif %}>
                                      {% set translated = construct.t(enum_val.name) %}
                                      {{ translated if translated != enum_val.name else enum_val.value }}
                                    </option>
                                  {% endfor %}
                                </select>
                              {% elif t.form_input_type() == 'richtext' %}
                                {% set editor_id = 'editor_' ~ input_name %}
                                {% set value = item[f] if item[f] is not none else '' %}
                                <div id="{{ editor_id }}"
                                     class="fcu-form-control"
                                     style="min-height: 150px;"
                                     data-prosemirror-editor
                                     data-field-name="{{ input_name }}"></div>
                                <textarea name="{{ input_name }}"
                                          id="{{ editor_id }}_hidden"
                                          class="hidden">{{ value }}</textarea>
                              {% else %}
                                <input type="{{ t.form_input_type() }}"
                                       {{ t.form_extra_attrs() |safe }}
                                       class="fcu-form-control"
                                       id="{{ input_name }}"
                                       name="{{ input_name }}"
                                       value="{{ item[f] if item[f] is not none else '' }}">
                                {% set list_err = t.validate_value(item[f], item) if item else None %}
                                {% if list_err %}
                                  <span style="color: var(--fcu-danger); font-size: var(--fcu-font-size-sm); margin-top: 4px; display: block;">{{ construct.t(list_err.key, list_err.args) }}</span>
                                {% endif %}
                              {% endif %}
                            {% endif %}
                          </div>
                        {% endfor %}
                      </div>
                    {% endif %}
                  </div>
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% else %}
          <p class="fcu-text fcu-text--muted" style="font-style: italic; margin-bottom: 16px;">{{ construct.t("crud-no-items-found") }}</p>
        {% endif %}
      {% endif %}
      {% if not type.readonly and type.can_add %}
        <div id="{{ field }}-new-items-container" style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px;"></div>
        <noscript>
          <div class="fcu-card" style="margin-bottom: 16px;">
            <div class="fcu-card-body">
              <div class="fcu-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
                {% set list_ds = type.list_class() %}
                {% for f, t in list_ds._schema.items() if t.field_type != 'pk' and t.visible_form %}
                  <div class="fcu-form-group">
                    {% set input_name = field ~ "-new-0-" ~ f %}
                    <label class="fcu-label">{{ construct.t(t.name).capitalize() }}</label>
                    {% if t.field_type == 'bool' %}
                      <div style="display: flex; align-items: center; height: 38px;">
                        <input type="checkbox"
                               class="fcu-checkbox"
                               id="{{ input_name }}"
                               name="{{ input_name }}"
                               {% if t.default %}checked{% endif %}>
                      </div>
                    {% elif t.field_type == 'set' %}
                        <div id="checkboxes_{{ input_name }}" style="display: flex; flex-direction: column; gap: 4px; padding: 4px 0;">
                          {% for key, label_key in t.sets.items() %}
                            <div style="display: flex; align-items: center; gap: 8px;">
                              <input class="fcu-checkbox"
                                     type="checkbox"
                                     name="{{ input_name }}"
                                     value="{{ key }}"
                                     id="{{ input_name }}_{{ key }}">
                              <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ input_name }}_{{ key }}">{{ construct.t(label_key) }}</label>
                            </div>
                          {% endfor %}
                        </div>
                    {% elif t.field_type == 'enum' %}
                      <select class="fcu-form-control" id="{{ input_name }}" name="{{ input_name }}" {% if t.required %}required{% endif %}>
                        {% if t.nullable %}
                          <option value="">-- {{ construct.t("crud-select") }} --</option>
                        {% endif %}
                        {% for enum_val in t.enum_class %}
                          <option value="{{ enum_val.name }}">
                            {% set translated = construct.t(enum_val.name) %}
                            {{ translated if translated != enum_val.name else enum_val.value }}
                          </option>
                        {% endfor %}
                      </select>
                    {% elif t.form_input_type() == 'richtext' %}
                      <textarea class="fcu-form-control" name="{{ input_name }}" id="{{ input_name }}" rows="3"></textarea>
                    {% else %}
                        <input type="{{ t.form_input_type() }}"
                               {{ t.form_extra_attrs() |safe }}
                               class="fcu-form-control"
                               id="{{ input_name }}"
                               name="{{ input_name }}"
                               {% if t.default is not none %}value="{{ t.default }}"{% else %}placeholder="{{ construct.t("crud-enter-field", {"fieldname": construct.t(t.name) }).lower() }}"{% endif %}>
                    {% endif %}
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </noscript>
        <template id="{{ field }}-new-item-template">
          {% if type.layout == 'form' %}
            <div class="fcu-card" style="margin-bottom: 16px; border-color: rgba(var(--fcu-primary-hue), var(--fcu-primary-sat), 80%, 0.3);">
              <div class="fcu-card-header" style="background-color: rgba(var(--fcu-primary-hue), var(--fcu-primary-sat), 80%, 0.1);">
                <h3 style="color: var(--fcu-primary);">{{ construct.t("crud-new-item") }}</h3>
                <button type="button" style="border: none; background: transparent; cursor: pointer; color: var(--fcu-text-muted);" onclick="this.closest('.fcu-card').remove()">
                    {{ icon("close", style="font-size: 14px;") }}
                </button>
              </div>
              <div class="fcu-card-body">
                {% if type.template %}
                  {% include type.template %}
                {% else %}
                  <div class="fcu-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
                    {% set list_ds = type.list_class() %}
                    {% for f, t in list_ds._schema.items() if t.field_type != 'pk' and t.visible_form %}
                      <div class="fcu-form-group">
                        {% set input_name = field ~ "-new-__INDEX__-" ~ f %}
                        <label class="fcu-label" for="{{ input_name }}">{{ construct.t(t.name).capitalize() }}</label>
                        {% if t.field_type == 'bool' %}
                          <div style="display: flex; align-items: center; height: 38px;">
                            <input type="checkbox"
                                   class="fcu-checkbox"
                                   id="{{ input_name }}"
                                   name="{{ input_name }}"
                                   {% if t.default %}checked{% endif %}>
                          </div>
                        {% elif t.field_type == 'set' %}
                            <div id="checkboxes_{{ input_name }}" style="display: flex; flex-direction: column; gap: 4px; padding: 4px 0;">
                              {% for key, label_key in t.sets.items() %}
                                <div style="display: flex; align-items: center; gap: 8px;">
                                  <input class="fcu-checkbox"
                                         type="checkbox"
                                         name="{{ input_name }}"
                                         value="{{ key }}"
                                         id="{{ input_name }}_{{ key }}">
                                  <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ input_name }}_{{ key }}">{{ construct.t(label_key) }}</label>
                                </div>
                              {% endfor %}
                            </div>
                        {% elif t.field_type == 'enum' %}
                          <select class="fcu-form-control" id="{{ input_name }}" name="{{ input_name }}" {% if t.required %}required{% endif %}>
                            {% if t.nullable %}
                              <option value="">-- {{ construct.t("crud-select") }} --</option>
                            {% endif %}
                            {% for enum_val in t.enum_class %}
                              <option value="{{ enum_val.name }}">
                                {% set translated = construct.t(enum_val.name) %}
                                {{ translated if translated != enum_val.name else enum_val.value }}
                              </option>
                            {% endfor %}
                          </select>
                        {% elif t.form_input_type() == 'richtext' %}
                          {% set editor_id = 'editor_' ~ input_name %}
                          <div id="{{ editor_id }}"
                               class="fcu-form-control"
                               style="min-height: 150px;"
                               data-prosemirror-editor
                               data-field-name="{{ input_name }}"></div>
                          <textarea name="{{ input_name }}"
                                    id="{{ editor_id }}_hidden"
                                    class="hidden"></textarea>
                        {% else %}
                            <input type="{{ t.form_input_type() }}"
                                   {{ t.form_extra_attrs() |safe }}
                                   class="fcu-form-control"
                                   id="{{ input_name }}"
                                   name="{{ input_name }}"
                                   {% if t.default is not none %}value="{{ t.default }}"{% else %}placeholder="{{ construct.t("crud-enter-field", {"fieldname": construct.t(t.name) }).lower() }}"{% endif %}>
                        {% endif %}
                      </div>
                    {% endfor %}
                  </div>
                {% endif %}
              </div>
            </div>
          {% else %}
            <div class="fcu-card" style="margin-bottom: 16px;">
              <div class="fcu-card-body" style="position: relative; padding-top: 32px;">
                <button type="button" style="position: absolute; top: 8px; right: 8px; border: none; background: transparent; cursor: pointer; color: var(--fcu-text-muted);" onclick="this.closest('.fcu-card').remove()">
                    {{ icon("close", style="font-size: 14px;") }}
                </button>
                <div class="fcu-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
                  {% set list_ds = type.list_class() %}
                  {% for f, t in list_ds._schema.items() if t.field_type != 'pk' and t.visible_form %}
                    <div class="fcu-form-group">
                      {% set input_name = field ~ "-new-__INDEX__-" ~ f %}
                      <label class="fcu-label">{{ construct.t(t.name).capitalize() }}</label>
                      {% if t.field_type == 'bool' %}
                        <div style="display: flex; align-items: center; height: 38px;">
                          <input type="checkbox"
                                 class="fcu-checkbox"
                                 id="{{ input_name }}"
                                 name="{{ input_name }}"
                                 {% if t.default %}checked{% endif %}>
                        </div>
                      {% elif t.field_type == 'set' %}
                          <div id="checkboxes_{{ input_name }}" style="display: flex; flex-direction: column; gap: 4px; padding: 4px 0;">
                            {% for key, label_key in t.sets.items() %}
                              <div style="display: flex; align-items: center; gap: 8px;">
                                <input class="fcu-checkbox"
                                       type="checkbox"
                                       name="{{ input_name }}"
                                       value="{{ key }}"
                                       id="{{ input_name }}_{{ key }}">
                                <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ input_name }}_{{ key }}">{{ construct.t(label_key) }}</label>
                              </div>
                            {% endfor %}
                          </div>
                      {% elif t.field_type == 'enum' %}
                        <select class="fcu-form-control" id="{{ input_name }}" name="{{ input_name }}" {% if t.required %}required{% endif %}>
                          {% if t.nullable %}
                            <option value="">-- {{ construct.t("crud-select") }} --</option>
                          {% endif %}
                          {% for enum_val in t.enum_class %}
                            <option value="{{ enum_val.name }}">
                              {% set translated = construct.t(enum_val.name) %}
                              {{ translated if translated != enum_val.name else enum_val.value }}
                            </option>
                          {% endfor %}
                        </select>
                      {% elif t.form_input_type() == 'richtext' %}
                        <textarea class="fcu-form-control" name="{{ input_name }}" id="{{ input_name }}" rows="3"></textarea>
                      {% else %}
                          <input type="{{ t.form_input_type() }}"
                                 {{ t.form_extra_attrs() |safe }}
                                 class="fcu-form-control"
                                 id="{{ input_name }}"
                                 name="{{ input_name }}"
                                 {% if t.default is not none %}value="{{ t.default }}"{% else %}placeholder="{{ construct.t("crud-enter-field", {"fieldname": construct.t(t.name) }).lower() }}"{% endif %}>
                      {% endif %}
                    </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          {% endif %}
        </template>
        <button type="button"
                class="fcu-btn"
                style="margin-bottom: 16px;"
                onclick="addItem('{{ field }}')">
          {{ icon("add", style="font-size: 14px;") }} {{ construct.t("crud-add-new-item") }}
        </button>
      {% endif %}
    </div>
  {% elif type.form_input_type() == 'textarea' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label" for="{{ field }}">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      {% set value = type.format_value(field, data) if data else '' %}
      {% set column = ds.model[field] if ds else None %}
      {% set maxlength = column.type.length if column and column.type and column.type.length else '' %}
      <textarea class="fcu-form-control"
                style="min-height: 120px;"
                id="{{ field }}"
                name="{{ field }}"
                rows="5"
                {% if disabled %}disabled{% endif %}
                {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}>{{ value }}</textarea>
      {% set error = errors.get(field) if errors else (type.validate_value(value) if type.validate_value and data else None) %}
      {% if error %}
        <span style="color: var(--fcu-danger); font-size: var(--fcu-font-size-sm); margin-top: 4px; display: block;">{{ construct.t(error.key, error.args) }}</span>
      {% endif %}
    </div>
  {% elif type.form_input_type() == 'richtext' %}
    {% set editor_id = 'editor_' ~ field %}
    {% set value = type.format_value(field, data) if data else '' %}
    {% set column = ds.model[field] if ds else None %}
    {% set maxlength = column.type.length if column and column.type and column.type.length else '' %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label" for="{{ editor_id }}">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      <noscript>
        <textarea name="{{ field }}"
                  class="fcu-form-control"
                  style="min-height: 200px;"
                  rows="10"
                  {% if disabled %}disabled{% endif %}
                  {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}>{{ value }}</textarea>
      </noscript>
      <div id="{{ editor_id }}"
           class="fcu-form-control"
           style="min-height: 200px;"
           data-prosemirror-editor
           data-field-name="{{ field }}"></div>
      <textarea name="{{ field }}"
                id="{{ editor_id }}_hidden"
                class="hidden"
                {% if disabled %}disabled{% endif %}
                {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}>{{ value }}</textarea>
      {% set error = errors.get(field) if errors else (type.validate_value(value) if type.validate_value and data else None) %}
      {% if error %}
        <span style="color: var(--fcu-danger); font-size: var(--fcu-font-size-sm); margin-top: 4px; display: block;">{{ construct.t(error.key, error.args) }}</span>
      {% endif %}
    </div>
  {% else %}
    <div class="fcu-form-group">
      {% if not skip_label %}<label class="fcu-label" for="{{ field }}">{{ construct.t(type.name).capitalize() }}</label>{% endif %}
      {% set value = type.format_value(field,data) if data else None %}
      {% set maxlength = type.length if type.length else '' %}
      <input type="{{ type.form_input_type() }}"
             {{ type.form_extra_attrs() |safe }}
             class="fcu-form-control"
             id="{{ field }}"
             name="{{ field }}"
             {% if disabled %}disabled{% endif %}
             {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
             {% if value is not none %}value="{{ value }}"{% elif not data and type.default is not none %}value="{{ type.default }}"{% else %}placeholder="{{ construct.t("crud-enter-field", {"fieldname": construct.t(type.name) }).lower() }}"{% endif %}>
      {% set error = errors.get(field) if errors else (type.validate_value(value) if type.validate_value and data else None) %}
      {% if error %}
        <span style="color: var(--fcu-danger); font-size: var(--fcu-font-size-sm); margin-top: 4px; display: block;">{{ construct.t(error.key, error.args) }}</span>
      {% endif %}
    </div>
  {% endif %}
{% endmacro %}

{% macro render_newrel_subfield(construct, input_name, t, value=None, error=None) %}
  {# One inline-create panel input for a ManyRelated create="form" field.
     Supports the types in ManyRelated.INLINE_FORM_TYPES; text renders as a
     plain textarea (no ProseMirror inside cloned <template> content). #}
  {% if t.field_type == 'bool' %}
    <div style="display: flex; align-items: center; height: 38px;">
      <input type="checkbox"
             class="fcu-checkbox"
             id="{{ input_name }}"
             name="{{ input_name }}"
             {% if value or (value is none and t.default) %}checked{% endif %}>
    </div>
  {% elif t.field_type == 'set' %}
    <div id="checkboxes_{{ input_name }}" style="display: flex; flex-direction: column; gap: 4px; padding: 4px 0;">
      {% for key, label_key in t.sets.items() %}
        <div style="display: flex; align-items: center; gap: 8px;">
          <input class="fcu-checkbox"
                 type="checkbox"
                 name="{{ input_name }}"
                 value="{{ key }}"
                 id="{{ input_name }}_{{ key }}"
                 {% if value and key in value %}checked{% endif %}>
          <label class="fcu-label" style="font-size: var(--fcu-font-size-sm); font-weight: normal;" for="{{ input_name }}_{{ key }}">{{ construct.t(label_key) }}</label>
        </div>
      {% endfor %}
    </div>
  {% elif t.field_type == 'enum' %}
    <select class="fcu-form-control" id="{{ input_name }}" name="{{ input_name }}" {% if t.required %}required{% endif %}>
      {% if t.nullable %}
        <option value="">-- {{ construct.t("crud-select") }} --</option>
      {% endif %}
      {% for enum_val in t.enum_class %}
        <option value="{{ enum_val.name }}" {% if value == enum_val.name %}selected{% endif %}>
          {% set translated = construct.t(enum_val.name) %}
          {{ translated if translated != enum_val.name else enum_val.value }}
        </option>
      {% endfor %}
    </select>
  {% elif t.field_type == 'text' %}
    <textarea class="fcu-form-control" name="{{ input_name }}" id="{{ input_name }}" rows="3">{{ value if value is not none else '' }}</textarea>
  {% else %}
    <input type="{{ t.form_input_type() }}"
           {{ t.form_extra_attrs() |safe }}
           class="fcu-form-control"
           id="{{ input_name }}"
           name="{{ input_name }}"
           {% if value is not none %}value="{{ value }}"{% elif t.default is not none %}value="{{ t.default }}"{% else %}placeholder="{{ construct.t("crud-enter-field", {"fieldname": construct.t(t.name) }).lower() }}"{% endif %}>
  {% endif %}
  {% if error %}
    <span style="color: var(--fcu-danger); font-size: var(--fcu-font-size-sm); margin-top: 4px; display: block;">{{ construct.t(error.key, error.args) }}</span>
  {% endif %}
{% endmacro %}

{% macro render_newrel_panel(construct, field, type, index, item=None, errors=None, closable=True) %}
  {# Inline create panel for a ManyRelated create="form" field — one staged
     related record. Used for the clone <template> (index='__INDEX__'), for
     re-rendered staged panels after a validation failure, and (without the
     close button) for the noscript fallback. #}
  <div class="fcu-card" style="margin-top: 8px; border-color: rgba(var(--fcu-primary-hue), var(--fcu-primary-sat), 80%, 0.3);">
    <div class="fcu-card-header" style="background-color: rgba(var(--fcu-primary-hue), var(--fcu-primary-sat), 80%, 0.1);">
      <h3 style="color: var(--fcu-primary);">{{ construct.t("crud-new-item") }}</h3>
      {% if closable %}
        <button type="button" style="border: none; background: transparent; cursor: pointer; color: var(--fcu-text-muted);" onclick="this.closest('.fcu-card').remove()">
          {{ icon("close", style="font-size: 14px;") }}
        </button>
      {% endif %}
    </div>
    <div class="fcu-card-body">
      <div class="fcu-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
        {% for sub_field, t in type.inline_form_fields() %}
          {% set input_name = field ~ "-newrel-" ~ index ~ "-" ~ sub_field %}
          <div class="fcu-form-group">
            <label class="fcu-label" for="{{ input_name }}">{{ construct.t(t.name).capitalize() }}</label>
            {{ render_newrel_subfield(construct, input_name, t,
                                       value=item.get(sub_field) if item else none,
                                       error=errors.get(input_name) if errors else none) }}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% endmacro %}

{% macro render_form_errors(construct, errors) %}
  {% if errors %}
    <div style="border: 1px solid var(--fcu-danger); color: var(--fcu-danger); border-radius: var(--fcu-border-radius); padding: 12px 16px; margin-bottom: 16px;" role="alert">
      <p style="margin: 0 0 4px 0;">{{ construct.t("crud-validation-errors") }}</p>
      <ul style="margin: 0; padding-left: 20px;">
        {% for fname, err in errors.items() %}
          <li>{{ construct.t(err.label or fname) }}: {{ construct.t(err.key, err.args) }}</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endmacro %}