{% extends 'base.html' %}
{% load static %}

{% block content %}
<main class="content">
    <div class="container-fluid p-0">

        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">Assign Permissions</h1>
            <br><small>Role: <strong>{{ role.name }}</strong></small>
        </div>

        {% include 'partials/_messages.html' %}

        <form action="{% url 'assign-role-permissions' role.id %}" method="post">
            {% csrf_token %}

            {% for module, permission_list in grouped_permissions.items %}
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ module.name }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        {% for permission in permission_list %}
                        <div class="col-md-4 mb-2">
                            <div class="form-check">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    name="permissions"
                                    value="{{ permission.id }}"
                                    id="permission_{{ permission.id }}"
                                    {% if permission.id in assigned_ids %}checked{% endif %}
                                >
                                <label class="form-check-label" for="permission_{{ permission.id }}">
                                    {{ permission.name }}<br>
                                    <small class="text-muted">{{ permission.code }}</small>
                                </label>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}

            <div class="card">
                <div class="card-body text-sm-end">
                    <a href="{% url 'role-details' %}" class="btn btn-secondary">Back</a>
                    <button type="submit" class="btn btn-primary">Save Permissions</button>
                </div>
            </div>
        </form>

    </div>
</main>
{% endblock %}