<?php require_once __DIR__ . '/../layout.php'; ?>

<div style="margin-bottom: 2rem;">
    <a href="/superadmin/privileges" style="color: var(--superadmin-color); text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; margin-bottom: 1rem;">
        <i class="ph ph-arrow-left" style="font-weight: bold;"></i> Back to Privileges Directory
    </a>
    <h3 style="margin: 0; color: white;"><?php echo htmlspecialchars($title); ?></h3>
</div>

<div class="card" style="max-width: 600px;">
    <form action="<?php echo $actionUrl; ?>" method="POST">
        <div class="input-group">
            <label for="name">Privilege Name</label>
            <input type="text" id="name" name="name" value="<?php echo htmlspecialchars($record['name'] ?? ''); ?>" placeholder="e.g. View Billing Reports" required style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none;">
        </div>

        <div class="input-group">
            <label for="slug">Privilege Slug (Token Code)</label>
            <input type="text" id="slug" name="slug" value="<?php echo htmlspecialchars($record['slug'] ?? ''); ?>" placeholder="e.g. view_billing" required style="width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--glass-border); background: rgba(15,23,42,0.6); color: white; outline: none; font-family: monospace;">
            <small style="color: var(--text-muted); display: block; margin-top: 0.5rem;">Use lowercase alphanumeric characters and underscores only. This key is evaluated in Auth::hasPrivilege('key').</small>
        </div>

        <div style="margin-top: 2rem; display: flex; gap: 1rem;">
            <button type="submit" class="btn-gold">Save Privilege</button>
            <a href="/superadmin/privileges" class="btn-outline-gold" style="display: inline-flex; align-items: center; justify-content: center;">Cancel</a>
        </div>
    </form>
</div>

</div> <!-- main-content -->
</div> <!-- dashboard-layout -->

<script>
// Auto-generate slug from name if creating
const nameInput = document.getElementById('name');
const slugInput = document.getElementById('slug');
<?php if (!isset($record)): ?>
nameInput.addEventListener('input', function() {
    slugInput.value = nameInput.value
        .toLowerCase()
        .replace(/[^a-z0-9_]+/g, '_')
        .replace(/^_+|_+$/g, '');
});
<?php endif; ?>
</script>
</body>
</html>
