  
<script setup>
import { ref, defineProps, computed, onMounted, defineEmits } from 'vue';
import Icon from '@components/Icon.vue';
import { useTranslation } from '../composables/useTranslation';

const { t } = useTranslation();

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    mail: {
        type: String,
        default: 'support@wppool.dev',
    },
})

// handle the modal 
const isOpen = ref(props.modelValue)

const emit = defineEmits(['update:modelValue'])
const close = () => {
    isOpen.value = false
    emit('update:modelValue', false)
}

// Generate links for mailing.
const Link = computed(() => {

    const mail = props.mail.replace('@', '%40');
    const subject = 'WP Dark Mode Support';
    const body = 'Hi, I need help with WP Dark Mode.';

    return {
        Gmail: `https://mail.google.com/mail/?view=cm&fs=1&to=${mail}&su=${subject}&body=${body}`,
        Outlook: `https://outlook.office.com/owa/?path=/mail/action/compose&to=${mail}&subject=${subject}&body=${body}`,
        Yahoo: `https://compose.mail.yahoo.com/?to=${mail}&subject=${subject}&body=${body}`,
        Mailto: `mailto:${mail}?subject=${subject}&body=${body}`,
    };
});


// Copy function 
const isCopied = ref(false)
const copyEmail = async () => {
    isCopied.value = true;
    await navigator.clipboard.writeText(props.mail);
    setTimeout(() => {
        isCopied.value = false;
    }, 3000);
};


onMounted(() => {
    setTimeout(() => {
        const el = document.querySelector('.modal')
        el && el.focus()
    }, 100)
})

</script>

