{% extends "base.html" %}

{% block content %}
<section class="page-heading">
  <div>
    <p class="eyebrow">Access Control</p>
    <h1>Roles & Permissions</h1>
    <p class="subhead">Define role names and optional descriptions for RBAC.</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" id="add-role" type="button">
      <svg viewBox="0 0 20 0" aria-hidden="true"><path d="M10 4v12M4 10h12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
      <span>Add role</span>
    </button>
  </div>
</section>

<div class="card">
  <table class="role-table" id="role-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
        <th class="text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for role in roles %}
      <tr data-role-id="{{ role.id }}" data-role-name="{{ role.name }}">
        <td>{{ role.name }}</td>
        <td>{{ role.description }}</td>
        <td class="text-right">
          <button class="btn btn-ghost btn-sm btn-danger delete-role" type="button" data-delete-role>Delete</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="modal" id="role-modal">
  <div class="modal-shell">
    <div class="modal-head">
      <h2>Add new role</h2>
      <button class="btn-close" type="button">&times;</button>
    </div>
    <form id="role-form" class="form-stack">
      <label class="field">
        <span class="field-label">Name</span>
        <input class="input" name="name" type="text" required placeholder="e.g. developer">
      </label>
      <label class="field">
        <span class="field-label">Description</span>
        <input class="input" name="description" type="text" placeholder="Optional description">
      </label>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" id="cancel-role">Cancel</button>
        <button class="btn btn-primary" type="submit" id="role-submit">Create role</button>
      </div>
    </form>
  </div>
</div>

<style>
.role-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.role-table th, .role-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.text-right { text-align: right; }
</style>
{% endblock %}