<swp-card>
    <swp-card-header>
        <swp-card-title>
            <i class="ph ph-link"></i>
            <span localize="onlineBooking.url.title">Booking URL</span>
        </swp-card-title>
    </swp-card-header>
    <swp-card-content>
        <swp-url-field>
            <input type="text" value="https://book.plantempus.dk/salonbeauty" readonly id="booking-url">
            <swp-url-copy title="Kopier link" onclick="copyBookingUrl()">
                <i class="ph ph-copy"></i>
            </swp-url-copy>
        </swp-url-field>
        <swp-url-actions>
            <swp-btn class="secondary sm" onclick="window.open(document.getElementById('booking-url').value, '_blank')">
                <i class="ph ph-arrow-square-out"></i>
                <span localize="onlineBooking.url.open">Åbn i ny fane</span>
            </swp-btn>
        </swp-url-actions>
    </swp-card-content>
</swp-card>

<script>
function copyBookingUrl() {
    const input = document.getElementById('booking-url');
    navigator.clipboard.writeText(input.value).then(() => {
        // Could show a toast notification here
    });
}
</script>
