{% load gravatar %}
{% load humanize %}
<style>
    .crypto-address {
    text-align: center;
    }

    .dialog {
        position: relative;
    }

    .arrow-container {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
    }

    .arrow-btn {
        background: none;
        border: none;
        color: black;
        font-size: 40px;
        cursor: pointer;
        font-weight: bold;
        margin: 0 0px;
    }

    .crypto-name {
    text-align: center;
    width: 100%;
    font-size: 20px;
    color: white;
    background-color: #ff4444;
    display: inline-block;
    margin: 0 auto; /* Center the element horizontally */
}

    .slideshow {
        margin-top: 50px;
    }

    .navigation {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
    }

    .nav-btn {
        width: 70px;
        height: 40px;
        border: 1px solid #0e0d0d;
        margin: 6px;
        cursor: pointer;
        transition: 0.4s;
    }
    .nav-btn.active {
    background: red; /* Change to whatever red color you prefer */
    color: white; /* Change text color to contrast with the red background */
    }
    .nav-btn:hover {
        background: #fff;
    }

    input[name="r"] {
        position: absolute;
        visibility: hidden;
    }

    #btc:checked ~ .s1 {
        margin-left: -20%;
    }

    #eth:checked ~ .s1 {
        margin-left: -40%;
    }

    #bch:checked ~ .s1 {
        margin-left: -60%;
    }

</style>
<div class="row-start-1 bug-container leaderboard-widget flex flex-col p-5 pt-3 bg-[white] m-1 w-[100%] row-span-2 rounded-[2.5rem]  border-[#e8e8e8] border-2 font-['Inter'] h-[630px]">
    <div class="font-['Barlow_Semi_Condensed'] font-semibold text-[black] text-[25px] text-center mb-2">LEADERBOARD</div>
    <div class="bg-[#EAEAEA] font-semibold p-3 mt- rounded-2xl">
        1st Place for {% now "F" %} receives:
        <div class="bg-white p-2 text-[1.35rem] rounded-xl border-[#BF1919] border-2">
            No sponsored prizes this month
            <br>
            <div class="my-2 mt-3">
                <a href="{% url 'sponsor' %}"
                   class="bg-red-500 text-white px-4 py-2 whitespace-nowrap rounded text-xl border border-[#ac2925] hover:bg-[#c9302c] hover:border-[#761c19] hover:text-[#e8e8e8] rounded-lg ">Sponsor a Prize</a>
            </div>
        </div>
    </div>
    <div class="users-all h-full max-h-full overflow-y-auto my-3 font-['Barlow']">
        {% if not leaderboard %}
            Leaderboard has been reset for {% now "F" %}, be the first to find issues!
        {% endif %}
        {% for leader in leaderboard %}
            <div class="flex flex-row h-[4rem] items-center my-2 mx-1 hover:bg-[#e8e8e8] rounded-2xl">
                <a href="{% url 'profile' slug=leader.username %}"
                   class="h-full w-[8rem] flex justify-center items-center scale-[0.65] relative">
                    {% if leader.userprofile.avatar %}
                        <img src="{{ leader.userprofile.avatar }}"
                             class="h-[30px] object-cover img-responsive rounded-full"
                             width="30"
                             height="30"
                             alt="user avatar">
                    {% elif user.socialaccount_set.all.0.get_avatar_url %}
                        <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}"
                             class="h-[30px] object-cover img-responsive rounded-full"
                             width="30"
                             height="30"
                             alt="user avatar">
                    {% else %}
                        <img src="{% gravatar_url leader.email 50 %}"
                             class="h-[30px] object-cover img-responsive rounded-full"
                             width="30"
                             height="30"
                             alt="user avatar">
                    {% endif %}
                    {% if forloop.counter == 1 %}
                        <i class="fas fa-medal text-[gold] text-2xl absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2"></i>
                    {% elif forloop.counter == 2 %}
                        <i class="fas fa-medal text-[silver] text-2xl absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2"></i>
                    {% elif forloop.counter == 3 %}
                        <i class="fas fa-medal text-[bronze] text-2xl absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2"></i>
                    {% endif %}
                </a>
                <span class="w-full overflow-clip font-semibold text-[#500000bd] text-[12px] mb-2">{{ leader.username }}</span>
                <button type="button"
                        id="openModal-{{ leader.id }}"
                        class="btn btn-danger text-black"
                        onclick="openModal('{{ leader.userprofile.btc_address }}','{{ leader.userprofile.eth_address }}','{{ leader.userprofile.bch_address }}', '{{ leader.id }}')">
                    TIP:<i class="fab fa-btc"></i>
                </button>
                <dialog id="dialog-{{ leader.id }}" class="dialog">
                    <input type="radio" name="r" id="bch-{{ leader.id }}" checked class="active">
                    <input type="radio" name="r" id="eth-{{ leader.id }}">
                    <input type="radio" name="r" id="btc-{{ leader.id }}">
                    <div class="navigation">
                        <button class="nav-btn" id="bch-btn-{{ leader.id }}">BCH</button>
                        <button class="nav-btn" id="eth-btn-{{ leader.id }}">Ethereum</button>
                        <button class="nav-btn" id="btc-btn-{{ leader.id }}">Bitcoin</button>
                    </div>
                    <div id="slideshow-{{ leader.id }}" class="slideshow">
                        <img id="qr-image-{{ leader.id }}" alt="QR Code" height="300" width="400">
                        <p id="crypto-name-{{ leader.id }}" class="crypto-name"></p>
                        <p id="crypto-address-{{ leader.id }}" class="crypto-address"></p>
                    </div>
                    <button id="close-{{ leader.id }}" class="btn btn-danger w-full">Close</button>
                </dialog>
            </div>
        {% endfor %}
    </div>
    <div>
        <a href="{% url 'leaderboard_global' %}"
           class="btn btn-default btn-block submit_button p-2 rounded-2xl">View All</a>
        <a href="{% url 'leaderboard_specific_month' %}"
           class="btn btn-default btn-block submit_button p-2 rounded-2xl">Filter Monthly</a>
        <a href="{% url 'leaderboard_eachmonth' %}"
           class="btn btn-default btn-block submit_button p-2 rounded-2xl">View Monthly</a>
    </div>
