{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Шаблоны ответов бота</h2>
        <small style="color:var(--text-muted)">Переменные: {name}, {first_name}, {conv_id}, {phone_1}, {phone_2}, {support_email}, {email_subject}, {work_hours_start}, {work_hours_end}, {policy_url}, {object_name}, {service_level}, {status}, {price}, {score}, {label}, {recommendation}, {date}, {engineer}, {offer_text}, {category}</small>
    </div>
    <div id="templates-list"></div>
    <div class="form-actions">
        <button type="button" class="btn btn-primary" onclick="saveTemplates()">Сохранить все</button>
    </div>
</div>
<script>
var templates = {};
fetch('/service/api/bot/templates').then(function(r){ return r.json() }).then(function(d){
    templates = d;
    var list = document.getElementById('templates-list');
    list.innerHTML = '';
    Object.keys(d).forEach(function(k){
        var div = document.createElement('div');
        div.className = 'form-group';
        div.style.cssText = 'margin-bottom:16px;';
        div.innerHTML = '<label>' + k + '</label><textarea name="' + k + '" rows="3" style="width:100%;font-family:monospace;font-size:12px;">' + d[k].replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</textarea>';
        list.appendChild(div);
    });
});
function saveTemplates(){
    var data = {};
    document.querySelectorAll('#templates-list textarea').forEach(function(el){
        data[el.name] = el.value;
    });
    fetch('/service/api/bot/templates/save', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    }).then(function(r){ return r.json() }).then(function(d){
        if(d.ok) alert('Шаблоны сохранены');
    });
}
</script>
{% endblock %}