{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Примеры из практики</h2>
        <button class="btn btn-primary btn-sm" onclick="document.getElementById('modal-case').classList.add('open')">+ Добавить</button>
    </div>
    <div class="table-wrap"><table><thead><tr><th>ID</th><th>Название</th><th>Порядок</th><th>Активен</th><th class="actions"></th></tr></thead>
        <tbody>{% for c in cases %}<tr>
            <td>{{ c.id }}</td><td>{{ c.title }}</td><td>{{ c.sort_order }}</td>
            <td><span class="badge badge-{{ 'active' if c.is_active else 'inactive' }}">{{ 'Да' if c.is_active else 'Нет' }}</span></td>
            <td class="actions">
                <button class="btn btn-secondary btn-sm" onclick="editCase({{ c.id }},'{{ c.title|e }}','{{ c.text|e }}','{{ c.effect|e }}',{{ c.sort_order }},{{ 'true' if c.is_active else 'false' }})">✎</button>
                <form method="post" action="/service/cases/delete" style="display:inline" onsubmit="return confirm('Удалить?')"><input type="hidden" name="id" value="{{ c.id }}"><button class="btn btn-danger btn-sm">✕</button></form>
            </td>
        </tr>{% endfor %}</tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-case"><div class="modal">
    <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
    <h2 id="modal-case-title">Новый пример</h2>
    <form method="post" id="modal-case-form" action="/service/cases/create">
        <input type="hidden" name="id" id="case-id">
        <div class="form-group"><label>Название</label><input type="text" name="title" id="case-title" required></div>
        <div class="form-group"><label>Описание проблемы</label><textarea name="text" id="case-text"></textarea></div>
        <div class="form-group"><label>Результат</label><textarea name="effect" id="case-effect"></textarea></div>
        <div class="form-row">
            <div class="form-group"><label>Порядок</label><input type="number" name="sort_order" id="case-sort_order" value="0"></div>
            <div class="form-check" style="margin-top:24px"><input type="checkbox" name="is_active" id="case-is_active" value="1" checked><label for="case-is_active">Активен</label></div>
        </div>
        <div class="form-actions"><button type="submit" class="btn btn-primary">Сохранить</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button></div>
    </form>
</div></div>
<script>
function editCase(id,title,text,effect,order,active){
    document.getElementById('modal-case').classList.add('open');
    document.getElementById('modal-case-title').textContent = 'Редактировать';
    document.getElementById('modal-case-form').action = '/service/cases/edit';
    document.getElementById('case-id').value = id;
    document.getElementById('case-title').value = title;
    document.getElementById('case-text').value = text;
    document.getElementById('case-effect').value = effect;
    document.getElementById('case-sort_order').value = order;
    document.getElementById('case-is_active').checked = active;
}
</script>
{% endblock %}