{% extends "layouts/dashboard.html" %}
{% load i18n %}
{% block title %}Permissions: {{ group.name }} — IILMP{% endblock %}
{% block breadcrumbs %}
<nav class="flex flex-wrap items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="opacity-60">Access control</span>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <a href="{% url 'core:role_permissions_list' %}" class="hover:text-ruforum-primary transition-colors">Role permissions</a>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="max-w-[min(100%,16rem)] truncate text-ruforum-text" title="{{ group.name }}">{{ group.name }}</span>
</nav>
{% endblock %}
{% block content %}

{% with selected_count=selected_ids|length %}
{% blocktranslate count counter=selected_count asvar role_perm_subtitle %}{{ counter }} permission currently granted to this role.{% plural %}{{ counter }} permissions currently granted to this role.{% endblocktranslate %}
<header class="mb-8 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
  {% include "components/page_header_text.html" with eyebrow="Edit role permissions" title=group.name subtitle=role_perm_subtitle size="lg" with_glyph=False %}
  <a href="{% url 'core:role_permissions_list' %}" class="btn-secondary shrink-0">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    Back to roles
  </a>
</header>
{% endwith %}

{% include "components/rims_page_intro.html" with eyebrow="Edit role permissions" heading="Tick what every member of this role should be able to do." description="Saving replaces the group's full permission set. Existing accounts in this role pick up the change on their next request — no re-login required. Use the search box to narrow the list across all installed apps." %}

{% if permission_groups %}
<form method="post">
  {% csrf_token %}

  <div class="card overflow-hidden">
    <div class="card-toolbar flex flex-wrap items-center gap-3">
      <label class="search-field search-field--sm flex-1 min-w-[16rem]">
        <svg class="search-field__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
        </svg>
        <input type="search" id="role-perm-filter" autocomplete="off" placeholder="Search by codename, model, or description…" inputmode="search" class="w-full">
      </label>
      <p id="role-perm-filter-empty" class="hidden font-meta text-xs text-ruforum-text-muted" role="status" aria-live="polite">No permissions match.</p>
      <div class="ml-auto flex shrink-0 items-center gap-2">
        <a href="{% url 'core:role_permissions_list' %}" class="btn-secondary btn-sm">Cancel</a>
        <button type="submit" class="btn-primary btn-sm">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
          Save permissions
        </button>
      </div>
    </div>

    <div class="grid md:grid-cols-[14rem_1fr]">
      <nav class="perm-app-nav max-h-[16rem] overflow-y-auto border-b border-ruforum-border md:max-h-[36rem] md:border-b-0 md:border-r" aria-label="Permission groups">
        {% for grp in permission_groups %}
        <button type="button"
                class="perm-app-nav-item flex w-full items-center justify-between gap-3 border-b border-ruforum-border px-4 py-3 text-left last:border-b-0 hover:bg-ruforum-warm-hover focus:outline-none focus-visible:bg-ruforum-warm-hover {% if grp.app_label == default_app_label %}bg-ruforum-warm-hover font-semibold text-ruforum-primary{% endif %}"
                data-app-nav="{{ grp.app_label }}"
                aria-current="{% if grp.app_label == default_app_label %}true{% else %}false{% endif %}">
          <span class="truncate font-meta text-xs font-semibold uppercase tracking-wide">{{ grp.app_label }}</span>
          <span class="shrink-0 font-meta text-[10px] font-semibold tabular-nums text-ruforum-text-muted">
            {% if grp.granted_count %}<span class="text-ruforum-primary">{{ grp.granted_count }}</span>/{% endif %}{{ grp.total_count }}
          </span>
        </button>
        {% endfor %}
      </nav>

      <div class="min-w-0 md:max-h-[36rem] md:overflow-y-auto">
        {% for grp in permission_groups %}
        <section class="perm-app-panel {% if grp.app_label != default_app_label %}hidden{% endif %}" data-app-panel="{{ grp.app_label }}">
          <header class="perm-app-panel__header sticky top-0 z-[1] hidden items-center justify-between gap-3 border-b border-ruforum-border bg-ruforum-surface-warm/95 px-5 py-3 backdrop-blur">
            <span class="font-meta text-sm font-semibold uppercase tracking-wide text-ruforum-text">{{ grp.app_label }}</span>
            <span class="shrink-0 font-meta text-[10px] font-semibold uppercase tracking-[0.12em] text-ruforum-text-muted tabular-nums">{{ grp.total_count }} in app</span>
          </header>
          <div class="divide-y divide-ruforum-border">
            {% for p in grp.perms %}
            <label class="perm-row flex cursor-pointer items-start gap-3 px-5 py-3.5 hover:bg-ruforum-warm-hover/60" for="perm-{{ p.pk }}" data-perm-haystack="{{ grp.app_label }} {{ p.codename }} {{ p.content_type.app_label }} {{ p.content_type.model }} {{ p.name }}">
              <input type="checkbox" name="perm" value="{{ p.pk }}" id="perm-{{ p.pk }}"
                     class="mt-0.5 h-4 w-4 shrink-0 rounded border-ruforum-border text-ruforum-primary focus:ring-ruforum-primary"
                     {% if p.pk in selected_ids %}checked{% endif %}>
              <span class="min-w-0">
                <span class="block font-mono text-[0.7rem] leading-snug text-ruforum-text sm:text-xs">{{ p.codename }}</span>
                <span class="mt-0.5 block text-xs leading-relaxed text-ruforum-text-muted">{{ p.content_type.app_label }}.{{ p.content_type.model }} — {{ p.name }}</span>
              </span>
            </label>
            {% endfor %}
          </div>
        </section>
        {% endfor %}
      </div>
    </div>
  </div>
