{% import "partials/icons.html" as ic %}
{% import "partials/fields.html" as f %}
{# One lanelet constraint, rendered recursively.

   Children always nest in one list; how many a type takes comes from its
   spec, the same way a condition composition works.

   `slot` is the lanelet field this search chooses for -- a spawn, a goal, the
   lanelet a condition watches. It is what an add or a delete posts back, so
   the tree is the same whichever lanelet it is answering for. #}

{% macro render(node, draft, slot, selected, document=none, inline_fields=false) %}
  {%- set spec = get_constraint_spec(node.type) -%}
  <div class="ed-constraint {% if selected == node.id %}is-selected{% endif %}">
    <div class="ed-constraint-head" tabindex="0" role="button"
         hx-get="/draft/{{ draft.id }}/inspector/{{ node.id }}"
         hx-target="#inspector" hx-swap="innerHTML">
      <span class="ed-constraint-title">
        {% if spec %}{{ spec.title }}{% else %}<span style="color:var(--fail)">{{ node.type }}</span>{% endif %}
      </span>
      {% if not inline_fields %}
        <span class="ed-constraint-params">{{ constraint_summary(node, spec) }}</span>
      {% endif %}
      <form hx-post="/draft/{{ draft.id }}/constraint/{{ node.id }}/delete"
            hx-target="#editor-body" hx-swap="innerHTML" style="margin-left:auto">
        <input type="hidden" name="selected" value="{{ slot.owner_id }}">
        <button type="submit" class="ed-del" title="Remove">{{ ic.icon('x', 10) }}</button>
      </form>
    </div>

    {# Where the tree is the whole editor -- inside the map picker, with the
       inspector column behind it -- each node carries its own parameters, so
       nothing has to be selected somewhere the map is covering. #}
    {% if inline_fields and spec and spec.fields %}
      <form class="ed-constraint-fields"
            hx-post="/draft/{{ draft.id }}/constraint/{{ node.id }}"
            hx-trigger="change delay:200ms"
            hx-target="#editor-body" hx-swap="innerHTML">
        <input type="hidden" name="selected" value="{{ slot.owner_id }}">
        {{ f.fields(spec.fields, node.params, document, '', draft) }}
      </form>
    {% endif %}

    {% if spec and spec.accepts_children %}
      <div class="ed-constraint-children">
        {% for child in node.constraints %}
          {{ render(child, draft, slot, selected, document, inline_fields) }}
        {% endfor %}
        {% if spec.max_children is none or node.constraints|length < spec.max_children %}
          {{ add_constraint(draft, slot, node.id) }}
        {% endif %}
      </div>
    {% endif %}
  </div>
{% endmacro %}


{% macro constraint_summary(node, spec) %}
  {%- if spec -%}
    {%- set parts = [] -%}
    {%- for field_spec in spec.fields -%}
      {%- set value = node.params.get(field_spec.name, field_spec.default) -%}
      {%- if value is not none and value != [] -%}
        {%- set shown = value|join(', ') if value is not string and value is iterable else value -%}
        {%- set _ = parts.append(shown ~ (' ' ~ field_spec.unit if field_spec.unit else '')) -%}
      {%- endif -%}
    {%- endfor -%}
    {{ parts|join(' ') }}
  {%- endif -%}
{% endmacro %}


{% macro add_constraint(draft, slot, parent_id='') %}
  <details class="ed-add">
    <summary class="ed-add-btn" title="Add a constraint">{{ ic.icon('plus', 11) }} constraint</summary>
    <form hx-post="/draft/{{ draft.id }}/constraint" hx-target="#editor-body" hx-swap="innerHTML"
          class="ed-add-form">
      <input type="hidden" name="slot" value="{{ slot.key }}">
      <input type="hidden" name="parent_id" value="{{ parent_id }}">
      <select name="type_id" class="ed-input-xs" style="flex:1">
        {% for spec in constraint_specs() %}
          <option value="{{ spec.type_id }}">{{ spec.category }} · {{ spec.title }}</option>
        {% endfor %}
      </select>
      <button type="submit" class="ed-btn-xs">{{ ic.icon('plus', 11) }}</button>
    </form>
  </details>
{% endmacro %}