{% extends "admin/_base.html" %}
{% block content %}
<div class="rio-form-shell">
<header class="rio-page-header">
<nav class="rio-breadcrumbs">
<a href="/admin">Home</a> · <a href="/admin/groups">Groups</a> · <span>{{ name }}</span>
</nav>
<h1>Edit group #{{ group_id }}</h1>
</header>
{% if errors %}
<div class="rio-flash rio-flash--error" role="alert">
<ul>{% for e in errors %}<li>{{ e }}</li>{% endfor %}</ul>
</div>
{% endif %}
<form method="post" action="/admin/groups/{{ group_id }}/edit" class="rio-form">
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
{% for section in sections %}
<fieldset class="rio-fieldset">
{% if section.title %}<legend>{{ section.title }}</legend>{% endif %}
<div class="rio-fieldset-grid">
{% for field in section.fields %}{% include "admin/includes/_form_field.html" %}{% endfor %}
</div>
</fieldset>
{% endfor %}
<fieldset class="rio-fieldset">
<legend>Permissions</legend>
{% if matrix.rows or matrix.extras %}
{% if matrix.rows %}
<table class="rio-perm-matrix">
<thead>
<tr>
<th class="rio-perm-matrix__model">Model</th>
{% for col in matrix.columns %}
<th class="rio-perm-matrix__col">{{ col|capitalize }}</th>
{% endfor %}
<th class="rio-perm-matrix__row-toggle" aria-label="Row toggle">All</th>
</tr>
</thead>
<tbody>
{% for row in matrix.rows %}
<tr data-rio-perm-row>
<th class="rio-perm-matrix__model">{{ row.label }}</th>
{% for cell in row.cells %}
<td class="rio-perm-matrix__cell">
{% if cell %}
<label class="rio-perm-cell" title="{{ cell.name }}">
<input type="checkbox" name="perm_{{ cell.id }}" value="on" data-rio-perm-checkbox{% if cell.checked %} checked{% endif %}>
<span class="rio-perm-cell__sr">{{ cell.name }}</span>
</label>
{% else %}
<span class="rio-perm-na" aria-hidden="true">—</span>
{% endif %}
</td>
{% endfor %}
<td class="rio-perm-matrix__cell">
<button type="button" class="rio-perm-row-all" data-rio-perm-row-all>All</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% if matrix.extras %}
<details class="rio-perm-extras">
<summary>Other permissions ({{ matrix.extras|length }})</summary>
<ul class="rio-checkbox-list">
{% for cell in matrix.extras %}
<li>
<label class="rio-checkbox">
<input type="checkbox" name="perm_{{ cell.id }}" value="on"{% if cell.checked %} checked{% endif %}>
<code>{{ cell.name }}</code>
</label>
</li>
{% endfor %}
</ul>
</details>
{% endif %}
{% else %}
<p class="rio-meta">No permissions registered yet. Permissions are seeded automatically by <code>Admin::seed_permissions</code>.</p>
{% endif %}
</fieldset>
<script>
(function () {
document.querySelectorAll('[data-rio-perm-row-all]').forEach(function (btn) {
btn.addEventListener('click', function () {
var row = btn.closest('[data-rio-perm-row]');
if (!row) return;
var boxes = row.querySelectorAll('[data-rio-perm-checkbox]');
var allOn = Array.prototype.every.call(boxes, function (b) { return b.checked; });
boxes.forEach(function (b) { b.checked = !allOn; });
});
});
})();
</script>
<div class="rio-form-actions">
<button type="submit" class="rio-button rio-button--primary">Save changes</button>
<span class="rio-form-actions-spacer" aria-hidden="true"></span>
<a href="/admin/groups/{{ group_id }}/delete" class="rio-button rio-button--danger-ghost">{{ icon("trash", class="rio-icon") }} Delete group</a>
<a href="/admin/groups" class="rio-button rio-button--ghost">Back to groups</a>
</div>
</form>
</div>
{% endblock %}