{# Scalar field with source selector — expects: f (EditorFieldSchema), buffer (EditBuffer) #}
{% set raw_value = buffer.get_value(f.path) %}
{% set source_info = value_source(raw_value) %}
{% set current_source = source_info[0] %}
{% set display_value = source_info[1] %}

<div class="cfg-field"
     id="field-{{ f.path | replace('.', '-') }}"
     hx-target="this" hx-swap="outerHTML">

  <div class="cfg-field-header">
    <span class="cfg-label">{{ f.path }}</span>
  </div>

  <div class="cfg-tabbed{% if f.multiline and current_source == 'literal' %} cfg-tabbed-multiline{% endif %}" data-source="{{ current_source }}">
    {# Source tabs #}
    <div class="cfg-source">
      {% if not f.required or f.default is not none %}
      <button data-source="unset"
              class="{{ 'active' if current_source == 'unset' else '' }}"
              hx-patch="/api/config/field"
              hx-vals='{"path":"{{ f.path }}","source":"unset"}'
              hx-headers='{"X-Requested-With":"XMLHttpRequest"}'>
        Default
      </button>
      {% endif %}
      <button data-source="literal"
              class="{{ 'active' if current_source == 'literal' else '' }}"
              hx-patch="/api/config/field"
              hx-vals='{"path":"{{ f.path }}","source":"literal","value":{% if current_source == "literal" and display_value is not none %}{{ display_value | tojson }}{% elif f.default is not none and f.default != MISSING %}{{ f.default | tojson }}{% else %}""{% endif %}}'
              hx-headers='{"X-Requested-With":"XMLHttpRequest"}'>
        Literal
      </button>
      {% if f.env_eligible %}
      <button data-source="env"
              class="{{ 'active' if current_source == 'env' else '' }}"
              hx-patch="/api/config/field"
              hx-vals='{"path":"{{ f.path }}","source":"env","value":"{{ display_value if current_source == 'env' else '' }}"}'
              hx-headers='{"X-Requested-With":"XMLHttpRequest"}'>
        Environment
      </button>
      {% endif %}
      {% if f.var_eligible %}
      <button data-source="var"
              class="{{ 'active' if current_source == 'var' else '' }}"
              hx-patch="/api/config/field"
              hx-vals='{"path":"{{ f.path }}","source":"var","value":"{{ display_value if current_source == 'var' else '' }}"}'
              hx-headers='{"X-Requested-With":"XMLHttpRequest"}'>
        Variable
      </button>
      {% endif %}
    </div>

    {# Input #}
    {% if current_source == 'unset' %}
    {% if f.python_type == 'bool' %}
    <select class="cfg-input" disabled>
      <option>{{ (f.default | string | lower) if f.default is not none and f.default != MISSING else 'true' }}</option>
    </select>
    {% else %}
    <input class="cfg-input" type="text"
           value="{{ f.default if f.default is not none and f.default != MISSING else '' }}"
           disabled>
    {% endif %}
    {% elif f.python_type == 'bool' %}
    <select class="cfg-input"
            hx-patch="/api/config/field"
            hx-trigger="change"
            hx-vals='{"path":"{{ f.path }}","source":"literal"}'
            hx-headers='{"X-Requested-With":"XMLHttpRequest"}'
            name="value"
            hx-include="this">
      <option value="true" {{ 'selected' if display_value else '' }}>true</option>
      <option value="false" {{ 'selected' if not display_value else '' }}>false</option>
    </select>
    {% elif f.multiline and current_source == 'literal' %}
    <textarea class="cfg-input cfg-textarea"
              rows="6"
              hx-patch="/api/config/field"
              hx-trigger="change"
              hx-vals='{"path":"{{ f.path }}","source":"{{ current_source }}"}'
              hx-headers='{"X-Requested-With":"XMLHttpRequest"}'
              name="value"
              hx-include="this">{{ display_value if display_value is not none else '' }}</textarea>
    {% else %}
    <input class="cfg-input"
           type="{{ 'number' if f.python_type in ['int', 'float'] and current_source == 'literal' else 'text' }}"
           value="{{ display_value if display_value is not none else '' }}"
           {% if current_source == 'env' %}placeholder="ENV_VAR_NAME"{% endif %}
           {% if current_source == 'var' %}placeholder="VAR_NAME"{% endif %}
           hx-patch="/api/config/field"
           hx-trigger="change"
           hx-vals='{"path":"{{ f.path }}","source":"{{ current_source }}"}'
           hx-headers='{"X-Requested-With":"XMLHttpRequest"}'
           name="value"
           hx-include="this">
    {% endif %}
  </div>

  <span class="cfg-help">{{ f.doc }}</span>
</div>