{% extends "base.html" %}
{% from "_macros.html" import sidebar %}
{% block title %}PulseMQ - Permissions{% endblock %}
{% block body %}
<div class="layout">
    {{ sidebar('permissions') }}
    <div class="main-content">
        <div class="page-header"><h1>权限管理</h1></div>

        <div class="card">
            <div style="margin-bottom:12px;">
                <input type="text" id="filter" placeholder="搜索用户或 Topic..." oninput="filterTable()" style="width:280px;">
            </div>
            <div class="table-wrap" style="overflow-x:auto;">
                <table id="perm-table">
                    <thead>
                        <tr>
                            <th>用户 \ Topic</th>
                            {% for topic in topics %}
                            <th>{{ topic.name }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody id="data-body">
                        {% for user in users %}
                        <tr data-username="{{ user.username }}" data-idx="{{ loop.index0 }}">
                            <td style="font-weight:600;">{{ user.username }}</td>
                            {% for topic in topics %}
                            <td style="text-align:center;">
                                {% set p = perm_map.get((user.id, topic.id), {}) %}
                                <div style="display:flex;gap:4px;justify-content:center;">
                                    <button class="btn btn-sm {{ 'btn-primary' if p.get('can_pub') else '' }}" onclick="toggle({{ user.id }},{{ topic.id }},'pub',{{ 'false' if p.get('can_pub') else 'true' }})" title="推送">P</button>
                                    <button class="btn btn-sm {{ 'btn-primary' if p.get('can_sub') else '' }}" onclick="toggle({{ user.id }},{{ topic.id }},'sub',{{ 'false' if p.get('can_sub') else 'true' }})" title="订阅">S</button>
                                </div>
                            </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div id="pagination" class="pagination"></div>
            <p style="margin-top:8px;font-size:12px;color:var(--text-muted);">P = 推送，S = 订阅</p>
        </div>
    </div>
</div>
<script>
async function toggle(uid,tid,type,val){
    const body={user_id:uid,topic_id:tid};
    if(type==='pub')body.can_pub=val;else body.can_sub=val;
    await fetch('/api/permissions',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
    location.reload();
}
function filterTable(){
    const q=document.getElementById('filter').value.toLowerCase();
    document.querySelectorAll('#perm-table tbody tr').forEach(r=>{
        r.style.display=r.dataset.username.toLowerCase().includes(q)?'':'none';
    });
}
paginate('data-body',15);
</script>
{% endblock %}