{% set key = entry.key %}
{% set meta = entry.meta %}
{% set value = entry.value %}
{% set is_override = entry.is_override %}
<div id="cfg-{{ key|replace('.','-') }}" class="bg-slate-900 rounded-xl border {% if is_override %}border-indigo-700/60{% else %}border-slate-800{% endif %} p-4 flex items-start justify-between gap-4">
    <div class="min-w-0 flex-1">
        <div class="flex items-center gap-2">
            <h4 class="font-semibold text-white text-sm">{{ meta.label }}</h4>
            {% if is_override %}
                <span class="inline-flex px-2 py-0.5 text-[10px] rounded-full bg-indigo-900/50 text-indigo-300 border border-indigo-800">override</span>
            {% endif %}
        </div>
        <p class="text-xs text-slate-400 mt-0.5">{{ meta.description }}</p>
        <p class="text-[10px] text-slate-500 mt-1 font-mono">{{ key }}</p>
        {% if entry.updated_at %}
            <p class="text-[10px] text-slate-600 mt-0.5">Changed by {{ entry.updated_by or 'unknown' }}</p>
        {% endif %}
    </div>

    <div class="flex items-center gap-2 shrink-0">
        {% if meta.type == 'bool' %}
            <form hx-post="/config/{{ key }}"
                  hx-target="#cfg-{{ key|replace('.','-') }}"
                  hx-swap="outerHTML"
                  class="flex items-center">
                <input type="hidden" name="value" value="{{ 'false' if value else 'true' }}">
                <button type="submit" role="switch" aria-checked="{{ 'true' if value else 'false' }}"
                        class="relative inline-flex h-6 w-11 items-center rounded-full transition
                               {% if value %}bg-emerald-500{% else %}bg-slate-700{% endif %}">
                    <span class="inline-block h-4 w-4 transform rounded-full bg-white transition
                                 {% if value %}translate-x-6{% else %}translate-x-1{% endif %}"></span>
                </button>
            </form>

        {% elif meta.type == 'enum' %}
            <form hx-post="/config/{{ key }}"
                  hx-target="#cfg-{{ key|replace('.','-') }}"
                  hx-swap="outerHTML"
                  class="flex items-center gap-2">
                <select name="value" onchange="this.form.requestSubmit()"
                        class="bg-slate-800 text-white text-xs rounded-md border border-slate-700 px-2 py-1.5">
                    {% for opt in meta.options %}
                        <option value="{{ opt }}" {% if opt == value %}selected{% endif %}>{{ opt }}</option>
                    {% endfor %}
                </select>
            </form>

        {% elif meta.type == 'int' %}
            <form hx-post="/config/{{ key }}"
                  hx-target="#cfg-{{ key|replace('.','-') }}"
                  hx-swap="outerHTML"
                  class="flex items-center gap-2">
                <input type="number" name="value" value="{{ value }}"
                       min="{{ meta.get('min', 0) }}" max="{{ meta.get('max', 1000) }}"
                       class="w-20 bg-slate-800 text-white text-xs rounded-md border border-slate-700 px-2 py-1.5 text-right">
                <button type="submit" class="text-xs px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-md">save</button>
            </form>

        {% elif meta.type == 'string' or meta.type == 'csv' %}
            <form hx-post="/config/{{ key }}"
                  hx-target="#cfg-{{ key|replace('.','-') }}"
                  hx-swap="outerHTML"
                  class="flex items-center gap-2">
                <input type="text" name="value" value="{{ value }}"
                       class="w-64 bg-slate-800 text-white text-xs rounded-md border border-slate-700 px-2 py-1.5 font-mono">
                <button type="submit" class="text-xs px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-md">save</button>
            </form>
        {% endif %}

        {% if is_override %}
            <form hx-post="/config/{{ key }}/reset"
                  hx-target="#cfg-{{ key|replace('.','-') }}"
                  hx-swap="outerHTML">
                <button type="submit" class="text-xs text-slate-400 hover:text-rose-300 px-2"
                        title="Reset to default: {{ meta.default }}">↺</button>
            </form>
        {% endif %}
    </div>
</div>