{% extends "themes/whitelabel/crud/tab_view.html" %}
{% from 'themes/whitelabel/crud/_macros.html' import render_field, render_form_errors, render_newrel_panel %}

{#
  render_child_field: renders a child form field without needing the parent
  view's search endpoints. Related/ManyRelated fields use plain selects.
  All other types delegate to the standard render_field macro (view is unused
  for those types, so passing none is safe).
#}
{% macro render_child_field(construct, field, type, data, ds, child_url=none, errors=none) %}
  {% if type.readonly and type.field_type not in ('list',) %}
    <div class="fcu-form-group">
      <label class="fcu-label">{{ construct.t(type.name).capitalize() }}</label>
      {% set value = type.format_value(field, data) if data else "" %}
      <p class="fcu-text" style="font-weight: 500; margin: 0;">{{ value }}</p>
    </div>
  {% elif type.field_type == 'related' %}
    {% if child_url %}
      {% set _pv = namespace(url=child_url) %}
      {{ render_field(construct, field, type, _pv, data, ds, errors=errors) }}
    {% else %}
      <div class="fcu-form-group">
        <label class="fcu-label" for="{{ field }}">
          {{ construct.t(type.name).capitalize() }}
        </label>
        {% set current = type.form_value(data) if data else none %}
        <select class="fcu-form-control"
                name="{{ field }}"
                id="{{ field }}">
          <option value="">---</option>
          {% for item in type.related_class().search()[0] %}
            {% set pk = item[type.related_class._primary_key] %}
            <option value="{{ pk }}"
                    {% if current and current[type.related_class._primary_key] == pk %}selected{% endif %}>
              {{ item }}
            </option>
          {% endfor %}
        </select>
      </div>
    {% endif %}
  {% elif type.field_type == 'manyrelated' %}
    {% if child_url %}
      {% set _pv = namespace(url=child_url) %}
      {{ render_field(construct, field, type, _pv, data, ds, errors=errors) }}
    {% else %}
      <div class="fcu-form-group">
        <label class="fcu-label">
          {{ construct.t(type.name).capitalize() }}
        </label>
        {% set current_items = type.form_value(data) if data else [] %}
        {% set all_items = type.related_class().search()[0] %}
        {% set staged_field = ((data.many_related_new if data else none) or {}).get(field) or {} %}
        <select class="fcu-form-control"
                name="{{ field }}"
                id="{{ field }}"
                multiple
                size="5">
          {% for item in all_items %}
            {% 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>
        <p class="fcu-text fcu-text--muted" style="margin-top: 4px; font-size: var(--fcu-font-size-sm);">{{ construct.t("crud-select") }}</p>
        {% if type.create == 'quick' %}
          {% set staged_quick = staged_field.get('quick') or [] %}
          <input type="text"
                 class="fcu-form-control"
                 style="margin-top: 8px;"
                 name="{{ field }}-quicknew"
                 {% if staged_quick %}value="{{ staged_quick[0] }}"{% else %}placeholder="{{ construct.t('crud-enter-new-value') }}"{% endif %}>
        {% elif type.create == 'form' %}
          {% 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) }}
        {% endif %}
      </div>
    {% endif %}
  {% else %}
    {{ render_field(construct, field, type, none, data, ds, errors=errors) }}
  {% endif %}
{% endmacro %}

{% block tab_content %}
  {% if edit_actions %}
    <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;">
      {% for action in edit_actions %}
        <a href="{{ action.href }}"
           class="fcu-btn"
           up-follow
           up-target="{{ content_target }}"
           up-history="true">
          {{ icon(action.icon, style="font-size: 14px;") }}
          {{ construct.t(action.name) }}
        </a>
      {% endfor %}
    </div>
  {% endif %}
  <form method="post"
        action="{% if is_edit %}{{ url_for(view.endpoint + '.' + edit_ep, id=parent_id, child_id=child_id) }}{% else %}{{ url_for(view.endpoint + '.' + create_ep, id=parent_id) }}{% endif %}"
        up-target="{{ content_target }}"
        up-history="true">
    {{ csrf_field() }}
    {% if request.values.get('next') %}<input type="hidden" name="next" value="{{ request.values.get('next') }}">{% endif %}
      {{ render_form_errors(construct, errors) }}
    {% for field, type in child_fields %}
      {{ render_child_field(construct, field, type, form_data, ds, child_url=child_url, errors=errors) }}
    {% endfor %}
    <div style="display: flex; align-items: center; gap: 16px; margin-top: 32px;">
      <button type="submit"
              class="fcu-btn fcu-btn--primary">
        {{ icon("save", style="font-size: 14px;") }}
        {% if is_edit %}{{ construct.t("crud-save-button") }}{% else %}{{ construct.t("crud-create-button") }}{% endif %}
      </button>
      <a href="{{ next_url(url_for(view.endpoint + '.' + list_ep, id=parent_id)) }}"
         class="fcu-btn fcu-btn--secondary"
         up-follow
         up-target="{{ content_target }}"
         up-history="true">
        {{ icon("cancel", style="font-size: 14px;") }} {{ construct.t("crud-cancel-button") }}
      </a>
    </div>
  </form>
{% endblock %}