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

{% block title %}Kinde Auth Example - Symfony{% endblock %}

{% block content %}
    {% if isAuthenticated %}
        <!-- Authenticated User Dashboard -->
        <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">
                    Welcome to Your Dashboard
                </h2>
                
                <!-- 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">User Information</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">
                                {{ user.given_name ?? 'N/A' }} {{ user.family_name ?? '' }}
                            </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>
                        {% 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-10 h-10 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>
                    <p class="text-sm text-gray-900 dark:text-white">
                        {{ organization.name ?? 'N/A' }}
                    </p>
                </div>
                {% endif %}

                <!-- Actions -->
                <div class="flex space-x-4">
                    <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>
                    <a href="{{ path('kinde_user_info') }}" 
                       class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                        View User Info
                    </a>
                </div>
            </div>
        </div>
    {% else %}
        <!-- Landing Page for Unauthenticated Users -->
        <div class="text-center">
            <div class="max-w-3xl mx-auto">
                <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-6">
                    Welcome to Kinde Auth Example
                </h1>
                <p class="text-xl text-gray-600 dark:text-gray-400 mb-8">
                    A simple Symfony application demonstrating Kinde authentication integration.
                </p>
                
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-8">
                    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
                        Get Started
                    </h2>
                    <p class="text-gray-600 dark:text-gray-400 mb-8">
                        Sign in or create an account to access your personalized dashboard and manage your profile.
                    </p>
                    
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ path('kinde_login') }}" 
                           class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md text-lg font-medium transition duration-200">
                            Sign In
                        </a>
                        <a href="{{ path('kinde_register') }}" 
                           class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-md text-lg font-medium transition duration-200">
                            Create Account
                        </a>
                    </div>
                </div>

                <!-- Features -->
                <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <div class="bg-blue-100 dark:bg-blue-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Secure Authentication</h3>
                        <p class="text-gray-600 dark:text-gray-400">Powered by Kinde's secure authentication system</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="bg-green-100 dark:bg-green-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">User Management</h3>
                        <p class="text-gray-600 dark:text-gray-400">Manage your profile and permissions easily</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="bg-purple-100 dark:bg-purple-900 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Fast & Modern</h3>
                        <p class="text-gray-600 dark:text-gray-400">Built with Symfony and modern web technologies</p>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}