{% extends "base.html" %}
{% block title %}Share{% endblock %}

{% block content %}
<h5 class="mb-3">Invite Friends</h5>
<div class="card p-3 mb-2">
    <p class="text fw-bold">Referral Bonus</p>
    <p class="text-info">
        Get 10 referrals and win huge bonuses. <br>
        That means for every 10 invites you make using your link, you get a bonus reward.
   </p>
</div>

<div class="card p-3 mb-3">
    <p>Your referral link:</p>
    <input class="form-control mb-2" value="{{ referral_link }}" readonly>
    <button class="btn btn-warning w-100" onclick="navigator.clipboard.writeText('{{ referral_link }}')">
        Copy Link
    </button>
</div>

<div class="card p-3">
    <h6>My Referrals ({{ referrals.count }})</h6>
    {% for r in referrals %}
        <div>{{ r.phone }}</div>
    {% empty %}
        <p>No referrals yet</p>
    {% endfor %}
</div>
{% endblock %}