<div class="w-full" x-data>
    <div class="mb-20">
        <div class="flex flex-row items-center space-y-5 sm:space-y-0 bg-secondary px-5 sm:px-10 py-10 shadow-sm rounded-lg">
            <div class="flex-grow">
                <h2 class="font-semibold text-base text-secondary"><?php _e('General Affiliate Link', 'salesloo'); ?></h2>
                <div class="block overflow-hidden">
                    <input class="w-full p-0 pr-5 text-blue-400 border-none text-sm italic" type="text" readonly value="<?php echo salesloo_affiliate_link(); ?>" />
                </div>
            </div>
            <div class="flex-none">
                <div class="block border border-blue-500 rounded-lg py-2 px-6 text-quaternary" @click="$copy('<?php echo salesloo_affiliate_link(); ?>');">
                    <div class="flex items-center leading-lg px-1 whitespace-no-wrap text-grey-900 text-sm cursor-pointer font-bold">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
                        </svg>
                        <span class="ml-1"><?php _e('Copy general link', 'salesloo'); ?></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-10">
        <?php salesloo_template_section('affiliate-product/list-product.php'); ?>
    </div>
</div>