</form>
{% else %}
<div class="card overflow-hidden">
  <div class="empty-panel my-0 border-0">
    <p class="empty-panel__title">Nothing to configure.</p>
    <p class="empty-panel__lede">No permissions are installed in this database yet. Run migrations and ensure Django's auth tables are populated before editing role groups.</p>
  </div>
</div>
{% endif %}

{% if permission_groups %}
<script>
(function () {
  var input = document.getElementById("role-perm-filter");
  var emptyMsg = document.getElementById("role-perm-filter-empty");
  var navItems = document.querySelectorAll("[data-app-nav]");
  var panels = document.querySelectorAll("[data-app-panel]");
  if (!navItems.length || !panels.length) return;

  var ACTIVE_NAV_CLASSES = ["bg-ruforum-warm-hover", "font-semibold", "text-ruforum-primary"];
  var defaultNav = document.querySelector('[data-app-nav][aria-current="true"]') || navItems[0];
  var currentApp = defaultNav.getAttribute("data-app-nav");

  function norm(s) { return (s || "").toLowerCase(); }

  function setActiveNav(app) {
    navItems.forEach(function (btn) {
      var isActive = btn.getAttribute("data-app-nav") === app;
      ACTIVE_NAV_CLASSES.forEach(function (c) { btn.classList.toggle(c, isActive); });
      btn.setAttribute("aria-current", isActive ? "true" : "false");
    });
  }

  function showBrowseMode(app) {
    panels.forEach(function (panel) {
      var isCurrent = panel.getAttribute("data-app-panel") === app;
      panel.classList.toggle("hidden", !isCurrent);
      panel.querySelector(".perm-app-panel__header").classList.add("hidden");
      panel.querySelectorAll("[data-perm-haystack]").forEach(function (row) {
        row.classList.remove("hidden");
      });
    });
    setActiveNav(app);
    if (emptyMsg) emptyMsg.classList.add("hidden");
  }

  function showSearchMode(q) {
    var anyVisible = false;
    panels.forEach(function (panel) {
      var rows = panel.querySelectorAll("[data-perm-haystack]");
      var appAny = false;
      rows.forEach(function (row) {
        var show = norm(row.getAttribute("data-perm-haystack")).indexOf(q) !== -1;
        row.classList.toggle("hidden", !show);
        if (show) { appAny = true; anyVisible = true; }
      });
      panel.classList.toggle("hidden", !appAny);
      panel.querySelector(".perm-app-panel__header").classList.toggle("hidden", !appAny);
    });
    navItems.forEach(function (btn) {
      ACTIVE_NAV_CLASSES.forEach(function (c) { btn.classList.remove(c); });
      btn.setAttribute("aria-current", "false");
    });
    if (emptyMsg) emptyMsg.classList.toggle("hidden", anyVisible);
  }

  navItems.forEach(function (btn) {
    btn.addEventListener("click", function () {
      currentApp = btn.getAttribute("data-app-nav");
      if (input) input.value = "";
      showBrowseMode(currentApp);
    });
  });

  if (input) {
    input.addEventListener("input", function () {
      var q = norm(input.value.trim());
      if (q) { showSearchMode(q); } else { showBrowseMode(currentApp); }
    });
    input.addEventListener("search", function () {
      if (!input.value.trim()) showBrowseMode(currentApp);
    });
  }

  showBrowseMode(currentApp);
})();
</script>
{% endif %}

{% endblock %}