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

{% block title %}User Permissions - {{ user.get_full_name }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        <i class="fas fa-shield-alt text-primary mr-2"></i>
                        User Permissions
                    </h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">
                        Manage permissions for {{ user.get_full_name }} ({{ user.get_role_display }})
                    </p>
                </div>
                <a href="{% url 'users:admin_list' %}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Staff List
                </a>
            </div>
        </div>
    </div>

    <!-- User Info -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center space-x-4">
                <div class="flex-shrink-0 h-16 w-16">
                    {% if user.selfie %}
                        <img class="h-16 w-16 rounded-full" src="{{ user.selfie.url }}" alt="">
                    {% else %}
                        <div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center">
                            <i class="fas fa-user text-gray-600 text-2xl"></i>
                        </div>
                    {% endif %}
                </div>
                <div>
                    <h4 class="text-xl font-medium text-gray-900">{{ user.get_full_name }}</h4>
                    <p class="text-sm text-gray-500">{{ user.email }}</p>
                    <p class="text-sm text-gray-500">{{ user.phone_number }}</p>
                    <div class="mt-2">
                        {% if user.role == 'admin' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                <i class="fas fa-crown mr-1"></i>Admin
                            </span>
                        {% elif user.role == 'team_leader' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                <i class="fas fa-user-tie mr-1"></i>Team Leader
                            </span>
                        {% elif user.role == 'loan_officer' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                <i class="fas fa-handshake mr-1"></i>Loan Officer
                            </span>
                        {% elif user.role == 'secretary' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                <i class="fas fa-user-secret mr-1"></i>Secretary
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="bg-{% if message.tags == 'error' %}red{% else %}green{% endif %}-50 border border-{% if message.tags == 'error' %}red{% else %}green{% endif %}-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-{% if message.tags == 'error' %}exclamation-triangle{% else %}check-circle{% endif %} text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-700">{{ message }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    {% endif %}

    <!-- Permissions Form -->
    <form method="post" class="space-y-6">
        {% csrf_token %}
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h4 class="text-lg font-medium text-gray-900 mb-4">
                    <i class="fas fa-cogs text-primary mr-2"></i>
                    Module Permissions
                </h4>
                <p class="text-sm text-gray-600 mb-6">
                    Configure specific permissions for this user. Changes will override the default permissions for their role.
                </p>

                <div class="space-y-6">
                    {% for module, actions in permissions.items %}
                    <div class="border border-gray-200 rounded-lg p-4">
                        <h5 class="text-md font-medium text-gray-900 mb-3">
                            <i class="fas fa-{{ module_icons|default:module|slice:":1" }} text-primary mr-2"></i>
                            {{ module_names|default:module|title }}
                        </h5>
                        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-5">
                            {% for action, is_allowed in actions.items %}
                            <label class="flex items-center">
                                <input type="checkbox" 
                                       name="perm_{{ module }}_{{ action }}" 
                                       {% if is_allowed %}checked{% endif %}
                                       class="rounded border-gray-300 text-primary focus:ring-primary">
                                <span class="ml-2 text-sm text-gray-700">{{ action_names|default:action|title }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-end space-x-3">
            <a href="{% url 'users:admin_list' %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                Cancel
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <i class="fas fa-save mr-2"></i>
                Save Permissions
            </button>
        </div>
    </form>
</div>

<script>
// Add some JavaScript for better UX
document.addEventListener('DOMContentLoaded', function() {
    // Add confirmation for permission changes
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        if (!confirm('Are you sure you want to update the permissions for this user?')) {
            e.preventDefault();
        }
    });

    // Add visual feedback for permission changes
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const label = this.parentElement;
            if (this.checked) {
                label.classList.add('text-primary');
                label.classList.remove('text-gray-700');
            } else {
                label.classList.remove('text-primary');
                label.classList.add('text-gray-700');
            }
        });
    });
});
</script>
{% endblock %}