{% macro saver_toggle(setting_key, enabled) %}
<label class="saver-toggle shrink-0">
    <input type="checkbox"
           {% if enabled %}checked{% endif %}
           hx-post="/dashboard/api/settings"
           hx-swap="none"
           hx-trigger="change"
           hx-on:htmx:config-request="event.detail.parameters.key='{{ setting_key }}'; event.detail.parameters.value=event.detail.elt.checked ? 'true' : 'false'">
    <span class="saver-toggle-track" aria-hidden="true"></span>
</label>
{% endmacro %}

{% macro saver_savings(class_name) %}
{% set s = saver_stats.get(class_name) if saver_stats else None %}
{% if s %}
<p class="text-gray-500 text-xs mt-2">
    saved {{ "%.1f"|format(s.saved_kb) }} KB across {{ s.requests }} request{{ "s" if s.requests != 1 else "" }}
    ({{ "%.1f"|format(s.avg_pct) }}% avg) — since restart
</p>
{% endif %}
{% endmacro %}

<div class="space-y-4">
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center justify-between gap-4">
            <div class="flex-1 min-w-0">
                <div class="flex items-center space-x-3 mb-2">
                    <h2 class="text-lg font-bold text-white">RTK</h2>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Recommended</span>
                </div>
                <p class="text-gray-400 text-sm">Recursive Token Kompression — compresses conversation history to reduce input tokens. No quality loss for long conversations.</p>
                {{ saver_savings("RTKSaver") }}
            </div>
            {{ saver_toggle("saver_rtk_enabled", settings.saver_rtk_enabled == 'true') }}
        </div>
    </div>

    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-start justify-between gap-4">
            <div class="flex-1 min-w-0">
                <div class="flex items-center space-x-3 mb-2">
                    <h2 class="text-lg font-bold text-white">Caveman</h2>
                </div>
                <p class="text-gray-400 text-sm mb-3">Injects a brevity system prompt so responses skip filler and pleasantries. Aggressive token savings, may affect nuance. Choose brevity level:</p>
                <div class="inline-flex rounded-lg border border-gray-700 overflow-hidden" id="caveman-levels">
                    {% set cl = settings.saver_caveman_level %}
                    {% for level in ['lite', 'full', 'ultra'] %}
                    <button hx-post="/dashboard/api/settings" hx-swap="none"
                            hx-vals='{"key": "saver_caveman_level", "value": "{{ level }}"}'
                            onclick="cavemanLevelSelect(this, '{{ level }}')"
                            class="px-4 py-1.5 text-sm font-medium transition-colors caveman-btn
                            {% if cl == level %}bg-blue-600 text-white{% else %}bg-gray-900 text-gray-400 hover:text-white{% endif %}">
                        {{ level | capitalize }}
                    </button>
                    {% endfor %}
                </div>
                {{ saver_savings("CavemanSaver") }}
            </div>
            {{ saver_toggle("saver_caveman_enabled", settings.saver_caveman_enabled == 'true') }}
        </div>
    </div>

    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-start justify-between gap-4">
            <div class="flex-1 min-w-0">
                <div class="flex items-center space-x-3 mb-2">
                    <h2 class="text-lg font-bold text-white">Headroom</h2>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">External</span>
                </div>
                <p class="text-gray-400 text-sm mb-3">Routes the conversation through a locally running <a href="https://github.com/chopratejas/headroom" target="_blank" class="text-blue-400 hover:text-blue-300">Headroom</a> compression proxy (<code class="text-xs bg-gray-900 px-1 rounded">pip install "headroom-ai[proxy]" &amp;&amp; headroom proxy --port 8787</code>). Fails open — if Headroom is down, requests pass through unchanged.</p>
                <label class="block text-xs text-gray-500 mb-1" for="headroom-url">Headroom URL</label>
                <input type="text"
                       id="headroom-url"
                       value="{{ settings.saver_headroom_url }}"
                       placeholder="http://localhost:8787"
                       hx-post="/dashboard/api/settings"
                       hx-swap="none"
                       hx-trigger="change"
                       hx-on:htmx:config-request="event.detail.parameters.key='saver_headroom_url'; event.detail.parameters.value=event.detail.elt.value"
                       class="w-full max-w-sm px-3 py-1.5 bg-gray-900 border border-gray-700 rounded-lg text-sm text-gray-300 font-mono focus:outline-none focus:border-blue-500">
                {{ saver_savings("HeadroomSaver") }}
            </div>
            {{ saver_toggle("saver_headroom_enabled", settings.saver_headroom_enabled == 'true') }}
        </div>
    </div>

    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-start justify-between gap-4">
            <div class="flex-1 min-w-0">
                <div class="flex items-center space-x-3 mb-2">
                    <h2 class="text-lg font-bold text-white">Ponytail</h2>
                </div>
                <p class="text-gray-400 text-sm mb-3">Summarizes older messages into a compact summary. Choose compression level:</p>
                <div class="inline-flex rounded-lg border border-gray-700 overflow-hidden" id="ponytail-levels">
                    {% set pl = settings.saver_ponytail_level %}
                    {% for level in ['lite', 'full', 'ultra'] %}
                    <button hx-post="/dashboard/api/settings" hx-swap="none"
                            hx-vals='{"key": "saver_ponytail_level", "value": "{{ level }}"}'
                            onclick="ponytailLevelSelect(this, '{{ level }}')"
                            class="px-4 py-1.5 text-sm font-medium transition-colors ponytail-btn
                            {% if pl == level %}bg-blue-600 text-white{% else %}bg-gray-900 text-gray-400 hover:text-white{% endif %}">
                        {{ level | capitalize }}
                    </button>
                    {% endfor %}
                </div>
                {{ saver_savings("PonytailSaver") }}
            </div>
            {{ saver_toggle("saver_ponytail_enabled", settings.saver_ponytail_enabled == 'true') }}
        </div>
    </div>
</div>