<?php
/* @var Tangibledesign\MyHome\Widgets\User\UserPhoneWidget $mhCurrentWidget */
global $mhCurrentWidget;

$mhUser = $mhCurrentWidget->getUser();
if (!$mhUser) {
    return;
}

$mhPhone = $mhUser->getPhone();
if (empty($mhPhone)) {
    return;
}
?>
<?php if (!$mhCurrentWidget->hidePhoneNumber()) : ?>
    <a
            href="tel:<?php echo esc_attr($mhUser->getPhoneUrl()); ?>"
            class="myhome-contact-button myhome-contact-button--listing-user-v2"
    >
        <div class="myhome-contact-button__inner">
            <div class="myhome-contact-button__icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                    <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                    <path d="M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z"/>
                </svg>
            </div>

            <?php echo wp_kses_post($mhUser->getDisplayPhone()); ?>
        </div>
    </a>
<?php else : ?>
    <mh-phone
            :user-id="<?php echo esc_attr($mhUser->getId()); ?>"
            request-url="<?php echo esc_url(admin_url('admin-post.php?action=myhome/phone')); ?>"
            phone-nonce="<?php echo esc_attr(wp_create_nonce('phone_' . $mhUser->getId())) ?>"
    >
        <div slot-scope="props">
            <div
                    v-if="!props.phone"
                    @click.prevent="props.onShow"
                    class="myhome-contact-button myhome-contact-button--listing-user-v2"
            >
                <div class="myhome-contact-button__inner">
                    <div class="myhome-contact-button__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                            <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z"/>
                        </svg>
                    </div>

                    <?php echo wp_kses_post($mhUser->getPhonePlaceholder()); ?>
                </div>

                <div class="myhome-contact-button__icon myhome-contact-button__icon--additional">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                        <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                        <path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/>
                    </svg>
                </div>
            </div>

            <template>
                <a
                        v-if="props.phone"
                        :href="'tel:' + props.phone.url"
                        class="myhome-contact-button myhome-contact-button--listing-user-v2"
                >
                    <div class="myhome-contact-button__inner">
                        <div class="myhome-contact-button__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
                                <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                <path d="M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z"/>
                            </svg>
                        </div>

                        {{ props.phone.label }}
                    </div>
                </a>
            </template>
        </div>
    </mh-phone>
<?php endif; ?>