{% extends "base.html" %}
{% from "_macros.html" import sidebar %}
{% block title %}PulseMQ - Topics{% endblock %}
{% block body %}
<div class="layout">
    {{ sidebar('topics') }}
    <div class="main-content">
        <div class="page-header">
            <h1>Topics</h1>
            <button class="btn btn-primary" onclick="showCreate()">+ 创建 Topic</button>
        </div>

        <div id="create-dialog" style="display:none;">
            <div class="card inline-form">
                <div class="form-group"><label>Topic 名称</label><input type="text" id="new-topic" placeholder="metrics/cpu"></div>
                <button class="btn btn-primary" onclick="createTopic()">创建</button>
                <button class="btn" onclick="document.getElementById('create-dialog').style.display='none'">取消</button>
            </div>
        </div>

        <div class="card">
            <div class="table-wrap">
                <table>
                    <thead>
                        <tr><th>Topic</th><th>今日消息</th><th>最近消息</th><th>订阅</th><th>推送</th><th>操作</th></tr>
                    </thead>
                    <tbody id="data-body">
                        {% for t in topics %}
                        <tr data-idx="{{ loop.index0 }}">
                            <td style="font-weight:600;">{{ t.name }}</td>
                            <td>{{ t.today_count }}</td>
                            <td>{{ t.last_message_time.strftime('%m-%d %H:%M') if t.last_message_time else '-' }}</td>
                            <td>{{ t.sub_user_count }}</td>
                            <td>{{ t.pub_user_count }}</td>
                            <td>
                                <a href="/topics/{{ t.id }}" class="btn btn-sm">详情</a>
                                <button class="btn btn-sm btn-danger" onclick="del({{ t.id }},'{{ t.name }}')">删除</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div id="pagination" class="pagination"></div>
        </div>
    </div>
</div>
<script>
function showCreate(){document.getElementById('create-dialog').style.display='block'}
async function createTopic(){
    const name=document.getElementById('new-topic').value;
    const r=await fetch('/api/topics',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});
    if(r.ok) location.reload(); else alert((await r.json()).detail);
}
async function del(id,name){if(!confirm('确定删除 '+name+'？'))return;await fetch('/api/topics/'+id,{method:'DELETE'});location.reload()}
paginate('data-body',15);
</script>
{% endblock %}