{% extends "tasks/base.html" %}
{% block title %}Roles & Permissions — Staff Panel{% endblock %}
{% block topbar_title %}Roles & Permissions{% endblock %}
{% block topbar_actions %}
<a href="{% url 'task_management:role_create' %}" class="s-btn s-btn-primary s-btn-sm">+ New Role</a>
{% endblock %}
{% block content %}
<div class="s-card s-card-pad">
    <div class="s-card-header">
        <div>
            <div class="s-card-title">Configured Roles ({{ roles|length }})</div>
            <div class="s-card-sub">Create roles, tick permissions, then assign under Team Access.</div>
        </div>
        <a href="{% url 'task_management:staff_access_list' %}" class="s-btn s-btn-outline s-btn-sm">Team Access →</a>
    </div>
    <div class="s-table-wrap">
        <table class="s-table">
            <thead><tr><th>Name</th><th>Description</th><th>Permissions Enabled</th><th style="text-align:right;">Actions</th></tr></thead>
            <tbody>
                {% for r in roles %}
                <tr>
                    <td style="font-weight:600;">{{ r.name }}</td>
                    <td style="font-size:12px;color:var(--s-text2);">{{ r.description|default:"—" }}</td>
                    <td style="max-width:360px;">
                        {% for k,v in r.permissions.items %}{% if v %}<span class="s-badge s-badge-blue" style="margin:2px 3px 2px 0;font-size:9px;">{{ k }}</span>{% endif %}{% empty %}—{% endfor %}
                    </td>
                    <td style="text-align:right;white-space:nowrap;">
                        <a href="{% url 'task_management:role_edit' r.id %}" class="s-btn s-btn-outline s-btn-sm">Edit</a>
                        <form method="post" action="{% url 'task_management:role_delete' r.id %}" style="display:inline;" onsubmit="return confirm('Archive this role?');">
                            {% csrf_token %}
                            <button type="submit" class="s-btn s-btn-outline s-btn-sm" style="color:var(--s-red);">Archive</button>
                        </form>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="4" style="text-align:center;padding:24px;color:var(--s-text3);">No roles yet. <a href="{% url 'task_management:role_create' %}">Create one</a> or run <code>python manage.py seed_roles</code>.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}