{% extends 'base.html.twig' %}

{% block title %}User Info - Kinde Auth Example{% endblock %}

{% block content %}
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                User Information
            </h2>
            
            {% if user %}
                <!-- User Information -->
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6">
                    <h3 class="text-md font-medium text-gray-900 dark:text-white mb-3">Profile Details</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">First Name</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ user.given_name ?? 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Last Name</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ user.family_name ?? 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Email</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ user.email ?? 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">User ID</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ user.id ?? 'N/A' }}
                            </p>
                        </div>
                        {% if user.picture is defined and user.picture %}
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Profile Picture</p>
                            <img src="{{ user.picture }}" alt="Profile" class="w-16 h-16 rounded-full">
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Permissions -->
                {% if permissions is defined and permissions|length > 0 %}
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6">
                    <h3 class="text-md font-medium text-gray-900 dark:text-white mb-3">Your Permissions</h3>
                    <div class="flex flex-wrap gap-2">
                        {% for permission in permissions %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                {{ permission }}
                            </span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Organization -->
                {% if organization is defined and organization %}
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6">
                    <h3 class="text-md font-medium text-gray-900 dark:text-white mb-3">Organization</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Name</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ organization.name ?? 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">ID</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ organization.id ?? 'N/A' }}
                            </p>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Raw User Data (for debugging) -->
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6">
                    <h3 class="text-md font-medium text-gray-900 dark:text-white mb-3">Raw User Data</h3>
                    <pre class="text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">{{ user|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                </div>

                <!-- Actions -->
                <div class="flex space-x-4">
                    <a href="{{ path('dashboard') }}" 
                       class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                        Back to Dashboard
                    </a>
                    <a href="{{ path('kinde_portal') }}" 
                       class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                        Go to Portal
                    </a>
                </div>
            {% else %}
                <div class="text-red-600 dark:text-red-400">
                    User information not available.
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}