{% set shareActionClass = buttonBaseClass ~ ' border-[#3d5369] bg-[#101a27] text-[#dbe3ee] hover:border-[#58728d] hover:bg-[#162233]' %}

<div
    x-cloak
    x-show="canEdit"
    x-data="{
        shareUrl: window.location.href,
        copyState: 'idle',
        copyResetTimeout: null,
        async copyShareUrl() {
            this.copyState = 'idle';

            try {
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    await navigator.clipboard.writeText(this.shareUrl);
                } else {
                    const input = document.createElement('input');
                    input.value = this.shareUrl;
                    input.setAttribute('readonly', '');
                    input.style.position = 'absolute';
                    input.style.left = '-9999px';
                    document.body.appendChild(input);
                    input.select();

                    const copied = document.execCommand('copy');
                    document.body.removeChild(input);

                    if (!copied) {
                        throw new Error('copy_failed');
                    }
                }

                this.copyState = 'success';
            } catch (error) {
                this.copyState = 'error';
            }

            if (this.copyResetTimeout) {
                window.clearTimeout(this.copyResetTimeout);
            }

            this.copyResetTimeout = window.setTimeout(() => {
                this.copyState = 'idle';
            }, 2500);
        }
    }"
    class="flex flex-col gap-[0.45rem] min-[641px]:items-end"
>
    <div class="flex flex-wrap gap-[0.45rem]">
        <button class="{{ shareActionClass }}" type="button" @click="copyShareUrl()">Link kopieren</button>
        <a class="{{ shareActionClass }}" :href="'https://wa.me/?text=' + encodeURIComponent(shareUrl)" target="_blank" rel="noopener noreferrer">WhatsApp</a>
        <a class="{{ shareActionClass }}" :href="'https://t.me/share/url?url=' + encodeURIComponent(shareUrl)" target="_blank" rel="noopener noreferrer">Telegram</a>
    </div>
    <p class="m-0 text-right text-[0.78rem] text-[#9db0c6]" x-show="copyState === 'idle'">Aktuelle Spiel-URL teilen</p>
    <p class="m-0 text-right text-[0.78rem] text-[#9fd8bc]" x-show="copyState === 'success'">Link in die Zwischenablage kopiert.</p>
    <p class="m-0 text-right text-[0.78rem] text-[#ffd6dd]" x-show="copyState === 'error'">Kopieren fehlgeschlagen. Bitte Link direkt aus der Adresszeile teilen.</p>
</div>
