{{--
    Copy Button Component - AdminLTE style
    Small inline button to copy text to clipboard
    
    Usage:
    <x-proxmox::ui.copy-button :value="$text" />
--}}

@props([
    'value',
])

<style>
    .copy-btn-lte {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 1.25rem;
        height: 1.25rem;
        padding: 0;
        background: transparent;
        border: none;
        color: #adb5bd;
        cursor: pointer;
        transition: color var(--lte-transition-speed, 0.3s) ease;
    }
    .copy-btn-lte:hover {
        color: var(--lte-primary, #0d6efd);
    }
    .copy-btn-lte svg {
        width: 1rem;
        height: 1rem;
        position: absolute;
    }
    .copy-btn-lte-success {
        color: var(--lte-success, #198754);
    }
    .dark .copy-btn-lte {
        color: #6b7280;
    }
    .dark .copy-btn-lte:hover {
        color: var(--lte-primary, #0d6efd);
    }
</style>

<div 
    x-data="{
        copied: false,
        copyText: @js($value),
        copyToClipboard() {
            navigator.clipboard.writeText(this.copyText);
            this.copied = true;
            setTimeout(() => this.copied = false, 2000);
        }
    }"
    style="display: inline-flex; align-items: center;"
    {{ $attributes }}
>
    <button
        @click="copyToClipboard()"
        type="button"
        class="copy-btn-lte"
        :class="copied ? 'copy-btn-lte-success' : ''"
        title="Copy to clipboard"
    >
        <x-ri-check-fill x-show="copied" x-transition x-cloak />
        <x-ri-file-copy-line x-show="!copied" x-transition />
    </button>
</div>