{% extends "base.xhtml" %}
{% from "macros/page-hero.xhtml" import page_hero %}
{% block content %}
<div class="dashboard-page">
  {{ page_hero("Admin", "Categories", "Manage global role categories for the entire project.") }}
  <section class="dashboard-panel dashboard-panel--primary">
    <div class="dashboard-panel-h">
      <div>
        <h2 class="dashboard-panel-title">Global Categories</h2>
        <p class="dashboard-panel-sub">Add, edit, or delete categories. Changes are immediately visible in role forms.</p>
      </div>
    </div>
    <div class="admin-categories__toolbar">
      <input
        id="admin-category-new-name"
        class="admin-categories__name-input"
        type="text"
        placeholder="New category name"
      />
      <button type="button" class="cta-button" id="admin-category-add-btn">Add Category</button>
    </div>
    <div id="admin-categories-list" class="admin-categories__list"></div>
  </section>
</div>
{% endblock %}