</div>
{% comment %} positions the leaderboard rightmost {% endcomment %}
<script>



    const openModal = (btc, eth, bch, userId) => {
        const cryptoOptions = [
        { name: 'Bitcoin Cash', address: bch },
        { name: 'Ethereum', address: eth },
        { name: 'Bitcoin', address: btc }
        ];
        let currentIndex = 0;
        const updateSlide = () => {
            let { name, address } = cryptoOptions[currentIndex];
            if (address == '' || address == 'None') {
                address = "qr5yccf7j4dpjekyz3vpawgaarl352n7yv5d5mtzzc";
                document.getElementById('crypto-name-'+userId).textContent = `No address:Will go to BLT Donation`;
                document.getElementById('qr-image-'+userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
                document.getElementById('crypto-address-'+userId).textContent = `BCH: ${address}`;
            }
            else{
                document.getElementById('crypto-name-'+userId).textContent = name;
                document.getElementById('qr-image-' + userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
                document.getElementById('crypto-address-' + userId).textContent = `${address}`;
            }
        };

        updateSlide();

        document.getElementById('openModal-' + userId).addEventListener('click', function() {
            document.getElementById('dialog-' + userId).showModal();
        });

        document.getElementById('close-' + userId).addEventListener('click', function() {
            document.getElementById('dialog-' + userId).close();
        });
        document.getElementById('bch-btn-' + userId).classList.add('active'); // Highlight BCH button by default
        document.getElementById('bch-btn-' + userId).addEventListener('click', function() {
            currentIndex = 0;
            updateSlide();
            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });

        document.getElementById('eth-btn-' + userId).addEventListener('click', function() {
            currentIndex = 1;
            updateSlide();
            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });

        document.getElementById('btc-btn-' + userId).addEventListener('click', function() {
            currentIndex = 2;
            updateSlide();
            document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    
        
    };
    
    document.addEventListener('DOMContentLoaded', function() {
      const grid = document.querySelector('.hero-bugs-container');
      const child = document.querySelector('.leaderboard-widget');

      if (grid && child) {
        const columns = getComputedStyle(grid).gridTemplateColumns.split(' ').length;

        child.style.gridColumn = columns;
      }
    });
</script>