<template>
    <section v-if="isOpen" class="wp-dark-mode-support-modal">
        <div class="overlay" @click.prevent="close" v-if="isOpen"></div> 
        <div tabindex="1" @keydown.esc.prevent="close()" class="modal" :class="{
            'bounce-in' : isOpen,
            'bounce-out' : !isOpen
        }">
            <!-- header  -->
            <div class="header">
                <svg class="h-6" viewBox="0 0 144 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_2384_67173)">
                        <path
                            d="M47.1367 5.46099H49.3466C49.5974 5.46029 49.847 5.49552 50.088 5.56565C50.3216 5.63351 50.5438 5.73695 50.7468 5.87244C50.948 6.00695 51.1304 6.16843 51.289 6.3525C51.4469 6.5346 51.5745 6.74161 51.6668 6.96537C52.1976 8.27437 52.7329 9.57182 53.2726 10.8577C53.8124 12.1436 54.3522 13.4411 54.892 14.7501C54.9846 14.9634 55.0491 15.1881 55.0841 15.4185C55.1116 15.6231 55.1299 15.804 55.1389 15.9614C55.1628 15.6535 55.2227 15.3496 55.3174 15.0562C55.4311 14.6964 55.5639 14.3431 55.7152 13.9979L58.6387 6.95094C58.7207 6.74169 58.8415 6.55031 58.9944 6.38715C59.1617 6.20409 59.3507 6.04283 59.5572 5.9071C59.7689 5.76714 59.9972 5.65486 60.2367 5.57288C60.4685 5.49103 60.712 5.44858 60.9574 5.44727H63.1673L61.602 9.22123L63.3452 13.4269C63.5283 13.8634 63.7067 14.2929 63.8803 14.7154C64.0432 15.0927 64.1407 15.4956 64.1684 15.9065C64.1774 15.8324 64.1888 15.7465 64.2026 15.6488C64.2163 15.5511 64.2414 15.4282 64.278 15.2799C64.324 15.1008 64.3791 14.9242 64.443 14.7508C64.5161 14.5468 64.6166 14.296 64.7447 13.9986L67.6718 6.95164C67.7532 6.74341 67.8719 6.55227 68.0218 6.38788C68.1855 6.20378 68.3723 6.04237 68.5775 5.90782C68.7893 5.76789 69.0176 5.65558 69.257 5.57359C69.4888 5.49173 69.7323 5.44931 69.9777 5.44799H72.1876L66.1207 20.0847H62.2225L60.1221 14.6815C60.0491 14.4866 59.9851 14.2871 59.9301 14.0831C59.8751 13.8789 59.8473 13.6681 59.8475 13.4565C59.8459 13.2529 59.8784 13.0506 59.9436 12.858C59.7695 13.3595 59.447 14.2089 58.9759 15.4063C58.5049 16.6036 57.8757 18.1633 57.0883 20.0855H53.1901L47.1367 5.46099Z"
                            fill="#1F2937" />
                        <path
                            d="M73.1486 5.45885H76.0842C76.1316 5.45885 76.2004 5.58638 76.2906 5.84144C76.4052 6.19768 76.4879 6.56374 76.5374 6.9351C76.6313 6.64924 76.8084 6.39901 77.0454 6.21754C77.3169 5.99962 77.6173 5.8215 77.9377 5.6884C78.2763 5.54459 78.628 5.43506 78.9878 5.36139C79.306 5.29205 79.6301 5.25482 79.9555 5.25023H80.0102C80.9886 5.24223 81.9575 5.44626 82.8519 5.84867C83.7119 6.23488 84.4902 6.78588 85.1443 7.47144C86.4935 8.89861 87.2451 10.8007 87.2412 12.7782C87.2374 14.7557 86.4784 16.6548 85.1237 18.0765C84.4623 18.7592 83.6768 19.3053 82.8107 19.6849C81.9101 20.0823 80.9375 20.2839 79.9555 20.2768C79.3861 20.275 78.8207 20.1809 78.2806 19.9981C77.7155 19.8086 77.1961 19.5001 76.7566 19.0929V24.803H73.1465L73.1486 5.45885ZM79.9433 8.88487C79.3156 8.88178 78.6964 9.03234 78.1383 9.32378C77.5911 9.60273 77.118 10.011 76.7587 10.5141V14.9984C77.125 15.507 77.6042 15.9208 78.1575 16.2063C78.7108 16.4919 79.3226 16.6412 79.9433 16.6422C80.4488 16.6473 80.9495 16.5427 81.4119 16.3353C81.8513 16.1378 82.2479 15.854 82.5787 15.5001C82.9113 15.1425 83.1744 14.7245 83.3542 14.2679C83.7294 13.2989 83.7294 12.2217 83.3542 11.2526C83.1765 10.795 82.9132 10.3765 82.5787 10.0204C82.2463 9.67015 81.85 9.3887 81.4119 9.19166C80.9494 8.98514 80.4487 8.88128 79.9433 8.88703V8.88487Z"
                            fill="#1F2937" />
                        <path
                            d="M92.31 5.45867C92.3593 5.56594 92.4141 5.67051 92.4743 5.77196C92.5714 5.95821 92.6187 6.16704 92.6116 6.37762V7.21282C92.6977 6.96547 92.8387 6.74149 93.0236 6.55809C93.2218 6.3596 93.4458 6.18957 93.6895 6.05277C93.9502 5.90497 94.2236 5.78151 94.5064 5.6839C94.7878 5.58517 95.0742 5.50155 95.3644 5.4334C95.6245 5.37174 95.888 5.32523 96.1534 5.29408C96.3629 5.26856 96.5735 5.25457 96.7845 5.2522C97.76 5.24382 98.7261 5.44559 99.6191 5.84415C100.472 6.22432 101.242 6.77359 101.884 7.45971C102.527 8.15502 103.034 8.96779 103.378 9.85489C104.101 11.7332 104.101 13.8187 103.378 15.697C103.033 16.5817 102.526 17.3921 101.884 18.0857C101.243 18.7719 100.472 19.3212 99.6191 19.7013C98.4175 20.233 97.093 20.4115 95.7963 20.2167C95.4346 20.1608 95.0802 20.064 94.7397 19.928C94.3582 19.7754 93.9963 19.5767 93.6618 19.336C93.2701 19.0523 92.9169 18.7173 92.6116 18.3398V24.997H90.374V5.45867H92.31ZM96.7845 18.0626C97.4698 18.0709 98.1489 17.9309 98.7767 17.6519C99.3666 17.3881 99.8967 17.0041 100.334 16.5236C100.776 16.0333 101.121 15.4613 101.35 14.8387C101.835 13.5038 101.835 12.0373 101.35 10.7024C101.121 10.0799 100.776 9.50785 100.334 9.01751C99.8966 8.53715 99.3665 8.15312 98.7767 7.88923C98.1489 7.61031 97.4698 7.47029 96.7845 7.47848C96.0078 7.47835 95.2393 7.63951 94.5262 7.95203C93.8085 8.26116 93.1579 8.71078 92.6116 9.27522V15.9042C92.8573 16.2455 93.1442 16.5542 93.4654 16.8232C93.779 17.088 94.1222 17.3145 94.4879 17.4981C94.8491 17.6792 95.2289 17.8194 95.6205 17.9161C96.0012 18.0127 96.392 18.0626 96.7845 18.0648V18.0626Z"
                            fill="#1F2937" />
                        <path
                            d="M105.83 12.7718C105.825 11.7688 106.023 10.7755 106.414 9.85398C107.169 8.04782 108.587 6.60986 110.367 5.84324C111.279 5.45299 112.258 5.25195 113.248 5.25195C114.238 5.25195 115.218 5.45299 116.13 5.84324C117.91 6.60974 119.327 8.04773 120.083 9.85398C120.468 10.7792 120.666 11.7733 120.666 12.7776C120.666 13.7818 120.468 14.7759 120.083 15.7012C119.328 17.5075 117.91 18.9455 116.13 19.7119C115.218 20.1022 114.238 20.3033 113.248 20.3033C112.258 20.3033 111.279 20.1022 110.367 19.7119C108.586 18.9454 107.169 17.5074 106.414 15.7012C106.023 14.7758 105.824 13.7786 105.83 12.7718ZM108.027 12.7718C108.022 13.4826 108.162 14.1867 108.439 14.84C108.702 15.4689 109.082 16.0408 109.558 16.5248C110.032 17.0056 110.594 17.3888 111.212 17.6531C111.857 17.9244 112.549 18.0639 113.247 18.0639C113.945 18.0639 114.637 17.9244 115.282 17.6531C116.395 17.1801 117.312 16.3299 117.877 15.2476C118.442 14.1652 118.619 12.9176 118.378 11.7175C118.138 10.5173 117.495 9.439 116.558 8.66623C115.622 7.89347 114.45 7.47414 113.243 7.47973C112.546 7.4746 111.854 7.61438 111.212 7.89047C110.594 8.15497 110.032 8.53811 109.558 9.01878C109.082 9.50288 108.702 10.0748 108.439 10.7036C108.162 11.3569 108.022 12.061 108.027 12.7718Z"
                            fill="#1F2937" />
                        <path
                            d="M122.658 12.7718C122.653 11.7688 122.851 10.7755 123.242 9.85398C123.997 8.04782 125.415 6.60986 127.195 5.84324C128.107 5.45299 129.087 5.25195 130.076 5.25195C131.066 5.25195 132.046 5.45299 132.958 5.84324C134.738 6.60974 136.156 8.04773 136.911 9.85398C137.296 10.7793 137.494 11.7734 137.494 12.7776C137.494 13.7818 137.296 14.7759 136.911 15.7012C136.156 17.5075 134.738 18.9455 132.958 19.7119C132.046 20.1022 131.066 20.3033 130.076 20.3033C129.087 20.3033 128.107 20.1022 127.195 19.7119C125.415 18.9454 123.997 17.5074 123.242 15.7012C122.851 14.7758 122.652 13.7786 122.658 12.7718ZM124.855 12.7718C124.85 13.4826 124.99 14.1867 125.267 14.84C125.53 15.4688 125.91 16.0407 126.385 16.5248C126.86 17.0056 127.422 17.3887 128.039 17.6531C128.682 17.9293 129.373 18.0691 130.071 18.0639C130.929 18.0637 131.773 17.8489 132.53 17.4386C133.286 17.0283 133.931 16.4352 134.408 15.7116C134.885 14.9881 135.178 14.1564 135.263 13.2903C135.347 12.4242 135.22 11.5503 134.892 10.746C134.565 9.94167 134.047 9.23171 133.384 8.67895C132.721 8.12619 131.935 7.74768 131.093 7.5769C130.252 7.40612 129.383 7.44833 128.561 7.69983C127.74 7.95132 126.993 8.40435 126.385 9.01878C125.91 9.50297 125.53 10.0748 125.267 10.7036C124.99 11.3569 124.85 12.061 124.855 12.7718Z"
                            fill="#1F2937" />
                        <path d="M143.015 0.126953V20.0839H140.777V0.126953H143.015Z" fill="#1F2937" />
                        <path
                            d="M19.2036 10.8364L11.6476 3.1701C10.368 1.87189 8.63255 1.14258 6.82298 1.14258C5.01341 1.14258 3.27795 1.87189 1.99836 3.1701C0.718829 4.46837 0 6.22916 0 8.06515C0 9.90113 0.718829 11.6619 1.99836 12.9602L9.5544 20.6265C10.834 21.9247 12.5694 22.654 14.379 22.654C16.1886 22.654 17.924 21.9247 19.2036 20.6265C20.4832 19.3282 21.202 17.5674 21.202 15.7315C21.202 13.8955 20.4832 12.1347 19.2036 10.8364Z"
                            fill="#5CC9F6" />
                        <path
                            d="M41.2319 8.08809C39.9523 6.78988 38.2169 6.06055 36.4073 6.06055C34.5977 6.06055 32.8623 6.78988 31.5827 8.08809C30.949 8.73094 30.4464 9.49412 30.1034 10.3341C29.7605 11.174 29.584 12.0743 29.584 12.9835C29.584 13.8927 29.7605 14.7929 30.1034 15.6329C30.4464 16.4728 30.949 17.236 31.5827 17.8789C32.8623 19.1771 34.5977 19.9064 36.4073 19.9064C38.2169 19.9064 39.9523 19.1771 41.2319 17.8789C41.8656 17.236 42.3683 16.4728 42.7112 15.6329C43.0541 14.7929 43.2307 13.8927 43.2307 12.9835C43.2307 12.0743 43.0541 11.174 42.7112 10.3341C42.3683 9.49412 41.8656 8.73094 41.2319 8.08809Z"
                            fill="#FA8807" />
                        <path
                            d="M12.3435 8.0684L9.52247 10.9306L9.51037 10.9176C8.40772 12.0077 6.97417 12.6875 5.44263 12.8464C3.91109 13.0054 2.37157 12.6342 1.07422 11.7933C1.34016 12.2148 1.65028 12.606 1.99915 12.9598L5.04434 16.0495L5.07493 16.0379L9.59077 20.6197L21.9615 8.0684C21.33 7.42752 20.5803 6.91912 19.7552 6.57227C18.93 6.22541 18.0457 6.04688 17.1525 6.04688C16.2593 6.04688 15.3749 6.22541 14.5498 6.57227C13.7247 6.91912 12.975 7.42752 12.3435 8.0684Z"
                            fill="#00AEEB" />
                        <path
                            d="M36.3776 3.23084L36.3712 3.22434C35.7479 2.57083 35.0017 2.05078 34.1769 1.69489C33.352 1.33901 32.4652 1.15452 31.5689 1.15236C30.6725 1.15021 29.7848 1.33042 28.9583 1.68234C28.1318 2.03425 27.3832 2.55075 26.7569 3.20125L14.3926 15.746C13.189 16.9662 11.5796 17.6862 9.8799 17.7648C8.18021 17.8433 6.51293 17.2747 5.20508 16.1705L9.59071 20.6201L9.59568 20.6158C10.8737 21.9124 12.607 22.6408 14.4143 22.6408C16.2216 22.6408 17.9549 21.9124 19.2328 20.6158L31.2748 8.39804L31.2947 8.40381C31.3879 8.29698 31.4833 8.19158 31.5843 8.08907C32.4253 7.23487 33.472 6.61885 34.6203 6.30225C35.7686 5.98565 36.9786 5.97949 38.13 6.28438C37.8175 5.12926 37.2135 4.07677 36.3776 3.23084Z"
                            fill="#0080CA" />
                        <path
                            d="M38.1258 6.28476C36.9743 5.97987 35.7643 5.98603 34.616 6.30263C33.4677 6.61923 32.421 7.23525 31.58 8.08945C31.479 8.19196 31.3837 8.29735 31.2905 8.40419L31.2712 8.39842L19.2293 20.6162C19.2072 20.6385 19.1844 20.6587 19.1631 20.6804L19.1709 20.6891C20.4505 21.9873 22.186 22.7166 23.9955 22.7166C25.8051 22.7166 27.5406 21.9873 28.8202 20.6891L36.3762 13.0227C37.2297 12.1573 37.8413 11.0775 38.1487 9.8937C38.4561 8.70987 38.4482 7.46447 38.1258 6.28476Z"
                            fill="#EE5913" />
                        <path
                            d="M17.804 5.44238C18.4044 5.44238 18.8911 4.94854 18.8911 4.33935C18.8911 3.73017 18.4044 3.23633 17.804 3.23633C17.2035 3.23633 16.7168 3.73017 16.7168 4.33935C16.7168 4.94854 17.2035 5.44238 17.804 5.44238Z"
                            fill="#5CC9F6" />
                        <path
                            d="M15.4033 3.29769C15.7884 3.29769 16.1006 2.98096 16.1006 2.59025C16.1006 2.19954 15.7884 1.88281 15.4033 1.88281C15.0182 1.88281 14.7061 2.19954 14.7061 2.59025C14.7061 2.98096 15.0182 3.29769 15.4033 3.29769Z"
                            fill="#5CC9F6" />
                        <path
                            d="M16.9434 1.41488C17.3284 1.41488 17.6406 1.09815 17.6406 0.707438C17.6406 0.316731 17.3284 0 16.9434 0C16.5583 0 16.2461 0.316731 16.2461 0.707438C16.2461 1.09815 16.5583 1.41488 16.9434 1.41488Z"
                            fill="#5CC9F6" />
                    </g>
                    <defs>
                        <clipPath id="clip0_2384_67173">
                            <rect width="143.015" height="25" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
                <div class="text-xs text-gray-500">{{ t('mailto_hints') }}</div>
            </div>
            <!-- close  -->
            <div @click.prevent="close()" class="close-button">
                <Icon width="w-10" name="close" />
            </div>
            <!-- items  -->
            <div class="link-list">
                <a class="link-list-item" :href="Link.Gmail" target="_blank" rel="nofollow">
                    <div class="link-list-item-icon">
                        <svg class="w-12 h-10" viewBox="0 0 512 512">
                            <path d="M158 391v-142l-82-63V361q0 30 30 30" fill="#4285f4" />
                            <path d="M 154 248l102 77l102-77v-98l-102 77l-102-77" fill="#ea4335" />
                            <path d="M354 391v-142l82-63V361q0 30-30 30" fill="#34a853" />
                            <path d="M76 188l82 63v-98l-30-23c-27-21-52 0-52 26" fill="#c5221f" />
                            <path d="M436 188l-82 63v-98l30-23c27-21 52 0 52 26" fill="#fbbc04" />
                        </svg>
                    </div>
                    <div class="link-list-item-text">
                        <span>Gmail</span>
                        <span>Open Gmail in browser</span>
                    </div>
                    <div class="link-list-item-arrow">
                        <Icon width="w-5" name="arrow" />
                    </div>
                </a>
                <a class="link-list-item" :href="Link.Outlook" target="_blank" rel="nofollow">
                    <div class="link-list-item-icon">
                        <svg class="w-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect x="10" y="2" width="20" height="28" rx="2" fill="#1066B5" />
                            <rect x="10" y="2" width="20" height="28" rx="2" fill="url(#paint0_linear_87_7742)" />
                            <rect x="10" y="5" width="10" height="10" fill="#32A9E7" />
                            <rect x="10" y="15" width="10" height="10" fill="#167EB4" />
                            <rect x="20" y="15" width="10" height="10" fill="#32A9E7" />
                            <rect x="20" y="5" width="10" height="10" fill="#58D9FD" />
                            <mask id="mask0_87_7742" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="14"
                                width="24" height="16">
                                <path
                                    d="M8 14H30C31.1046 14 32 14.8954 32 16V28C32 29.1046 31.1046 30 30 30H10C8.89543 30 8 29.1046 8 28V14Z"
                                    fill="url(#paint1_linear_87_7742)" />
                            </mask>
                            <g mask="url(#mask0_87_7742)">
                                <path d="M32 14V18H30V14H32Z" fill="#135298" />
                                <path d="M32 30V16L7 30H32Z" fill="url(#paint2_linear_87_7742)" />
                                <path d="M8 30V16L33 30H8Z" fill="url(#paint3_linear_87_7742)" />
                            </g>
                            <path
                                d="M8 12C8 10.3431 9.34315 9 11 9H17C18.6569 9 20 10.3431 20 12V24C20 25.6569 18.6569 27 17 27H8V12Z"
                                fill="#000000" fill-opacity="0.3" />
                            <rect y="7" width="18" height="18" rx="2" fill="url(#paint4_linear_87_7742)" />
                            <path
                                d="M14 16.0693V15.903C14 13.0222 11.9272 11 9.01582 11C6.08861 11 4 13.036 4 15.9307V16.097C4 18.9778 6.07278 21 9 21C11.9114 21 14 18.964 14 16.0693ZM11.6424 16.097C11.6424 18.0083 10.5665 19.1579 9.01582 19.1579C7.46519 19.1579 6.37342 17.9806 6.37342 16.0693V15.903C6.37342 13.9917 7.44937 12.8421 9 12.8421C10.5348 12.8421 11.6424 14.0194 11.6424 15.9307V16.097Z"
                                fill="white" />
                            <defs>
                                <linearGradient id="paint0_linear_87_7742" x1="10" y1="16" x2="30" y2="16"
                                    gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#064484" />
                                    <stop offset="1" stop-color="#0F65B5" />
                                </linearGradient>
                                <linearGradient id="paint1_linear_87_7742" x1="8" y1="26.7692" x2="32" y2="26.7692"
                                    gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#1B366F" />
                                    <stop offset="1" stop-color="#2657B0" />
                                </linearGradient>
                                <linearGradient id="paint2_linear_87_7742" x1="32" y1="23" x2="8" y2="23"
                                    gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#44DCFD" />
                                    <stop offset="0.453125" stop-color="#259ED0" />
                                </linearGradient>
                                <linearGradient id="paint3_linear_87_7742" x1="8" y1="23" x2="32" y2="23"
                                    gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#259ED0" />
                                    <stop offset="1" stop-color="#44DCFD" />
                                </linearGradient>
                                <linearGradient id="paint4_linear_87_7742" x1="0" y1="16" x2="18" y2="16"
                                    gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#064484" />
                                    <stop offset="1" stop-color="#0F65B5" />
                                </linearGradient>
                            </defs>
                        </svg>
                    </div>
                    <div class="link-list-item-text">
                        <span>Outlook</span>
                        <span>Open Outlook in browser</span>
                    </div>
                    <div class="link-list-item-arrow">
                        <Icon width="w-5" name="arrow" />
                    </div>
                </a>
                <a class="link-list-item" :href="Link.Yahoo" target="_blank" rel="nofollow">
                    <div class="link-list-item-icon">
                        <svg class="w-10" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
                            xml:space="preserve">
                            <g>
                                <polygon fill-rule="evenodd" clip-rule="evenodd" fill="purple" points="89.782,77.807 79.567,76.559 80.703,67.596 
                            90.918,68.842 89.782,77.807 	" />
                                <polygon fill-rule="evenodd" clip-rule="evenodd" fill="purple" points="100,23.438 82.519,21.283 82.631,61.805 90.238,62.824 
                            100,23.438 	" />
                                <g>
                                    <g>
                                        <path fill-rule="evenodd" clip-rule="evenodd" fill="purple" d="M64.813,30.477c-7.038-5.336-16.118-7.941-27.13-7.941
                                    c-11.123,0-20.203,2.605-27.126,7.941C3.519,35.695,0,42.396,0,50.68c0,8.4,3.519,15.213,10.557,20.435
                                    c5.742,4.33,12.97,6.865,21.615,7.602h10.981c8.582-0.736,15.822-3.271,21.661-7.602c6.923-5.223,10.441-12.035,10.441-20.435
                                    C75.254,42.396,71.736,35.695,64.813,30.477z M59.591,43.756l-5.335,1.137c-0.793,0.225-2.951,1.816-6.696,4.881
                                    c-3.974,3.178-6.017,5.221-6.356,6.242l-0.227,2.84l-0.114,1.703l0.455,4.312l7.038,0.109l-0.115,2.158H36.776L26.56,67.252
                                    l0.341-2.043l3.292-0.109c1.703-0.119,2.726-0.344,3.064-0.686c0.228-0.227,0.341-1.59,0.341-3.973v-1.475l-0.113-2.951
                                    c-0.228-0.678-2.044-3.178-5.562-7.492c-3.632-4.426-6.015-7.037-7.151-7.947l-6.583-0.904V37.74
                                    c0.341-0.225,3.973-0.225,10.669-0.113c4.654-0.111,8.513-0.111,11.579,0.113l-0.228,1.592l-6.925,0.678
                                    c2.157,3.18,5.45,7.605,9.876,13.17c5.789-4.43,8.854-7.268,8.966-8.518l-5.901-0.906l-0.453-2.041h9.874l9.308,0.113
                                    L59.591,43.756z" />
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="link-list-item-text">
                        <span>Yahoo</span>
                        <span>Open Yahoo in browser</span>
                    </div>
                    <div class="link-list-item-arrow">
                        <Icon width="w-5" name="arrow" />
                    </div>
                </a>
                <a class="link-list-item" :href="Link.Mailto">
                    <div class="link-list-item-icon">
                        <svg class="w-8" viewBox="0 0 512 512" xml:space="preserve">
                            <g>
                                <polygon style="fill:#C0AC7E;" points="511.401,173.663 502.513,179.269 458.244,207.066 268.606,326.073 266.213,327.652 
    265.699,327.968 256.043,334.048 255.701,334.207 247.753,329.232 246.299,328.284 66.659,215.516 54.439,207.856 0.598,174.057 
    0,173.663 54.439,139.469 249.548,16.988 261.854,16.988 458.244,140.258 464.74,144.365 	" />
                                <path style="fill:#B6995F;"
                                    d="M467.859,16.065v383.862c0,8.807-7.88,15.985-17.641,15.985H62.29
    c-9.671,0-17.551-7.178-17.551-15.985V16.065C44.739,7.176,52.619,0,62.29,0h387.928C459.978,0,467.859,7.176,467.859,16.065z" />
                                <g>
                                    <g>
                                        <rect x="110.787" y="75.101" style="fill:#DAB99E;" width="190.508"
                                            height="25.378" />
                                        <rect x="110.787" y="71.093" style="fill:#8F816A;" width="190.508"
                                            height="25.378" />
                                    </g>
                                    <g>
                                        <rect x="110.787" y="214.682" style="fill:#DAB99E;" width="289.501"
                                            height="25.378" />
                                        <rect x="110.787" y="210.675" style="fill:#8F816A;" width="289.501"
                                            height="25.378" />
                                    </g>
                                    <g>
                                        <rect x="110.787" y="284.473" style="fill:#DAB99E;" width="289.501"
                                            height="25.378" />
                                        <rect x="110.787" y="280.466" style="fill:#8F816A;" width="289.501"
                                            height="25.378" />
                                    </g>
                                    <g>
                                        <rect x="110.787" y="144.891" style="fill:#DAB99E;" width="289.501"
                                            height="25.378" />
                                        <rect x="110.787" y="140.884" style="fill:#8F816A;" width="289.501"
                                            height="25.378" />
                                    </g>
                                </g>
                                <polygon style="fill:#FBDABC;" points="256.299,322.118 253.308,323.881 195.45,357.662 188.356,361.847 12.392,464.583 
    0.598,471.413 0.598,172.824 71.446,214.169 246.642,316.464 248.009,317.272 256.043,321.971 	" />
                                <polygon style="fill:#DFC7A2;" points="512,172.824 512,471.487 511.914,471.413 511.487,471.119 511.145,470.899 511.059,470.899 
    263.734,326.525 259.375,323.954 256.299,322.118 266.042,316.464 266.298,316.317 266.555,316.17 275.528,310.956 	" />
                                <circle style="opacity:0.68;fill:#EEF3CA;" cx="377.142" cy="75.101" r="38.186" />
                                <path style="fill:#757575;" d="M512,425.251v45.808h-0.513l-7.35,0.342H27.689l-0.341-7.094
    c8.632-5.896,20.082-13.845,27.518-18.887l1.025-0.684l24.956-17.178l38.97-26.92l11.28-7.777l118.365-81.615l7.947-5.556
    c1.88-1.195,4.017-2.222,6.324-2.904c2.735-0.941,5.726-1.539,8.717-1.795c1.025-0.086,1.965-0.171,2.991-0.086
    c1.025-0.171,2.052-0.171,3.077-0.171c2.735-0.085,5.385,0.171,7.948,0.683c2.734,0.513,5.213,1.369,7.435,2.564l89.735,49.91
    l44.354,24.697l11.538,6.41l41.79,23.245l27.518,15.298c0.77,0.428,1.624,0.855,2.479,1.368
    C511.487,424.995,511.743,425.166,512,425.251z" />
                                <path style="fill:#E7C8AA;"
                                    d="M512,441.404v29.997H0.598v-29.997c8.974-5.471,20.768-12.905,28.459-17.52l1.025-0.684
    l25.724-15.98l40.252-24.955l11.623-7.264l122.125-75.805l8.204-5.127c4.273-2.564,9.828-3.846,15.298-3.932
    c1.025-0.086,1.965-0.086,2.991,0c1.026-0.086,2.051-0.086,3.077,0c2.393,0,4.701,0.257,6.923,0.769
    c3.077,0.599,5.896,1.71,8.29,3.163l11.879,7.349l75.377,46.834l43.073,26.75l11.196,7.007l40.68,25.212l26.748,16.665
    c0.77,0.428,1.539,0.854,2.393,1.367c5.47,3.505,12.477,7.864,19.058,11.88C507.385,438.669,509.778,440.122,512,441.404z" />
                                <path style="opacity:0.2;fill:#E84114;"
                                    d="M467.816,16.066v4.273c0-8.887-7.863-16.066-17.605-16.066H62.301
    c-9.656,0-17.604,7.178-17.604,16.066v-4.273C44.696,7.178,52.645,0,62.301,0h387.911C459.953,0,467.816,7.178,467.816,16.066z" />
                            </g>
                        </svg>
                    </div>
                    <div class="link-list-item-text">
                        <span>Default Email App</span>
                        <span>Open your default email app</span>
                    </div>
                    <div class="link-list-item-arrow">
                        <Icon width="w-5" name="arrow" />
                    </div>
                </a>
                <div class="link-list-item group" @click.prevent="copyEmail()">
                    <div class="link-list-item-icon">
                        <svg class="w-7" viewBox="0 0 512 512" xml:space="preserve">
                            <circle style="fill:#0BA4E0;" cx="256" cy="256" r="256" />
                            <path style="fill:#FFFFFF;" d="M317.536,379.904C295.408,391.568,272.88,396,245.936,396c-65.984,0-121.888-48.272-121.888-125.52
