{% extends "base.html" %}
{% block title %}Permissions — {{ admin_user.get_full_name }}{% endblock %}
{% block nav_permissions %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="{% url 'portal:admin_permissions' %}" class="text-muted small d-block mb-1">
            <i class="fa-solid fa-arrow-left me-1"></i> Back to Permissions
        </a>
        <h2><i class="fa-solid fa-shield-halved me-2"></i>Permissions — {{ admin_user.get_full_name }}</h2>
        <p class="text-muted mb-0">{{ admin_user.email }}</p>
    </div>
</div>

<form method="post">
    {% csrf_token %}

    <!-- Restriction toggle -->
    <div class="portal-card mb-4">
        <div class="portal-card-body">
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div class="flex-grow-1">
                    <h6 class="mb-1">Access Mode</h6>
                    <p class="text-muted small mb-0">
                        <strong>Full Access</strong> gives this admin unrestricted access to all modules.
                        Enable <strong>Restricted</strong> to configure specific module permissions below.
                    </p>
                </div>
                <div class="form-check form-switch fs-5 m-0">
                    <input class="form-check-input" type="checkbox" role="switch"
                           id="enableRestrictions" name="enable_restrictions" value="1"
                           {% if is_restricted %}checked{% endif %}>
                    <label class="form-check-label fw-semibold" for="enableRestrictions">
                        Restricted mode
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Module permissions table -->
    <div class="portal-card mb-4" id="moduleTable" {% if not is_restricted %}style="opacity:.45;pointer-events:none;"{% endif %}>
        <div class="portal-card-header">
            <h6 class="mb-0"><i class="fa-solid fa-table-list me-2"></i>Module Access</h6>
            <small class="text-muted">Enable "Restricted mode" above to configure these.</small>
        </div>
        <div class="portal-card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:35%">Module</th>
                            <th class="text-center" style="width:20%">
                                <i class="fa-solid fa-eye me-1 text-primary"></i>View
                            </th>
                            <th class="text-center" style="width:20%">
                                <i class="fa-solid fa-pen me-1 text-warning"></i>Edit / Add
                            </th>
                            <th class="text-center" style="width:20%">
                                <i class="fa-solid fa-trash me-1 text-danger"></i>Delete
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in rows %}
                        <tr>
                            <td class="fw-semibold">{{ row.label }}</td>
                            <td class="text-center">
                                <input type="checkbox" name="{{ row.key }}_view" value="1"
                                       class="form-check-input"
                                       {% if row.can_view %}checked{% endif %}>
                            </td>
                            <td class="text-center">
                                <input type="checkbox" name="{{ row.key }}_edit" value="1"
                                       class="form-check-input"
                                       {% if row.can_edit %}checked{% endif %}>
                            </td>
                            <td class="text-center">
                                <input type="checkbox" name="{{ row.key }}_delete" value="1"
                                       class="form-check-input"
                                       {% if row.can_delete %}checked{% endif %}>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Quick-select helpers -->
    <div class="d-flex gap-2 mb-4 flex-wrap" id="quickActions" {% if not is_restricted %}style="display:none!important;"{% endif %}>
        <button type="button" class="btn btn-sm btn-outline-success" id="grantAll">
            <i class="fa-solid fa-check-double me-1"></i>Grant All
        </button>
        <button type="button" class="btn btn-sm btn-outline-danger" id="revokeAll">
            <i class="fa-solid fa-ban me-1"></i>Revoke All
        </button>
        <button type="button" class="btn btn-sm btn-outline-primary" id="viewOnly">
            <i class="fa-solid fa-eye me-1"></i>View-Only (All Modules)
        </button>
    </div>

    <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">
            <i class="fa-solid fa-floppy-disk me-1"></i>Save Permissions
        </button>
        <a href="{% url 'portal:admin_permissions' %}" class="btn btn-outline-secondary">Cancel</a>
    </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    var toggle      = document.getElementById('enableRestrictions');
    var table       = document.getElementById('moduleTable');
    var quickActions= document.getElementById('quickActions');

    function syncState() {
        var on = toggle.checked;
        table.style.opacity        = on ? '1'    : '0.45';
        table.style.pointerEvents  = on ? ''     : 'none';
        quickActions.style.display = on ? ''     : 'none';
    }

    toggle.addEventListener('change', syncState);

    document.getElementById('grantAll').addEventListener('click', function () {
        table.querySelectorAll('input[type=checkbox]').forEach(function(c){ c.checked = true; });
    });
    document.getElementById('revokeAll').addEventListener('click', function () {
        table.querySelectorAll('input[type=checkbox]').forEach(function(c){ c.checked = false; });
    });
    document.getElementById('viewOnly').addEventListener('click', function () {
        table.querySelectorAll('input[type=checkbox]').forEach(function(c){
            c.checked = c.name.endsWith('_view');
        });
    });
})();
</script>
{% endblock %}