{% extends "base.html" %}
{% block title %}PulseMQ - Permissions{% endblock %}
{% block body %}
<div class="layout">
    <nav class="sidebar">
        <h3 style="margin-bottom:1.5rem;color:var(--accent);">PulseMQ</h3>
        <a href="/">Dashboard</a>
        <a href="/topics">Topics</a>
        <a href="/users">Users</a>
        <a href="/permissions" class="active">Permissions</a>
    </nav>
    <div class="main-content">
        <h1 style="margin-bottom:1.5rem;">权限管理</h1>

        <div class="card">
            <div style="margin-bottom:1rem;">
                <input type="text" id="filter" placeholder="搜索用户或 Topic..." oninput="filterTable()" style="width:300px;">
            </div>

            <div 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>
                        {% for user in users %}
                        <tr data-username="{{ user.username }}">
                            <td>{{ 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:0.5rem;justify-content:center;">
                                    <button
                                        class="btn {{ 'btn-primary' if p.get('can_pub') else '' }}"
                                        style="font-size:0.7rem;padding:0.2rem 0.5rem;"
                                        onclick="togglePerm({{ user.id }}, {{ topic.id }}, 'pub', {{ 'false' if p.get('can_pub') else 'true' }})"
                                        title="推送">P</button>
                                    <button
                                        class="btn {{ 'btn-primary' if p.get('can_sub') else '' }}"
                                        style="font-size:0.7rem;padding:0.2rem 0.5rem;"
                                        onclick="togglePerm({{ user.id }}, {{ topic.id }}, 'sub', {{ 'false' if p.get('can_sub') else 'true' }})"
                                        title="订阅">S</button>
                                </div>
                            </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <p style="margin-top:1rem;color:var(--text-secondary);font-size:0.875rem;">P = 推送权限，S = 订阅权限</p>
        </div>
    </div>
</div>
<script>
async function togglePerm(userId, topicId, type, value) {
    const body = {user_id: userId, topic_id: topicId};
    if (type === 'pub') body.can_pub = value;
    else body.can_sub = value;

    await fetch('/api/permissions', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('token')},
        body: JSON.stringify(body),
    });
    location.reload();
}

function filterTable() {
    const query = document.getElementById('filter').value.toLowerCase();
    document.querySelectorAll('#perm-table tbody tr').forEach(row => {
        const username = row.dataset.username.toLowerCase();
        row.style.display = username.includes(query) ? '' : 'none';
    });
}
</script>
{% endblock %}