{% extends "module_base.html" %}
{% load static %}

{% block title %}Role Details - {{ role.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-user-tag me-2"></i>Role Details: {{ role.name }}
                    </h4>
                    <div class="card-tools">
                        <a href="{% url 'accounts:assign_permissions' role.id %}" class="btn btn-primary btn-sm">
                            <i class="fas fa-key"></i> Permissions
                        </a>
                        <a href="{% url 'accounts:edit_role' role.id %}" class="btn btn-warning btn-sm">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{% url 'accounts:delete_role' role.id %}" class="btn btn-danger btn-sm">
                            <i class="fas fa-trash"></i> Delete
                        </a>
                        <a href="{% url 'accounts:role_list' %}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Basic Information</h5>
                            <table class="table table-borderless">
                                <tr>
                                    <th width="150">Role Name:</th>
                                    <td>{{ role.name }}</td>
                                </tr>
                                <tr>
                                    <th>Description:</th>
                                    <td>{{ role.description|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th>Users Count:</th>
                                    <td>{{ role.userrole_set.count }}</td>
                                </tr>
                                <tr>
                                    <th>Created:</th>
                                    <td>{{ role.created_at|date:"d M Y H:i" }}</td>
                                </tr>
                                <tr>
                                    <th>Last Updated:</th>
                                    <td>{{ role.updated_at|date:"d M Y H:i" }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5>Permissions</h5>
                            <div class="card">
                                <div class="card-body">
                                    {% if role.rolepermission_set.exists %}
                                        <ul class="list-group list-group-flush">
                                            {% for role_perm in role.rolepermission_set.all %}
                                                <li class="list-group-item">
                                                    <strong>{{ role_perm.permission.name }}</strong>
                                                    <br>
                                                    <small class="text-muted">{{ role_perm.permission.module }} | {{ role_perm.permission.description }}</small>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    {% else %}
                                        <p class="text-muted">No permissions assigned</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12">
                            <h5>Assigned Users</h5>
                            <div class="card">
                                <div class="card-body">
                                    {% if role.userrole_set.exists %}
                                        <div class="table-responsive">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>Username</th>
                                                        <th>Full Name</th>
                                                        <th>Email</th>
                                                        <th>Department</th>
                                                        <th>Assigned Date</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for user_role in role.userrole_set.all %}
                                                        <tr>
                                                            <td>{{ user_role.user.username }}</td>
                                                            <td>{{ user_role.user.first_name }} {{ user_role.user.last_name }}</td>
                                                            <td>{{ user_role.user.email }}</td>
                                                            <td>{{ user_role.user.department|default:"-" }}</td>
                                                            <td>{{ user_role.assigned_at|date:"d M Y" }}</td>
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    {% else %}
                                        <p class="text-muted">No users assigned to this role</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}