likwid/frontend/src/pages/admin/roles.astro

---
export const prerender = false;
import Layout from '../../layouts/Layout.astro';
import { API_BASE } from '../../lib/api';
---

<Layout title="Role Management - Admin">
  <div class="admin-container">
    <nav class="admin-nav">
      <a href="/admin/settings">Settings</a>
      <a href="/admin/plugins">Plugins</a>
      <a href="/admin/voting">Voting Methods</a>
      <a href="/admin/roles" class="active">Roles</a>
    </nav>

    <main class="admin-content">
      <header class="page-header">
        <h1>Role Management</h1>
        <p class="subtitle">Manage platform roles and permissions</p>
      </header>

      <section class="roles-section">
        <h2>Platform Roles</h2>
        <div class="roles-list" id="platform-roles">
          <p class="loading">Loading roles...</p>
        </div>
      </section>

      <section class="permissions-section">
        <h2>Available Permissions</h2>
        <div class="permissions-grid" id="permissions-list">
          <p class="loading">Loading permissions...</p>
        </div>
      </section>
    </main>
  </div>
</Layout>

<style>
  .admin-container {
    display: flex;
    min-height: calc(100vh - 60px);
  }

  .admin-nav {
    width: 200px;
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-right: 1px solid var(--border-color);
  }

  .admin-nav a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .admin-nav a:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  .admin-nav a.active {
    background: var(--accent-color);
    color: white;
  }

  .admin-content {
    flex: 1;
    padding: 2rem;
    max-width: 1000px;
  }

  .page-header {
    margin-bottom: 2rem;
  }

  .page-header h1 {
    margin: 0;
  }

  .subtitle {
    color: var(--text-secondary);
    margin-top: 0.5rem;
  }

  .roles-section, .permissions-section {
    margin-bottom: 3rem;
  }

  .roles-section h2, .permissions-section h2 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
  }

  .roles-list {
    display: grid;
    gap: 1rem;
  }

  .role-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
  }

  .role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .role-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .role-name h3 {
    margin: 0;
    font-size: 1.1rem;
  }

  .role-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .role-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: #6c757d;
    color: white;
  }

  .role-badge.system {
    background: var(--accent-color);
  }

  .role-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
  }

  .role-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .perm-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    color: var(--text-secondary);
  }

  .permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
  }

  .permission-category {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
  }

  .permission-category h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    text-transform: capitalize;
    color: var(--accent-color);
  }

  .permission-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .permission-item {
    font-size: 0.85rem;
  }

  .permission-item code {
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  .loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
  }
</style>

<script define:vars={{ API_BASE }}>
  async function loadData() {
    await Promise.all([loadRoles(), loadPermissions()]);
  }

  async function loadRoles() {
    const container = document.getElementById('platform-roles');
    
    try {
      const res = await fetch(`${API_BASE}/api/roles`);
      const roles = await res.json();

      container.innerHTML = roles.map(r => `
        <div class="role-card">
          <div class="role-header">
            <div class="role-name">
              ${r.color ? `<span class="role-color" style="background: ${r.color}"></span>` : ''}
              <h3>${r.display_name}</h3>
              ${r.is_system ? '<span class="role-badge system">System</span>' : ''}
              ${r.is_default ? '<span class="role-badge">Default</span>' : ''}
            </div>
            <span style="color: var(--text-secondary); font-size: 0.85rem">Priority: ${r.priority}</span>
          </div>
          <p class="role-description">${r.description || 'No description'}</p>
          <div class="role-permissions">
            ${(r.permissions || []).slice(0, 10).map(p => `<span class="perm-tag">${p}</span>`).join('')}
            ${(r.permissions || []).length > 10 ? `<span class="perm-tag">+${r.permissions.length - 10} more</span>` : ''}
          </div>
        </div>
      `).join('');
    } catch (e) {
      container.innerHTML = '<p class="loading">Failed to load roles</p>';
    }
  }

  async function loadPermissions() {
    const container = document.getElementById('permissions-list');
    
    try {
      const res = await fetch(`${API_BASE}/api/permissions`);
      const permissions = await res.json();

      const byCategory = {};
      permissions.forEach(p => {
        if (!byCategory[p.category]) byCategory[p.category] = [];
        byCategory[p.category].push(p);
      });

      container.innerHTML = Object.entries(byCategory).map(([cat, perms]) => `
        <div class="permission-category">
          <h4>${cat}</h4>
          <div class="permission-list">
            ${perms.map(p => `
              <div class="permission-item">
                <code>${p.name}</code>
                ${p.description ? `<br><small>${p.description}</small>` : ''}
              </div>
            `).join('')}
          </div>
        </div>
      `).join('');
    } catch (e) {
      container.innerHTML = '<p class="loading">Failed to load permissions</p>';
    }
  }

  loadData();
</script>