<x-app-layout>
    {{-- Hero Section Example - Copy this pattern for all modules --}}
    <div class="bg-gradient-to-r from-green-600 to-green-700 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            
            {{-- Module Title and Description --}}
            <div class="mb-6">
                <h1 class="text-3xl font-bold text-white mb-2">
                    <i class="fas fa-box mr-3"></i>
                    Sample Module
                </h1>
                <p class="text-green-100 text-lg">
                    This is an example of the standardized hero section used across all modules
                </p>
            </div>

            {{-- Navigation Tabs --}}
            <div class="mb-6">
                <div class="border-b border-green-500">
                    <nav class="-mb-px flex space-x-8" aria-label="Module Navigation">
                        {{-- Active Tab --}}
                        <a href="#" 
                           class="border-b-2 border-white text-white px-1 py-4 text-sm font-medium">
                            <i class="fas fa-list mr-2"></i>
                            All Items
                        </a>
                        
                        {{-- Inactive Tabs with Permission Check --}}
                        @can('create items')
                            <a href="#" 
                               class="border-b-2 border-transparent text-green-100 hover:text-white hover:border-white px-1 py-4 text-sm font-medium transition">
                                <i class="fas fa-plus mr-2"></i>
                                Create New
                            </a>
                        @endcan
                        
                        @can('view reports')
                            <a href="#" 
                               class="border-b-2 border-transparent text-green-100 hover:text-white hover:border-white px-1 py-4 text-sm font-medium transition">
                                <i class="fas fa-chart-bar mr-2"></i>
                                Reports
                            </a>
                        @endcan
                        
                        @can('manage settings')
                            <a href="#" 
                               class="border-b-2 border-transparent text-green-100 hover:text-white hover:border-white px-1 py-4 text-sm font-medium transition">
                                <i class="fas fa-cog mr-2"></i>
                                Settings
                            </a>
                        @endcan
                    </nav>
                </div>
            </div>

            {{-- Statistics Cards (Role-Based) --}}
            @can('view statistics')
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    {{-- Stat Card 1 --}}
                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20 hover:bg-white/20 transition">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-green-100 text-sm font-medium">Total Items</p>
                                <p class="text-3xl font-bold text-white mt-1">1,234</p>
                                <p class="text-green-200 text-xs mt-1">
                                    <i class="fas fa-arrow-up mr-1"></i>
                                    12% from last month
                                </p>
                            </div>
                            <i class="fas fa-box text-4xl text-white/50"></i>
                        </div>
                    </div>

                    {{-- Stat Card 2 --}}
                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20 hover:bg-white/20 transition">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-green-100 text-sm font-medium">Active Users</p>
                                <p class="text-3xl font-bold text-white mt-1">567</p>
                                <p class="text-green-200 text-xs mt-1">
                                    <i class="fas fa-arrow-up mr-1"></i>
                                    8% from last month
                                </p>
                            </div>
                            <i class="fas fa-users text-4xl text-white/50"></i>
                        </div>
                    </div>

                    {{-- Stat Card 3 --}}
                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20 hover:bg-white/20 transition">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-green-100 text-sm font-medium">Pending</p>
                                <p class="text-3xl font-bold text-white mt-1">89</p>
                                <p class="text-green-200 text-xs mt-1">
                                    <i class="fas fa-minus mr-1"></i>
                                    No change
                                </p>
                            </div>
                            <i class="fas fa-clock text-4xl text-white/50"></i>
                        </div>
                    </div>

                    {{-- Stat Card 4 --}}
                    <div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 border border-white/20 hover:bg-white/20 transition">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-green-100 text-sm font-medium">Completed</p>
                                <p class="text-3xl font-bold text-white mt-1">2,345</p>
                                <p class="text-green-200 text-xs mt-1">
                                    <i class="fas fa-arrow-up mr-1"></i>
                                    15% from last month
                                </p>
                            </div>
                            <i class="fas fa-check-circle text-4xl text-white/50"></i>
                        </div>
                    </div>
                </div>
            @endcan

            {{-- Advisory/Alert Messages (Optional) --}}
            <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg p-4 mb-4">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-white text-xl mr-3 mt-1"></i>
                    <div class="text-white">
                        <p class="font-semibold mb-1">Important Notice</p>
                        <p class="text-sm text-green-100">
                            This is an example of an advisory message. Use this area to display important information, 
                            tips, or warnings relevant to the current module.
                        </p>
                    </div>
                </div>
            </div>

            {{-- Action Buttons --}}
            <div class="flex flex-wrap gap-3">
                @can('export data')
                    <button class="px-4 py-2 bg-white text-green-700 rounded-lg hover:bg-green-50 transition font-medium shadow-lg">
                        <i class="fas fa-download mr-2"></i>
                        Export Data
                    </button>
                @endcan
                
                @can('import data')
                    <button class="px-4 py-2 bg-white/10 text-white border border-white/30 rounded-lg hover:bg-white/20 transition font-medium">
                        <i class="fas fa-upload mr-2"></i>
                        Import Data
                    </button>
                @endcan
                
                @can('refresh data')
                    <button class="px-4 py-2 bg-white/10 text-white border border-white/30 rounded-lg hover:bg-white/20 transition font-medium">
                        <i class="fas fa-sync-alt mr-2"></i>
                        Refresh
                    </button>
                @endcan
            </div>

        </div>
    </div>

    {{-- Main Content Area --}}
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h2 class="text-2xl font-bold mb-4">Module Content Area</h2>
                    <p class="text-gray-600 mb-4">
                        This is where your module's main content goes (tables, forms, cards, etc.).
                        The hero section above provides consistent navigation and context for all modules.
                    </p>
                    
                    {{-- Example Content --}}
                    <div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
                        <h3 class="text-lg font-semibold mb-3">Hero Section Features:</h3>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Full-width design</strong> - Spans from sidebar edge to viewport edge</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Green color scheme</strong> - Default fallback with gradient background</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Module title and description</strong> - Clear identification of current module</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Navigation tabs</strong> - Quick access to module actions</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Statistics cards</strong> - Role-based controlled metrics</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Advisory messages</strong> - Important notices and tips</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Action buttons</strong> - Common module actions with permission checks</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Responsive design</strong> - Works on all screen sizes</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-600 mr-3 mt-1"></i>
                                <span><strong>Copy-paste pattern</strong> - No component import needed, just copy and customize</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
