<div id="{{ container_id }}" class="case-inline-field">
  {% if show_label or editing %}
    <div class="d-flex {% if show_label %}justify-content-between{% else %}justify-content-end{% endif %} align-items-start gap-2">
      {% if show_label %}
        <strong>{{ field_label }}:</strong>
      {% endif %}
      {% if can_edit %}
        {% if not editing %}
          <button class="quick-edit-trigger quick-edit-button"
                  type="button"
                  hx-get="{{ endpoint_url_edit }}"
                  hx-target="#{{ container_id }}"
                  hx-swap="outerHTML">
            quick edit
          </button>
        {% endif %}
      {% endif %}
    </div>
  {% endif %}

  {% if editing %}
    <form hx-post="{{ endpoint_url_default }}"
          hx-target="#{{ container_id }}"
          hx-swap="outerHTML"
          class="mt-2">
      {% csrf_token %}
      {% if field_kind == "textarea" %}
        <div class="markup-toolbar-placeholder"></div>
        <textarea class="form-control" name="value" rows="4">{{ value|default_if_none:"" }}</textarea>
      {% elif field_kind == "select" %}
        <select class="form-select" name="value" {% if multiple %}multiple{% endif %}>
          {% for option_value, option_label in select_choices %}
            {% if multiple %}
              <option value="{{ option_value }}" {% if option_value|stringformat:"s" in selected_values %}selected{% endif %}>{{ option_label }}</option>
            {% else %}
              <option value="{{ option_value }}" {% if value|stringformat:"s" == option_value %}selected{% endif %}>{{ option_label }}</option>
            {% endif %}
          {% endfor %}
        </select>
      {% else %}
        <input class="form-control" type="text" name="value" value="{{ value|default_if_none:"" }}" />
      {% endif %}

      {% if error_message %}
        <div class="text-danger small mt-1">{{ error_message }}</div>
      {% endif %}

      {% if suggestions %}
        <div class="mt-2">
          <div class="small text-muted mb-1">Suggested options</div>
          <div class="d-flex flex-wrap gap-1">
            {% for suggestion in suggestions %}
              <button type="button"
                      class="btn btn-sm btn-outline-info"
                      onclick="(function(btn){const f=btn.closest('form'); const el=f.querySelector('[name=value]'); if(!el){return;} el.value=btn.getAttribute('data-suggestion') || ''; if(el.tagName==='TEXTAREA' || el.tagName==='INPUT'){el.focus();}})(this)"
                      data-suggestion="{{ suggestion }}">
                {{ suggestion|truncatechars:80 }}
              </button>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      <div class="mt-2 d-flex gap-2">
        <button class="btn btn-sm btn-primary" type="submit">Save</button>
        <button class="btn btn-sm btn-outline-secondary" type="button"
                hx-get="{{ endpoint_url_default }}"
                hx-target="#{{ container_id }}"
                hx-swap="outerHTML">Cancel</button>
      </div>
    </form>
  {% else %}
    {% if field_kind == "textarea" %}
      {% if display_value %}
        {% load markup_links %}
        <div class="pre-whitespace{% if show_label %} mt-1{% endif %}">{{ display_value|render_markup }}</div>
      {% else %}
        <div class="{% if show_label %}mt-1 {% endif %}text-muted">Not set</div>
      {% endif %}
    {% elif field_name == "diagnostic_certainty" %}
      <div class="{% if show_label %}mt-1{% endif %}">
        {% if show_label %}Diagnostic certainty: {% endif %}
        <span class="badge bg-info text-dark ms-1">{{ display_value|default:"Not set" }}</span>
      </div>
    {% else %}
      <div class="{% if show_label %}mt-1{% endif %}">
        {% if display_value %}
          {{ display_value }}
        {% else %}
          <span class="text-muted">Not set</span>
        {% endif %}
      </div>
    {% endif %}
  {% endif %}
</div>
