{% extends 'admin/base_site.html' %}
{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}
{% block nav_roles %}active{% endblock %}

{% block topbar_actions %}
<a href="{% url 'admin_roles:role_list' %}" class="btn btn-outline btn-sm">&larr; Back to Roles</a>
{% endblock %}


{% block content %}
<div class="panel-form-wide">
  <form method="post">
    {% csrf_token %}
    <div class="card mb-3">
      <div class="card-body">
        <div class="form-group mb-0">
          <label class="form-label">Role Name *</label>
          <input type="text" name="name" value="{{ group.name|default:'' }}" class="form-input" required>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="card-body">
        <p class="panel-section-title mb-1">Permissions</p>
        <p class="text-sm text-muted mb-3">Select model-level permissions. Grouped by app.</p>
        {% regroup all_perms by content_type.app_label as perm_groups %}
        {% for app_group in perm_groups %}
        <div class="perm-section">
          <div class="perm-section-head">{{ app_group.grouper }}</div>
          <div class="perm-grid">
            {% for perm in app_group.list %}
            <label class="perm-row">
              <input type="checkbox" name="permissions" value="{{ perm.pk }}" class="perm-cb" data-pk="{{ perm.pk }}">
              {{ perm.codename }}
            </label>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    <div class="flex gap-2">
      <button type="submit" class="btn btn-gradient">{{ action }} Role</button>
      <a href="{% url 'admin_roles:role_list' %}" class="btn btn-outline">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}

{% block extra_js %}
<script id="selected-perms-data" type="application/json">{{ selected_perm_ids|safe }}</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var selected = JSON.parse(document.getElementById('selected-perms-data').textContent || '[]');
  document.querySelectorAll('.perm-cb').forEach(function (cb) {
    cb.checked = selected.indexOf(parseInt(cb.dataset.pk)) !== -1;
  });
});
</script>
{% endblock %}