{% extends 'core/base.html' %}
{% block title %}{{ role.name }} Permissions | Killian{% endblock %}
{% block content %}
<style>
    .permission-summary {
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
        margin-bottom:20px;
    }
    .permission-summary > div {
        padding:14px 16px;
        border:1px solid var(--line);
        border-radius:10px;
        background:rgba(255,255,255,.02);
    }
    .permission-section {
        border:1px solid var(--line);
        border-radius:10px;
        margin-bottom:14px;
        overflow:hidden;
    }
    .permission-section summary {
        cursor:pointer;
        padding:14px 16px;
        font-weight:700;
        background:rgba(255,255,255,.02);
    }
    .permission-list {
        padding:8px 16px 16px;
        display:grid;
        gap:4px;
    }
    .permission-item {
        display:flex;
        align-items:flex-start;
        gap:10px;
        padding:10px 0;
        border-bottom:1px solid var(--line);
        cursor:pointer;
    }
    .permission-item:last-child { border-bottom:0; }
    .permission-item input[type="checkbox"] {
        width:18px;
        height:18px;
        margin:2px 0 0;
        flex:0 0 auto;
    }
    .permission-module-grid {
        display:grid;
        grid-template-columns:repeat(7,minmax(105px,1fr));
        gap:8px;
        padding:14px 16px 16px;
    }
    .permission-module-grid label {
        display:flex;
        align-items:center;
        gap:8px;
        padding:9px 10px;
        border:1px solid var(--line);
        border-radius:8px;
        cursor:pointer;
        background:rgba(255,255,255,.015);
    }
    .permission-module-grid input[type="checkbox"] {
        width:17px;
        height:17px;
        margin:0;
        flex:0 0 auto;
    }
    @media (max-width: 1100px) {
        .permission-module-grid { grid-template-columns:repeat(3,minmax(120px,1fr)); }
    }
    @media (max-width: 700px) {
        .permission-summary { grid-template-columns:1fr; }
        .permission-module-grid { grid-template-columns:1fr 1fr; }
    }
</style>

<div class="page-head">
    <div>
        <div class="breadcrumb"><a href="{% url 'permission_list' %}">Permissions</a><span>/</span><span>{{ role.name }}</span></div>
        <h1>{{ role.name }} Permissions</h1>
        <p>Configure what members of this role will be allowed to do in Killian.</p>
    </div>
    <div class="page-head-actions">
        <a class="button secondary" href="{% url 'role_edit' role.pk %}">Edit Role</a>
        <a class="button secondary" href="{% url 'permission_list' %}">Back</a>
    </div>
</div>

<div class="permission-summary">
    <div><div class="muted">Role</div><strong>{{ role.name }}</strong></div>
    <div><div class="muted">Assigned Users</div><strong>{{ assigned_users|length }}</strong></div>
    <div><div class="muted">Granted Permissions</div><strong>{{ granted_count }} / {{ total_permissions }}</strong></div>
</div>

<div style="padding:14px 16px;margin-bottom:20px;border:1px solid #b78a2c;border-radius:10px;background:rgba(183,138,44,.10);line-height:1.55;">
    <strong style="color:#e3b84f;">Permission changes affect every user assigned to this role.</strong>
    <div style="margin-top:6px;">
        Superusers always retain full recovery access regardless of this matrix. Role and Permission Management themselves remain superuser-only and cannot be delegated through these checkboxes.
    </div>
</div>

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

    {% for section in permission_sections %}
        <details class="permission-section" {% if section.kind == 'list' %}open{% endif %}>
            <summary>{{ section.label }}</summary>
            {% if section.kind == 'module' %}
                <div class="permission-module-grid">
                    {% for permission in section.permissions %}
                        <label>
                            <input type="checkbox" name="permissions" value="{{ permission.codename }}" {% if permission.checked %}checked{% endif %}>
                            <span>{{ permission.label }}</span>
                        </label>
                    {% endfor %}
                </div>
            {% else %}
                <div class="permission-list">
                    {% for permission in section.permissions %}
                        <label class="permission-item">
                            <input type="checkbox" name="permissions" value="{{ permission.codename }}" {% if permission.checked %}checked{% endif %}>
                            <span>
                                <strong>{{ permission.label }}</strong>
                                <span class="muted" style="display:block;margin-top:2px;">{{ permission.description }}</span>
                            </span>
                        </label>
                    {% endfor %}
                </div>
            {% endif %}
        </details>
    {% endfor %}

    <div class="form-actions" style="margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;">
        <button type="submit" name="action" value="save">Save permissions</button>
        {% if role.system_key %}
            <button class="button secondary" type="submit" name="action" value="restore_defaults" data-confirm="Restore the original Killian defaults for {{ role.name }}? Current Killian permission selections for this role will be replaced.">Restore built-in defaults</button>
        {% endif %}
        <a class="button secondary" href="{% url 'permission_list' %}">Cancel</a>
    </div>
</form>

{% if assigned_users %}
<section class="module-panel" style="margin-top:24px;">
    <div class="module-panel-head">
        <div>
            <h2>Assigned Users</h2>
            <span>These accounts will use this role's permission set.</span>
        </div>
    </div>
    <div style="padding:12px 22px 22px;">
        {% for item in assigned_users %}
            <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);">
                <div>
                    <strong>{{ item.username }}</strong>
                    <div class="muted">{{ item.get_full_name|default:item.email|default:'No profile details' }}</div>
                </div>
                <a class="button secondary small-button" href="{% url 'user_edit' item.pk %}">Edit user</a>
            </div>
        {% endfor %}
    </div>
</section>
{% endif %}
{% endblock %}