{% extends 'core/base.html' %}
{% block title %}Role Management | Killian{% endblock %}
{% block content %}
<div class="page-head">
    <div>
        <div class="breadcrumb"><a href="{% url 'administration' %}">Administration</a><span>/</span><span>Roles</span></div>
        <h1>Role Management</h1>
        <p>Create and manage Killian roles. Each role is linked to a Django Group and has an independently managed Killian permission set.</p>
    </div>
    <div class="page-head-actions">
        <a class="button" href="{% url 'role_create' %}">New role</a>
        <a class="button secondary" href="{% url 'permission_list' %}">Permissions</a>
        <a class="button secondary" href="{% url 'user_list' %}">Users</a>
        <a class="button secondary" href="{% url 'administration' %}">Administration</a>
    </div>
</div>

<section class="module-panel">
    <div class="module-panel-head">
        <div>
            <h2>Roles</h2>
            <span>Built-in roles are protected; custom roles can be renamed or deleted after all users are reassigned.</span>
        </div>
    </div>

    <div style="padding:0 22px 22px;">
        <div style="display:grid;grid-template-columns:minmax(160px,1fr) minmax(260px,2fr) 120px 130px 280px;gap:16px;padding:14px 12px;border-bottom:1px solid var(--line);font-weight:700;" class="muted">
            <span>Role</span>
            <span>Description</span>
            <span>Users</span>
            <span>Type</span>
            <span>Actions</span>
        </div>
        {% for role in roles %}
            <div style="display:grid;grid-template-columns:minmax(160px,1fr) minmax(260px,2fr) 120px 130px 280px;gap:16px;align-items:center;padding:16px 12px;border-bottom:1px solid var(--line);">
                <div><strong>{{ role.name }}</strong></div>
                <div class="muted">{{ role.description|default:'No description' }}</div>
                <div>{{ role.user_count }}</div>
                <div>
                    {% if role.is_protected %}
                        <span class="status-good">Built-in</span>
                    {% else %}
                        <span class="muted">Custom</span>
                    {% endif %}
                </div>
                <div style="display:flex;gap:8px;flex-wrap:wrap;">
                    <a class="button secondary small-button" href="{% url 'role_edit' role.pk %}">Edit</a>
                    <a class="button secondary small-button" href="{% url 'permission_edit' role.pk %}">Permissions</a>
                    {% if not role.is_protected %}
                        <a class="button danger small-button" href="{% url 'role_delete' role.pk %}">Delete</a>
                    {% endif %}
                </div>
            </div>
        {% empty %}
            <div class="empty-state">No roles found.</div>
        {% endfor %}
    </div>
</section>

<section class="module-panel" style="margin-top:22px;">
    <div style="padding:18px 22px;line-height:1.55;">
        <strong>Permission Management enabled</strong>
        <div class="muted" style="margin-top:6px;">
            Each role's Killian permissions are stored on its linked Django Group. Use Permission Management to configure application capabilities without changing role identity or user assignments.
        </div>
    </div>
</section>
{% endblock %}