{% extends "base.html" %}

{% block title %}App Access Permissions - AppManager{% endblock %}

{% block extra_css %}
<style>
    .matrix-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        font-size: 0.9rem;
    }
    .matrix-table th, .matrix-table td {
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-color);
    }
    .matrix-table th {
        background: rgba(15, 23, 42, 0.8);
    }
    .matrix-table th.user-col {
        text-align: left;
    }
    .checkbox-cell {
        transform: scale(1.2);
        cursor: pointer;
    }
</style>
{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
    <div>
        <h1 style="font-size: 1.8rem; font-weight: 700;">App Access Permissions Matrix</h1>
        <p style="color: var(--text-muted);">Manage which users have access to specific installed Flask sub-apps</p>
    </div>
    <a href="/admin" class="btn btn-secondary">&larr; Back to Admin Dashboard</a>
</div>

<div class="card">
    {% if users and apps %}
        <form action="/admin/permissions" method="POST">
            <div style="overflow-x: auto; margin-bottom: 1.5rem;">
                <table class="matrix-table">
                    <thead>
                        <tr>
                            <th class="user-col">User / Email</th>
                            <th class="user-col">Role</th>
                            {% for app in apps %}
                                <th>
                                    <div>{{ app.name }}</div>
                                    <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: normal;">/apps/{{ app.slug }}</div>
                                </th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for u in users %}
                            <tr>
                                <td class="user-col">
                                    <strong>{{ u.name or u.email }}</strong><br>
                                    <span style="font-size: 0.8rem; color: var(--text-muted);">{{ u.email }}</span>
                                </td>
                                <td class="user-col">
                                    <span style="font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(99, 102, 241, 0.2); color: #818cf8;">{{ u.role }}</span>
                                </td>
                                {% for app in apps %}
                                    {% set is_checked = perms_map.get((u.id, app.id), True) %}
                                    <td>
                                        {% if u.is_admin() %}
                                            <span style="color: #4ade80; font-size: 0.8rem;">Full Access (Admin)</span>
                                        {% else %}
                                            <input type="checkbox" name="perm_{{ u.id }}_{{ app.id }}" value="1" class="checkbox-cell" {% if is_checked %}checked{% endif %}>
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <button type="submit" class="btn btn-primary">Save Permission Changes</button>
        </form>
    {% else %}
        <p style="color: var(--text-muted);">You need both registered users and installed sub-apps to manage permissions.</p>
    {% endif %}
</div>
{% endblock %}