c0-82.864,57.52-154.48,146.832-154.48c70,0,117.072,49.088,117.072,116.272c0,60.336-33.792,95.744-71.616,95.744
c-16.096,0-30.976-10.864-29.776-35.408h-1.6c-14.08,23.744-32.592,35.408-56.736,35.408c-23.328,0-43.44-18.912-43.44-50.688
c0-49.888,39.424-95.344,95.344-95.344c17.296,0,32.592,3.616,43.056,8.448l-13.68,72.816c-6.032,30.576-1.216,44.656,12.064,45.056
c20.528,0.4,43.456-26.944,43.456-73.616c0-58.336-34.992-100.176-97.36-100.176c-65.584,0-120.688,51.904-120.688,133.568
c0,67.184,43.84,108.624,103.376,108.624c22.928,0,44.256-4.816,60.752-14.08L317.536,379.904z M295.424,206.112
c-4.016-1.216-10.864-2.816-20.112-2.816c-35.408,0-63.968,33.392-63.968,72.416c0,17.712,8.848,30.576,26.544,30.576
c23.328,0,44.656-29.776,49.088-54.72L295.424,206.112z" />
                        </svg>
                    </div>
                    <div class="link-list-item-text">
                        <span>{{ props.mail }}</span>
                        <span>{{ t('copy_email_hints') }}</span>
                    </div>
                    <button
                        class="transition absolute right-6 top-1/2 -mt-2.5 text-sm border border-blue-600 rounded-md px-3 py-2"
                        :class="{
                            'group-hover:opacity-100 opacity-0 bg-white text-blue-500': !isCopied,
                            'opacity-100 bg-blue-600 text-white': isCopied
                        }"> {{ isCopied ? t('copied') : t('copy_email') }} </button>
                </div>
                <!-- footer  -->
                <div class="text-center text-sm text-gray-500"> Powered by <a href="https://wppool.dev/" rel="nofollow"
                        class="text-indigo-600">WPPOOL</a>
                </div>
            </div>
        </div> 
    </section>
</template>

<style scoped>

</style>
  
