{# Reusable field-cell for the server-detail config grid and any future
   key/value layouts. `value` is rendered as-is (caller can pass safe
   HTML via `|safe` if needed). `editable` is a flag the caller may
   use to switch rendering — currently informational only. #}
{% macro config_field(label, value, editable=False) %}
  <div class="config-field">
    <div class="config-field-label">{{ label }}</div>
    <div class="config-field-value">{{ value }}</div>
  </div>
{% endmacro %}

{# Block form of config_field: lets the caller write the value as a Jinja
   template body, which keeps auto-escaping active for interpolated values. #}
{% macro config_field_block(label, editable=False) %}
  <div class="config-field">
    <div class="config-field-label">{{ label }}</div>
    <div class="config-field-value">{{ caller() }}</div>
  </div>
{% endmacro %}

{# Console form — used by both the inline tab and the modal. The transcript
   ID differs per location to keep HTMX swaps independent. #}
{% macro console_form(server, transcript_id) %}
  <form hx-post="/servers/{{ server.id }}/console"
        hx-target="#{{ transcript_id }}"
        hx-swap="beforeend"
        hx-on::after-request="this.command.value=''; this.command.focus()"
        class="console-input-form"
        data-console-form data-server-id="{{ server.id }}">
    <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
    <span class="console-prompt-glyph">&gt;</span>
    <input name="command" autocomplete="off" spellcheck="false" maxlength="1000"
           placeholder="status, changelevel c1m1_hotel, sm_kick …">
    <button type="submit">Send</button>
  </form>
{% endmacro %}