{% macro render_value(value, prefix) %}
  {% if value is tree_node %}
    {{ render_node(value, prefix ~ value.name ~ ".") }}
  {% else %}
    {{ render_field(value, prefix) }}
  {% endif %}
{% endmacro %}

{% macro field_value_attr(field) -%}
{%- if field.value is not none -%}
value="{{
    field.value.strftime('%Y-%m-%dT%H:%M') if field.input_type == 'datetime-local'
    else field.value.strftime('%Y-%m-%d') if field.input_type == 'date'
    else field.value.strftime('%H:%M:%S') if field.input_type == 'time' and field.value.second
    else field.value.strftime('%H:%M') if field.input_type == 'time'
    else field.value
}}"
{%- endif -%}
{%- endmacro %}

{% macro render_list_entry(tree_list, entry, prefix) %}
  <div class="border rounded p-3 mb-2 formtree-row"
       data-formtree-row
       data-formtree-row-id="{{ entry.name }}">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <div class="fw-semibold">Item {{ entry.name }}</div>
      <button type="button"
              class="btn btn-outline-danger btn-sm"
              data-formtree-action="delete">
        Delete
      </button>
    </div>

    {{ render_value(entry.value, prefix ~ tree_list.name ~ "." ~ entry.name ~ ".") }}
  </div>
{% endmacro %}

{% macro render_mapping_entry(mapping, entry, prefix) %}
  <div class="border rounded p-3 mb-2 formtree-row"
       data-formtree-row
       data-formtree-row-id="{{ entry.name }}">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <div class="fw-semibold">Item {{ entry.name }}</div>
      <button type="button"
              class="btn btn-outline-danger btn-sm"
              data-formtree-action="delete">
        Delete
      </button>
    </div>

    {{ render_field(entry.key, prefix ~ mapping.name ~ "." ~ entry.name ~ ".") }}
    {{ render_value(entry.value, prefix ~ mapping.name ~ "." ~ entry.name ~ ".") }}
  </div>
{% endmacro %}

{% macro render_field(field, prefix="") %}
  {% set name = prefix ~ field.name %}
  <div class="mb-2">
    {% if field.input_type == "checkbox" %}
      <div class="form-check">
        <input id="{{name}}"
               type="checkbox"
               class="form-check-input"
               name="{{ name }}"
               {% if field.value %}checked{% endif %}>
        <label for="{{name}}" class="form-label">{{ field.meta.label }}</label>
      </div>
    {% elif field.input_type == "select" %}
      <label for="{{name}}" class="form-label">{{ field.meta.label }}</label>
      <select id="{{name}}" class="form-select" name="{{ name }}">
        {% for option in field.options %}
        <option value="{{ option }}" {% if option == field.value %}selected{% endif %}>
          {{ option }}
        </option>
        {% endfor %}
      </select>
    {% else %}
      <label for="{{name}}" class="form-label">{{ field.meta.label }}</label>
      <input id="{{name}}"
             type="{{field.input_type}}"
             class="form-control"
             name="{{ name }}"
             {{ field_value_attr(field) }}
             {% if field.meta.min != None %}min="{{ field.meta.min }}"{% endif %}
             {% if field.meta.max != None %}max="{{ field.meta.max }}"{% endif %}
             {% if field.meta.step != None %}step="{{ field.meta.step }}"{% endif %}
             {% if field.meta.required %}required{% endif %}>
    {% endif %}

    {% if field.meta.help %}
    <div id="{{ name }}Help" class="form-text">{{ field.meta.help }}</div>
    {% endif %}
  </div>
{% endmacro %}

{% macro render_node(node, prefix) %}
  {% for field in node.fields %}
    {{ render_field(field, prefix) }}
  {% endfor %}

  {% for child in node.children %}
    {{ render_node(child, prefix ~ child.name ~ ".") }}
  {% endfor %}

  {% for tree_list in node.lists %}
    <div class="card mb-2"
         data-formtree-collection
         data-formtree-kind="list"
         data-formtree-name="{{ tree_list.name }}">
      <div class="card-header">
        {{ tree_list.name }}
      </div>
      <div class="card-body">
        <div data-formtree-entries>
          {% for entry in tree_list.entries %}
            {{ render_list_entry(tree_list, entry, prefix) }}
          {% endfor %}
        </div>

        <template data-formtree-prototype>
          {{ render_list_entry(
              tree_list,
              {"name": "__name__", "value": tree_list.item_schema},
              prefix
          ) }}
        </template>

        <button type="button"
                class="btn btn-primary"
                data-formtree-action="add">
          Add
        </button>
      </div>
    </div>
  {% endfor %}

  {% for mapping in node.mappings %}
    <div class="card mb-2"
         data-formtree-collection
         data-formtree-kind="mapping"
         data-formtree-name="{{ mapping.name }}">
      <div class="card-header">
        {{ mapping.name }}
      </div>
      <div class="card-body">
        <div data-formtree-entries>
          {% for entry in mapping.entries %}
            {{ render_mapping_entry(mapping, entry, prefix) }}
          {% endfor %}
        </div>

        <template data-formtree-prototype>
          {{ render_mapping_entry(
              mapping,
              {
                "name": "__name__",
                "key": mapping.key_schema,
                "value": mapping.value_schema
              },
              prefix
          ) }}
        </template>

        <button type="button"
                class="btn btn-primary"
                data-formtree-action="add">
          Add
        </button>
      </div>
    </div>
  {% endfor %}
{% endmacro %}

{% macro render(node, prefix="") %}
{{ render_node(node, prefix) }}
{% endmacro %}
