@component('components.plant.template_popup',  ['id' => 'popup_share'])

    <style>
        .fa-telegram-plane{
            width: 51px;
            height: 51px;
            color: white;
            background: #15aabf;
            border-radius: 5px;
            padding: 4px;
            font-size: 45px;
            text-align: center;
        }
    </style>

    <div class="status_item" status_id="default">
        <h5>Refer & Earn</h5>
        <h6>
            Refer a friend & you and your friend will earn 5 tokens each.
        </h6>
        <label>
            Share your unique link
        </label>

        <div class="form-group">
            <div class="input-group">

                <input class="bg-white border-right-0 border form-control" type="text" id="referrer_url" value="" onClick="copyURL('#referrer_url')" readonly>
                <div class="rounded-right input-group-append bg-white" onClick="copyURL('#referrer_url')">
                  <button class="btn border-left-0 border " type="button">
                      <i class="fas fa-link"></i>
                  </button>
                </div>

            </div>
            <small class="copy-txt d-none">Copied to clipboard!</small>
        </div>

        <h5>
            Number of Successful Referrals: <span id="referred_number"></span>
        </h5>

        <label>
            Include <b>#GrowAPlant</b> when sharing in social media and stand a chance to win prizes worth total RM5,000.
        </label>

        <small class="mb-0">Share To:</small>
        @php
            $msg = htmlentities('Did you hear about SKALE\'s Grow A Plant Campaign? Get rewards as you grow your plant! Join with my link below and you will immediately get 5 free tokens right away. Start here:') . ' {referrer_link}';
        @endphp
        <div class="d-flex justify-content-center h4">
            <div class="p-2">
                <a class="social_share_url" href="https://www.facebook.com/sharer.php?display=popup&u={referrer_link}" target="_blank">
                    <img class="w-50" src="{{asset('assets/images/ar/token_icons/Icon_FB.png')}}">
                </a>
            </div>
            <div class="p-2">
                <a class="social_share_url" href="https://telegram.me/share/url?url={referrer_link}&text={!! $msg !!}" target="_blank">
                    <i class="fab fa-telegram-plane">
                    </i>
                </a>
            </div>
            <div class="p-2">
                <a class="social_share_url" href="https://api.whatsapp.com/send?text={!! $msg !!}" target="_blank">
                    <img class="w-50" src="{{asset('assets/images/ar/token_icons/Icon_WA.png')}}">
                </a>
            </div>
        </div>

    </div>

    <div class="status_item" status_id="item">
        item
    </div>

@endcomponent