{% macro field_value_attr(field) -%}
  {%- if field is tree_field and 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_field(field, prefix="") %}
  {% if field is tree_field %}
    {% set name = prefix ~ field.name %}
    <div class="mb-3">
      {% 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{% if field.error %} is-invalid{% endif %}" name="{{ name }}">
          <option value=""></option>
          {% for option in field.options %}
            <option value="{{ option.value }}" {% if option.value == field.value %}selected{% endif %}>
              {{ option.label }}
            </option>
          {% endfor %}
        </select>
      {% else %}
        <label for="{{name}}" class="form-label">{{ field.meta.label }}</label>
        <input id="{{name}}"
               type="{{field.input_type}}"
               class="form-control{% if field.error %} is-invalid{% endif %}"
               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.error %}
        <div class="invalid-feedback">{{ field.error }}</div>
      {% endif %}

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

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

{% macro render_list_entry(list_node, entry, prefix) %}
  {% if list_node is tree_list and entry is tree_list_entry %}
    <div class="border rounded p-3 mb-3 formtree-row"
         data-formtree-row
         data-formtree-row-id="{{ entry.name }}">
      {{ render_value(entry.value, prefix ~ list_node.name ~ "." ~ entry.name ~ ".") }}

      <div class="text-end">
        <button type="button"
                class="btn btn-outline-danger btn-sm"
                data-formtree-action="delete">
          Delete
        </button>
      </div>
    </div>
  {% endif %}
{% endmacro %}

{% macro render_mapping_entry(mapping, entry, prefix) %}
  {% if mapping is tree_mapping and entry is tree_mapping_entry %}
    <div class="border rounded p-3 mb-3 formtree-row"
         data-formtree-row
         data-formtree-row-id="{{ entry.name }}">
      {% if entry.key is tree_field %}
        {{ render_field(entry.key, prefix ~ mapping.name ~ "." ~ entry.name ~ ".") }}
      {% endif %}

      {{ render_value(entry.value, prefix ~ mapping.name ~ "." ~ entry.name ~ ".") }}

      <div class="text-end">
        <button type="button"
                class="btn btn-outline-danger btn-sm"
                data-formtree-action="delete">
          Delete
        </button>
      </div>
    </div>
  {% endif %}
{% endmacro %}

{% macro render_node(node, prefix) %}
  {% if node is tree_node %}
    {% for field in node.fields %}
      {% if field is tree_field %}
        {{ render_field(field, prefix) }}
      {% endif %}
    {% endfor %}

    {% for child in node.children %}
      {% if child is tree_node %}
        <div class="card mb-3">
          <div class="card-header">
            {{ child.meta.label }}
          </div>
          <div class="card-body">
            {{ render_node(child, prefix ~ child.name ~ ".") }}
          </div>
        </div>
      {% endif %}
    {% endfor %}

    {% for list_node in node.lists %}
      {% if list_node is tree_list %}
        <div class="card mb-3"
             data-formtree-collection
             data-formtree-kind="list"
             data-formtree-name="{{ list_node.name }}">
          <div class="card-header">
            {{ list_node.meta.label }}
          </div>
          <div class="card-body">
            <div data-formtree-entries>
              {% for entry in list_node.entries %}
                {% if entry is tree_list_entry %}
                  {{ render_list_entry(list_node, entry, prefix) }}
                {% endif %}
              {% endfor %}
            </div>

            <template data-formtree-prototype>
              {{ render_list_entry(list_node, list_node.prototype, prefix) }}
            </template>

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

    {% for mapping in node.mappings %}
      {% if mapping is tree_mapping %}
        <div class="card mb-3"
             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 %}
                {% if entry is tree_mapping_entry %}
                  {{ render_mapping_entry(mapping, entry, prefix) }}
                {% endif %}
              {% endfor %}
            </div>

            <template data-formtree-prototype>
              {{ render_mapping_entry(mapping, mapping.prototype, prefix) }}
            </template>

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

{% macro render(node, prefix="") %}
  {% if node is tree_node %}
    {{ render_node(node, prefix) }}
  {% endif %}
{% endmacro %}
