{% extends "base.html" %}
{% block title %}Token Savers - Janus{% endblock %}
{% block savers_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<style>
.saver-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.saver-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.saver-toggle-track {
    position: relative;
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    background-color: #4b5563;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
    pointer-events: none;
}
.saver-toggle-track::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: #fff;
    border-radius: 9999px;
    transition: transform 0.2s ease;
}
.saver-toggle input:checked + .saver-toggle-track {
    background-color: #2563eb;
}
.saver-toggle input:checked + .saver-toggle-track::after {
    transform: translateX(1.25rem);
}
.saver-toggle input:focus-visible + .saver-toggle-track {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}
</style>

<h1 class="text-2xl font-bold text-white mb-2">Token Savers</h1>
<p class="text-gray-400 text-sm mb-2">Reduce token usage before requests are sent upstream. Savers run in order; enable only what you need.</p>
<p class="text-gray-500 text-xs mb-6">Settings are stored on this server and sync across devices every few seconds.</p>

<div id="savers-list"
     hx-get="/dashboard/api/savers/partial"
     hx-trigger="load, every 8s"
     hx-swap="innerHTML">
    {% include "savers_list.html" %}
</div>

<script>
function ponytailLevelSelect(btn, level) {
    var container = document.getElementById('ponytail-levels');
    if (!container) return;
    var buttons = container.querySelectorAll('.ponytail-btn');
    buttons.forEach(function(b) {
        b.className = 'px-4 py-1.5 text-sm font-medium transition-colors ponytail-btn bg-gray-900 text-gray-400 hover:text-white';
    });
    btn.className = 'px-4 py-1.5 text-sm font-medium transition-colors ponytail-btn bg-blue-600 text-white';
}
function cavemanLevelSelect(btn, level) {
    var container = document.getElementById('caveman-levels');
    if (!container) return;
    var buttons = container.querySelectorAll('.caveman-btn');
    buttons.forEach(function(b) {
        b.className = 'px-4 py-1.5 text-sm font-medium transition-colors caveman-btn bg-gray-900 text-gray-400 hover:text-white';
    });
    btn.className = 'px-4 py-1.5 text-sm font-medium transition-colors caveman-btn bg-blue-600 text-white';
}
</script>
{% endblock %}