@props(['label', 'value', 'mono' => false])

{{-- A read-only value with a one-click copy button. --}}
<div x-data="{
        copied: false,
        copy() {
            const field = this.$refs.value;
            field.select();

            const done = () => {
                this.copied = true;
                setTimeout(() => (this.copied = false), 1600);
            };

            // execCommand is the fallback for browsers or contexts where the
            // async clipboard API is unavailable.
            if (navigator.clipboard?.writeText) {
                navigator.clipboard.writeText(field.value).then(done, () => {
                    document.execCommand('copy');
                    done();
                });
            } else {
                document.execCommand('copy');
                done();
            }
        },
     }">
    <label class="block text-xs font-medium text-slate-600">{{ $label }}</label>

    <div class="mt-1 flex gap-2">
        <input type="text" readonly x-ref="value" value="{{ $value }}"
               x-on:focus="$event.target.select()"
               class="field-input {{ $mono ? 'font-mono text-xs' : 'text-xs' }}">

        <button type="button" x-on:click="copy()" class="btn-secondary shrink-0">
            <span x-show="! copied">Salin</span>
            <span x-show="copied" x-cloak class="text-emerald-600">Disalin</span>
        </button>
    </div>
</div>