{{--
    Proxmox UI Component Library Index
    ===================================
    
    This file documents all available UI components for the Proxmox server views.
    All components styled using AdminLTE CSS Framework patterns from:
    https://github.com/ColorlibHQ/AdminLTE/releases (v4 - Bootstrap 5)
    
    AdminLTE Design Patterns:
    - Card: card-lte with box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2)
    - Typography: font-size .875rem (14px), font-family "Source Sans Pro"
    - Text Colors: #212529 (headings), #6c757d (muted), #495057 (body)
    - Layout: Bootstrap grid with gap utilities
    - Transitions: .3s for all interactions (--lte-transition-speed)
    - Shadows: 0 .5rem 1rem rgba(0,0,0,.15) for modals
    - Borders: border-radius .375rem (--lte-border-radius)
    
    AdminLTE Color System (Bootstrap 5):
    - Primary: #0d6efd (blue)
    - Secondary: #6c757d (gray)
    - Success: #198754 (green)
    - Danger: #dc3545 (red)
    - Warning: #ffc107 (yellow)
    - Info: #0dcaf0 (cyan)
    
    CSS Classes:
    - .card-lte: Card container
    - .btn-lte-primary, .btn-lte-secondary, etc.: Buttons
    - .alert-lte-info, .alert-lte-success, etc.: Alerts
    - .badge-lte-primary, .badge-lte-success, etc.: Badges
    - .form-control-lte: Form inputs
    - .form-select-lte: Select dropdowns
    - .toggle-lte: Toggle switches
    - .table-lte: Tables
    - .tabs-lte: Tab navigation
    - .dropdown-lte: Dropdowns
    - .modal-lte: Modals
    
    === 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" />
--}}