{#
  Stale-role banner — shown on the unified /admin/permissions landing when
  the local capability matrix still holds rows for role slugs that are no
  longer active in Auth (deleted / deactivated / renamed upstream).

  Expected context:
    stale_role_slugs : list[str]  — orphan slugs
    cleanup_url      : str        — POST target (e.g. /admin/permissions/cleanup-roles)
    csrf_token       : str        — request.cookies.get('csrftoken', '') from caller
#}
{% if stale_role_slugs %}
<div role="alert" class="alert alert-warning shadow-sm mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <div class="flex-1">
        <p class="font-semibold">Orphan role rows detected</p>
        <p class="text-sm">
            The capability matrix still has rows for
            {{ stale_role_slugs | length }} role{{ 's' if stale_role_slugs | length != 1 else '' }}
            no longer active in Auth:
            {% for slug in stale_role_slugs %}<code class="px-1 rounded bg-base-200">{{ slug }}</code>{% if not loop.last %}, {% endif %}{% endfor %}.
            Clean up to keep permission data consistent.
        </p>
    </div>
    <form method="post" action="{{ cleanup_url }}" class="shrink-0">
        <input type="hidden" name="csrftoken" value="{{ csrf_token }}">
        <button type="submit" class="btn btn-sm btn-warning">Clean up</button>
    </form>
</div>
{% endif %}