{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Функции бота</h2></div>
    <div class="table-wrap"><table><thead><tr><th>Функция</th><th>Описание</th><th>Статус</th></tr></thead>
        <tbody id="features-list"></tbody></table>
    </div>
</div>
<script>
fetch('/service/api/bot/features').then(function(r){ return r.json() }).then(function(features){
    var tbody = document.getElementById('features-list');
    features.forEach(function(f){
        var tr = document.createElement('tr');
        tr.innerHTML = '<td><strong>' + f.name + '</strong></td><td>' + f.description + '</td><td>' +
            '<label class="toggle-switch"><input type="checkbox" data-key="' + f.key + '" ' + (f.enabled?'checked':'') + ' onchange="toggleFeature(this)"><span class="slider"></span></label>' +
            '</td>';
        tbody.appendChild(tr);
    });
});
function toggleFeature(el){
    fetch('/service/api/bot/features/toggle', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({feature_key: el.dataset.key, enabled: el.checked})
    });
}
</script>
<style>
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:24px;transition:.3s;}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
input:checked+.slider{background:#00ADEF;}
input:checked+.slider:before{transform:translateX(20px);}
</style>
{% endblock %}