{{--
    Proxmox UI Component Library Index
    ===================================
    
    This file documents all available UI components for the Proxmox server views.
    All components styled using LucentUI Theme with Tailwind CSS.
    Migrated from AdminLTE to pure Tailwind utility classes.
    
    LucentUI Design Patterns:
    - Card: bg-background border border-neutral rounded-xl shadow-sm
    - Typography: text-sm (14px), font-sans
    - Text Colors: text-primary (headings), text-secondary (muted)
    - Layout: Tailwind flex/grid with gap utilities
    - Transitions: duration-200 for interactions
    - Shadows: shadow-xl for modals
    - Borders: rounded-lg (0.5rem)
    
    LucentUI Color System (Semantic):
    - Primary: bg-primary, text-primary, border-primary
    - Success: bg-success, text-success
    - Error: bg-error, text-error  
    - Warning: bg-warning, text-warning
    - Info: bg-info, text-info
    - Neutral: border-neutral, bg-neutral
    - Background: bg-background, bg-background-secondary
    
    Tailwind Utility Patterns:
    - Cards: bg-background border border-neutral rounded-xl shadow-sm
    - Buttons: px-4 py-2 rounded-lg font-medium transition-all duration-200
    - Alerts: p-4 rounded-lg border
    - Badges: px-2 py-0.5 text-xs font-medium rounded-full
    - Inputs: w-full px-4 py-2 border border-neutral rounded-lg focus:ring-2 focus:ring-primary/25
    - Tables: w-full divide-y divide-neutral
    - Tabs: flex gap-1 border-b border-neutral
    - Dropdowns: absolute z-50 bg-background border border-neutral rounded-lg shadow-lg
    - Modals: fixed inset-0 z-50 flex items-center justify-center
    
    === LAYOUT COMPONENTS ===
    
    1. Card (ui.card)
       @props(['title', 'subtitle', 'icon', 'collapsible', 'collapsed', 'padding', 'noPadding'])
       Container component for grouping related content.
       
    2. Section Header (ui.section-header)
       @props(['title', 'subtitle', 'icon', 'help', 'helpTitle', 'helpContent'])
       Page/section titles with optional help modal.
       
    3. Modal (ui.modal)
       @props(['name', 'title', 'maxWidth', 'closeable'])
       Overlay dialog with Alpine.js transitions.
       
    4. Tabs (ui.tabs)
       @props(['tabs', 'active', 'variant'])
       Tab navigation (default, pills, buttons variants).
       
    5. Tab Panel (ui.tab-panel)
       @props(['name', 'active'])
       Tab content panel with transitions.
       
    6. Help Modal (ui.help-modal)
       @props(['title', 'icon'])
       Question mark trigger that opens info modal with description and details slots.
       
    === DATA DISPLAY COMPONENTS ===
    
    7. Stat Card (ui.stat-card)
       @props(['label', 'value', 'icon', 'trend', 'progress', 'variant'])
       Statistics display with progress bar support.
       
    8. Badge (ui.badge)
       @props(['variant', 'dot', 'icon', 'size', 'rounded'])
       Status/label badges with icons.
       
    9. Progress (ui.progress)
       @props(['value', 'max', 'showLabel', 'size', 'variant', 'animated'])
       Progress bars with auto-coloring thresholds.
       
    10. Server Status (ui.server-status)
        @props(['status', 'size', 'showLabel'])
        VM status indicator (running, stopped, paused, etc).
        
    11. Resource Gauge (ui.resource-gauge)
        @props(['label', 'value', 'max', 'unit', 'icon', 'showPercentage', 'size'])
        Resource usage display with progress bar.
        
    12. Info Row (ui.info-row)
        @props(['label', 'value', 'copyable', 'icon', 'muted'])
        Key-value pair display with copy functionality.
        
    13. Empty State (ui.empty-state)
        @props(['title', 'description', 'icon'])
        Placeholder for empty content areas.
        
    14. Allocation Card (ui.allocation-card)
        @props(['label', 'percent', 'usageSummary', 'entitlementLabel', 'description', 'gradient', 'badge'])
        Resource allocation vs entitlement display with gradient progress bar.
        
    15. Network Address Card (ui.network-address-card)
        @props(['type', 'ip', 'gateway', 'netmask', 'cidr', 'isPublic', 'isIpv6', 'guestInterface', 'fromGuestAgent'])
        IP address card with gateway, netmask, network tools, and guest agent details.
        
    === TABLE COMPONENTS ===
    
    16. Table (ui.table)
        @props(['striped', 'hoverable', 'compact', 'bordered'])
        Table wrapper with styling options.
        
    17. Table Row (ui.table-row)
        @props(['hoverable', 'clickable', 'selected'])
        Table row with interaction states.
        
    18. Table Header Cell (ui.table-th)
        @props(['sortable', 'sorted', 'direction', 'align'])
        Table header with sorting support.
        
    19. Table Data Cell (ui.table-td)
        @props(['align', 'nowrap'])
        Table cell with alignment options.
        
    === FORM COMPONENTS ===
    
    20. Button (ui.button)
        @props(['variant', 'size', 'icon', 'iconPosition', 'loading', 'disabled', 'full'])
        Multi-variant buttons with loading states.
        
    21. Input (ui.input)
        @props(['label', 'error', 'icon', 'iconPosition', 'hint'])
        Form text input with icon support.
        
    22. Select (ui.select)
        @props(['label', 'error', 'options', 'placeholder', 'icon', 'hint'])
        Form select dropdown.
        
    23. Toggle (ui.toggle)
        @props(['label', 'description', 'disabled'])
        Toggle/switch input.
        
    24. Editable Field (ui.editable-field)
        @props(['label', 'value', 'editing', 'editClick', 'cancelClick', 'saveClick', 'applyClick', 'error'])
        Display field with edit button that opens a modal editor.
        
    === INTERACTIVE COMPONENTS ===
    
    25. Dropdown (ui.dropdown)
        @props(['align', 'width', 'contentClasses'])
        Dropdown menu container.
        
    26. Dropdown Item (ui.dropdown-item)
        @props(['icon', 'danger', 'disabled'])
        Dropdown menu item.
        
    27. Dropdown Divider (ui.dropdown-divider)
        Dropdown menu separator.
        
    28. Action Toolbar (ui.action-toolbar)
        @props(['centered'])
        Container for VM action buttons.
        
    29. Action Button (ui.action-button)
        @props(['action', 'icon', 'label', 'variant', 'disabled', 'loading', 'confirm', 'size'])
        VM control action button.
        
    30. Icon Picker (ui.icon-picker)
        @props(['icons', 'categories', 'selected'])
        Modal-based icon selection.
        
    31. Tooltip (ui.tooltip)
        @props(['text', 'position'])
        Hover tooltip.
        
    32. Confirm Dialog (ui.confirm-dialog)
        @props(['title', 'message', 'confirmLabel', 'cancelLabel', 'variant', 'open'])
        Confirmation modal for dangerous actions.
        
    33. Copy Button (ui.copy-button)
        @props(['value'])
        Small inline button to copy text to clipboard.
        
    34. Copyable (ui.copyable)
        @props(['label', 'value', 'masked'])
        Text field with copy to clipboard and optional masking.
        
    === FEEDBACK COMPONENTS ===
    
    35. Alert (ui.alert)
        @props(['variant', 'title', 'dismissible', 'icon'])
        Alert/notification messages.
        
    36. Spinner (ui.spinner)
        @props(['size', 'color'])
        Loading spinner animation.
        
    37. Notice Banner (ui.notice-banner)
        @props(['title', 'variant', 'collapsible', 'storageKey', 'icon', 'showCondition'])
        Collapsible notice/alert banner with localStorage persistence.
        
    === USAGE EXAMPLES ===
    
    -- Server Status Badge --
    <x-proxmox::ui.server-status status="running" showLabel />
    
    -- Resource Usage --
    <x-proxmox::ui.resource-gauge 
        label="Memory" 
        :value="2048" 
        :max="4096" 
        unit="MB" 
        icon="ri-ram-line" 
    />
    
    -- Allocation Card --
    <x-proxmox::ui.allocation-card
        label="CPU Allocation"
        :percent="45"
        usage-summary="1.8 / 4 vCPU"
        entitlement-label="4 vCPU entitlement"
        description="Live hypervisor usage."
        :badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
    />
    
    -- Action Toolbar --
    <x-proxmox::ui.action-toolbar>
        <x-proxmox::ui.action-button 
            wire:click="startServer" 
            icon="ri-play-fill" 
            label="Start" 
            variant="success"
        />
        <x-proxmox::ui.action-button 
            wire:click="stopServer" 
            icon="ri-stop-fill" 
            label="Stop" 
            variant="danger"
            confirm="Are you sure you want to stop this server?"
        />
    </x-proxmox::ui.action-toolbar>
    
    -- Card with Stats --
    <x-proxmox::ui.card title="Server Resources" icon="ri-server-line">
        <div class="grid grid-cols-2 gap-4">
            <x-proxmox::ui.stat-card label="CPU Usage" value="45%" icon="ri-cpu-line" :progress="45" />
            <x-proxmox::ui.stat-card label="Memory" value="2GB/4GB" icon="ri-ram-line" :progress="50" />
        </div>
    </x-proxmox::ui.card>
    
    -- Notice Banner --
    <x-proxmox::ui.notice-banner 
        title="Important Notice"
        variant="warning"
        :collapsible="true"
        storage-key="my-notice-collapsed"
    >
        <p class="text-xs text-base/70">Your notice content here...</p>
    </x-proxmox::ui.notice-banner>
    
    -- Help Modal --
    <x-proxmox::ui.help-modal title="Feature Help" icon="ri-server-line">
        <x-slot:description>
            Brief description of the feature.
        </x-slot:description>
        <x-slot:details>
            <p><span class="font-semibold">Item:</span> Detailed explanation...</p>
        </x-slot:details>
    </x-proxmox::ui.help-modal>
    
    -- Copyable Field --
    <x-proxmox::ui.copyable label="IP Address" value="192.168.1.1" />
    <x-proxmox::ui.copyable label="Password" value="secret123" :masked="true" />
--}}