{% extends "base.html" %}
{% block title %}Permissions · {{ user.full_name }} · WageWise Neo{% endblock %}
{% block content %}
<style>
.perm-grid { width:100%; border-collapse:collapse; }
.perm-grid th,.perm-grid td { padding:10px 12px; border-bottom:1px solid var(--color-rule); }
.perm-grid thead th { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-ink-faint); font-weight:500; }
.perm-grid tbody tr:nth-child(even) { background:var(--color-paper-stripe); }
.perm-col { width:110px; text-align:center; }
.cb-wrap { display:flex; align-items:center; justify-content:center; }
.cb-wrap input { width:17px; height:17px; cursor:pointer; }
</style>
<div class="page-header">
    <div><div class="eyebrow">Permissions</div><h1>{{ user.full_name }}</h1></div>
    <a href="{{ url_for('permissions_list') }}" class="btn btn-secondary">← All Users</a>
</div>
<div class="panel" style="background:var(--color-stamp-bg);border-color:var(--color-stamp);padding:12px 18px;margin-bottom:16px;">
    <p style="margin:0;font-size:13px;">Role: <span class="stamp {{ 'active' if user.role == 'admin' else 'neutral' }}">{{ user.role }}</span> &nbsp; Username: <code style="font-family:var(--font-data);">{{ user.username }}</code> &nbsp; — Changes here override the default role permissions.</p>
</div>
<div class="panel">
    <form method="post">
        <table class="perm-grid">
            <thead>
                <tr>
                    <th style="min-width:180px;">Module</th>
                    <th class="perm-col" style="color:var(--color-paid);">View</th>
                    <th class="perm-col" style="color:var(--color-stamp);">Create</th>
                    <th class="perm-col" style="color:#1a6eb5;">Edit</th>
                    <th class="perm-col" style="color:var(--color-due);">Delete</th>
                    <th style="width:80px;"></th>
                </tr>
            </thead>
            <tbody>
            {% for module in modules %}
            {% set mp = perms.get(module, {}) %}
            <tr>
                <td>
                    <div style="font-weight:600;font-size:13px;">{{ module_labels.get(module, module|title) }}</div>
                    <div class="meta" style="font-size:10px;">{{ module }}</div>
                </td>
                {% for action in ['view','create','edit','delete'] %}
                <td class="perm-col">
                    <div class="cb-wrap">
                        <input type="checkbox" name="{{ module }}_{{ action }}" value="1"
                               {{ 'checked' if mp.get(action) }}>
                    </div>
                </td>
                {% endfor %}
                <td style="text-align:center;">
                    <a href="#" onclick="toggleRow('{{ module }}',event)" style="font-size:11px;color:var(--color-stamp);">All/None</a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <div style="margin-top:8px;padding-top:8px;border-top:1px solid var(--color-rule);display:flex;gap:10px;">
            <button type="button" onclick="setAll(true)" class="btn btn-secondary" style="font-size:12px;padding:4px 12px;">Tick All</button>
            <button type="button" onclick="setAll(false)" class="btn btn-secondary" style="font-size:12px;padding:4px 12px;">Clear All</button>
        </div>
        <div class="actions-row" style="margin-top:20px;">
            <button type="submit" class="btn btn-primary">Save Permissions</button>
            <a href="{{ url_for('permissions_list') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
<script>
function toggleRow(m,e){e.preventDefault();var bs=document.querySelectorAll('input[name^="'+m+'_"]');var any=Array.from(bs).some(function(b){return !b.checked;});bs.forEach(function(b){b.checked=any;});}
function setAll(v){document.querySelectorAll('.perm-grid input[type=checkbox]').forEach(function(b){b.checked=v;});}
</script>
{% endblock %}