{{--
    Proxmox UI Components - Index File
    
    This file documents all available reusable components in the Proxmox views.
    Import components using: <x-proxmox::component-name />
    
    ============================================
    LAYOUT & STRUCTURE
    ============================================
    
    card.blade.php
    ---------------
    Generic card wrapper with consistent styling
    Props: title, subtitle, icon, iconClass, actions, padding, flush, collapsible, collapsed, storageKey
    Slots: default, header, actions, footer
    
    Example:
    <x-proxmox::card title="Server Info" icon="ri-server-line" collapsible>
        Content here
    </x-proxmox::card>
    
    section-header.blade.php
    ------------------------
    Page section headers with title, subtitle, actions
    Props: title, subtitle, icon, iconClass, helpIcon, helpTitle, helpContent, border
    Slots: default, actions, help
    
    Example:
    <x-proxmox::section-header title="Network Configuration" subtitle="Manage network settings" icon="ri-global-line">
        <x-slot:actions>
            <x-proxmox::button>Add Network</x-proxmox::button>
        </x-slot:actions>
    </x-proxmox::section-header>
    
    ============================================
    DATA DISPLAY
    ============================================
    
    stat-card.blade.php
    -------------------
    Statistics display card with icon, value, label
    Props: label, value, icon, iconClass, iconBg, iconColor, trend, trendUp, trendLabel, suffix, prefix, loading, compact, href, clickable
    
    Example:
    <x-proxmox::stat-card 
        label="CPU Usage" 
        value="45" 
        suffix="%" 
        icon="ri-cpu-line"
        :trendUp="true"
        trend="+5%"
        trendLabel="vs last hour"
    />
    
    table.blade.php + table-th.blade.php + table-td.blade.php + table-row.blade.php
    --------------------------------------------------------------------------------
    Styled table components
    
    Example:
    <x-proxmox::table>
        <x-slot:head>
            <x-proxmox::table-th>Name</x-proxmox::table-th>
            <x-proxmox::table-th align="right">Value</x-proxmox::table-th>
        </x-slot:head>
        <x-slot:body>
            <x-proxmox::table-row>
                <x-proxmox::table-td>Item 1</x-proxmox::table-td>
                <x-proxmox::table-td align="right">100</x-proxmox::table-td>
            </x-proxmox::table-row>
        </x-slot:body>
    </x-proxmox::table>
    
    info-list.blade.php + info-row.blade.php
    ----------------------------------------
    Key-value information display
    
    Example:
    <x-proxmox::info-list title="Server Details">
        <x-proxmox::info-row label="IP Address" value="192.168.1.100" copyable mono />
        <x-proxmox::info-row label="Status" icon="ri-checkbox-circle-line">
            <x-proxmox::badge variant="success">Running</x-proxmox::badge>
        </x-proxmox::info-row>
    </x-proxmox::info-list>
    
    progress.blade.php
    ------------------
    Progress bar component
    Props: value, max, size, variant, label, showValue, animated, striped
    
    Example:
    <x-proxmox::progress :value="75" :max="100" variant="auto" label="Disk Usage" showValue />
    
    empty-state.blade.php
    ---------------------
    Empty state placeholder
    Props: icon, iconClass, title, description
    
    Example:
    <x-proxmox::empty-state 
        title="No backups found" 
        description="Create your first backup to get started"
        icon="ri-hard-drive-2-line"
    >
        <x-proxmox::button icon="ri-add-line">Create Backup</x-proxmox::button>
    </x-proxmox::empty-state>
    
    ============================================
    INTERACTIVE ELEMENTS
    ============================================
    
    button.blade.php
    ----------------
    Consistent button styling
    Props: type, variant (primary|secondary|success|danger|warning|info|ghost|link|neutral), size (xs|sm|md|lg|xl), icon, iconPosition, iconClass, loading, disabled, fullWidth, href, outline, rounded
    
    Example:
    <x-proxmox::button variant="primary" icon="ri-play-line">Start Server</x-proxmox::button>
    <x-proxmox::button variant="danger" outline icon="ri-stop-line">Stop</x-proxmox::button>
    
    badge.blade.php
    ---------------
    Status badges
    Props: variant (success|danger|warning|info|primary|secondary|neutral), size, rounded, dot, pulse, icon, iconPosition, removable, outline
    
    Example:
    <x-proxmox::badge variant="success" dot pulse>Running</x-proxmox::badge>
    <x-proxmox::badge variant="danger" icon="ri-error-warning-line">Error</x-proxmox::badge>
    
    modal.blade.php
    ---------------
    Modal dialog component
    Props: name, show, maxWidth, closeable, title, subtitle, icon, iconClass, iconBg, iconColor, blur, centered
    Slots: default, header, footer
    
    Example:
    <x-proxmox::modal name="confirm-delete" title="Confirm Delete" icon="ri-delete-bin-line" iconBg="bg-danger/10" iconColor="text-danger">
        <p>Are you sure you want to delete this item?</p>
        <x-slot:footer>
            <x-proxmox::button variant="neutral" @click="$dispatch('close-modal', 'confirm-delete')">Cancel</x-proxmox::button>
            <x-proxmox::button variant="danger">Delete</x-proxmox::button>
        </x-slot:footer>
    </x-proxmox::modal>
    
    dropdown.blade.php + dropdown-item.blade.php + dropdown-divider.blade.php
    -------------------------------------------------------------------------
    Dropdown menu components
    
    Example:
    <x-proxmox::dropdown align="right">
        <x-slot:trigger>
            <x-proxmox::button variant="neutral" icon="ri-more-2-fill" />
        </x-slot:trigger>
        <x-proxmox::dropdown-item icon="ri-edit-line">Edit</x-proxmox::dropdown-item>
        <x-proxmox::dropdown-item icon="ri-file-copy-line">Duplicate</x-proxmox::dropdown-item>
        <x-proxmox::dropdown-divider />
        <x-proxmox::dropdown-item icon="ri-delete-bin-line" danger>Delete</x-proxmox::dropdown-item>
    </x-proxmox::dropdown>
    
    tabs.blade.php + tab-panel.blade.php
    ------------------------------------
    Tab navigation component
    
    Example:
    <x-proxmox::tabs :items="[
        ['id' => 'general', 'label' => 'General', 'icon' => 'ri-settings-line'],
        ['id' => 'advanced', 'label' => 'Advanced', 'icon' => 'ri-tools-line'],
    ]">
        <x-proxmox::tab-panel id="general">General content</x-proxmox::tab-panel>
        <x-proxmox::tab-panel id="advanced">Advanced content</x-proxmox::tab-panel>
    </x-proxmox::tabs>
    
    input.blade.php
    ---------------
    Form input component
    Props: label, id, name, type, placeholder, hint, error, required, disabled, readonly, prefix, suffix, icon, iconPosition, size
    
    Example:
    <x-proxmox::input label="Hostname" name="hostname" placeholder="Enter hostname" required icon="ri-server-line" />
    
    ============================================
    FEEDBACK
    ============================================
    
    alert.blade.php
    ---------------
    Alert/notification component
    Props: variant (success|danger|warning|info|neutral), title, icon, dismissible, collapsible, collapsed, storageKey, border
    Slots: default, actions
    
    Example:
    <x-proxmox::alert variant="warning" title="Maintenance Notice" collapsible storageKey="maintenance-alert">
        Scheduled maintenance will occur on Sunday at 2:00 AM.
    </x-proxmox::alert>
    
    spinner.blade.php
    -----------------
    Loading spinner
    Props: size, variant
    
    Example:
    <x-proxmox::spinner size="lg" variant="primary" />
    
--}}