{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load custom_tags %}
{% block head %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.js"
            integrity="sha384-SXh3DHBSUxvOFk7+R9qN3hv+DtgPJz4vQwOArU6zxWGnvtR1sy+XmzKUkNh2qWST"
            crossorigin="anonymous"></script>
{% endblock head %}
{% block content %}
    <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 {
        width: 400px;
        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%;
    }

    #tip-message {
        text-align: center;
        font-weight: bold;
        font-style: italic;
    }
    </style>
    {% include "includes/sidenav.html" %}
    <div class="pt-8 pb-16 lg:pt-16 lg:pb-24 bg-white">
        <div class="flex justify-between px-10 mx-auto">
            <div class="w-full max-w-full">
                <div class="w-full flex items-center flex-col">
                    <div class="w-full flex items-center flex-col">
                        <p class="text-gray-800">
                            <strong>Published on</strong>
                            <span class="font-light text-2xl">{{ object.created }}</span>
                        </p>
                        <p class="text-gray-800 ">
                            <strong>Reported on</strong>
                            <span class="font-light text-2xl"><a href="" class="issue-domain">{{ object.url }}</a></span>
                        </p>
                        <p class="text-black font-bold text-6xl text-center w-[90%] xl:w-[60%] mt-5 leading-snug issue-desc editables">
                            {{ object.description }}
                        </p>
                        <div class="form form-inline mt-2 hidden">
                            {% csrf_token %}
                            <input type="hidden" name="issue_pk" id="issue_pk" value="{{ object.id }}">
                            <input type="text"
                                   name="domain"
                                   placeholder="Domain"
                                   class="form-control"
                                   value=""
                                   required>
                            <input type="text"
                                   name="description"
                                   placeholder="Bug Description"
                                   class="form-control"
                                   value=""
                                   required>
                            <select name="label" class="form-control" required>
                                <option value="0">General</option>
                                <option value="1">Number error</option>
                                <option value="2">Functional</option>
                                <option value="3">Performance</option>
                                <option value="4">Security</option>
                                <option value="5">Typo</option>
                                <option value="6">Design</option>
                            </select>
                            <button class="font-bold bg-red-600 px-5 py-2 text-white rounded-xl save-issue">Save</button>
                            <button class="font-bold bg-gray-600 px-5 py-2 text-white rounded-xl cancel-edit">Cancel</button>
                        </div>
                    </div>
                </div>
                <div class="w-full flex justify-between mt-20 flex-wrap-reverse">
                    <div class="w-full xl:w-[56%] xl:pl-20 flex flex-col">
                        <div class="border-t-[1px] border-b-[1px] w-full min-h-[70px] flex flex-col xl:flex-row justify-between items-center mb-10 border-gray-300 flex-wrap pt-7 xl:p-0">
                            <div class="flex items-center">
                                <div class="w-[50px] h-[50px] rounded-full object-fill mr-4 flex items-center justify-center overflow-hidden">
                                    {% if object.user.username %}
                                        {% if object.user.userprofile.user_avatar %}
                                            <img class="w-full h-full object-cover"
                                                 src="{{ MEDIA_URL }}{{ object.user.userprofile.user_avatar }}"
                                                 alt="User Profile Logo"
                                                 width="auto"
                                                 height="auto">
                                        {% else %}
                                            <img class="w-full h-full object-cover"
                                                 src="{% gravatar_url object.user.email 100 %}"
                                                 alt="User Profile Logo"
                                                 width="auto"
                                                 height="auto">
                                        {% endif %}
                                    {% else %}
                                        <img class="w-full h-full object-cover"
                                             src="{% static 'images/dummy-user.png' %}"
                                             alt="User Profile Logo"
                                             width="auto"
                                             height="auto">
                                    {% endif %}
                                </div>
                                <div class="flex flex-col justify-center">
                                    {% if object.user.username %}
                                        <a href="{% url 'profile' slug=object.user.username %}">
                                            Reported By
                                            <span class="font-bold">{{ object.user.username }}</span>
                                        </a>
                                    {% else %}
                                        <a href="">
                                            Reported By
                                            <span class="font-bold">Anonymous</span>
                                        </a>
                                    {% endif %}
                                    <p class="text-xl text-gray-600">
                                        Report viewed by <i class="fa fa-eye"></i> <span class="font-bold">{{ object.views }} users</span>
                                    </p>
                                </div>
                            </div>
                            <div class="w-full xl:w-[100%] mt-10 xl:mt-0 flex flex-wrap justify-between text-black">
                                {% include "includes/_likes2.html" %}
                                {% include "includes/_dislike2.html" %}
                                {% include "includes/_flags2.html" %}
                                {% include "includes/_bookmark2.html" %}
                                <a target="_blank"
                                   href="https://twitter.com/intent/tweet?text=Bug Found on @{{ object.domain_title }} - {{ object.description }} Report: https://{% env 'FQDN' %}/issue/{{ object.id }}"
                                   class="flex items-center px-10 h-14 rounded-xl border-[1px] border-gray-300 font-extrabold hover:text-red-500 hover:bg-gray-100 m-5 xl:m-0"
                                   rel="noopener noreferrer">
                                    <i class="fa-brands fa-x-twitter text-2xl mr-2"> </i>
                                    Share
                                </a>
                            </div>
                        </div>
                        <div id="screenshot-wrapper" class="col-md-6 w-full">
                            <h4 class="section-heading">Screenshots:</h4>
                            <hr>
                            <div class="screenshot-container h-[400px] overflow-x-scroll overflow-y-clip flex gap-2">
                                {% if object.screenshot %}
                                    <a href="{{ object.screenshot.url }}" data-lightbox="image">
                                        <img src="{{ object.screenshot.url }}"
                                             class="border-2 border-black"
                                             height="400"
                                             width="600"
                                             alt="screenshot">
                                    </a>
                                {% else %}
                                    <div class="flex flex-nowrap gap-5">
                                        {% for screenshot in screenshots %}
                                            <div class="relative w-[600px] h-[400px]">
                                                <a href="{{ screenshot.image.url }}" data-lightbox="image">
                                                    <img src="{{ screenshot.image.url }}"
                                                         class="border-2 border-black object-contain w-[600px] h-[400px]"
                                                         height="400"
                                                         width="600"
                                                         alt="screenshot">
                                                </a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            <hr>
                        </div>
                        <h4 class="section-heading">Description:</h4>
                        <div id="bug_report" class="reset-style"></div>
                    </div>
                    <div class="w-full xl:w-[30%] flex flex-row xl:flex-col xl:items-center lg:min-w-[450px] justify-evenly xl:justify-normal items-center flex-wrap">
                        <div class="w-[500px] xl:w-[80%] border-[1px] border-gray-300 rounded-2xl shadow-md p-7 cursor-pointer mb-10">
                            <div class="w-full flex items-center">
                                <div class="w-[100%] p-3 flex flex-col justify-between">
                                    <div class="w-full flex justify-between my-3">
                                        <p class="text-3xl font-bold">Bug Type:</p>
                                        <span class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl">{{ object.get_label_display }}</span>
                                    </div>
                                    <div class="w-full flex justify-between my-3">
                                        <p class="text-3xl font-bold">Status:</p>
                                        <div class="w-1/2 flex {% if request.user == object.user %} justify-between {% else %} justify-end {% endif %}">
                                            {% if request.user == object.user or request.is_staff or request.is_superuser %}
                                                <a class="edit-issue-status font-bold bg-gray-600 px-5 py-1 text-white rounded-xl mr-2"
                                                   id="issue_stat">
                                                    Click
                                                    to
                                                    {% if object.status == "open" %}
                                                        Close
                                                    {% else %}
                                                        Open
                                                    {% endif %}
                                                </a>
                                            {% endif %}
                                            <span class="status font-bold bg-red-600 px-5 py-1 text-white rounded-xl">{{ object.status }}</span>
                                        </div>
                                    </div>
                                    <div class="w-full flex justify-between my-3">
                                        <p class="text-3xl font-bold">Reported On:</p>
                                        <span class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl">{{ object.created }}</span>
                                    </div>
                                    {% if object.cve_id is not None %}
                                        <div class="w-full flex justify-between my-3">
                                            <p class="text-3xl font-bold">CVE ID:</p>
                                            <span class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl">{{ object.cve_id }}</span>
                                        </div>
                                    {% endif %}
                                    {% if object.cve_score is not None %}
                                        <div class="w-full flex justify-between my-3">
                                            <p class="text-3xl font-bold">CVE Score:</p>
                                            <span class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl">{{ object.cve_score }}</span>
                                        </div>
                                    {% endif %}
                                    <div class="w-full flex justify-between my-3">
                                        <p class="text-3xl font-bold">Submitted:</p>
                                        {% if object.hunt is None %}
                                            <span class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl">Independently</span>
                                        {% else %}
                                            <a class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl"
                                               href="{% url 'show_bughunt' object.hunt.id %}">{{ object.hunt.name }}</a>
                                        {% endif %}
                                    </div>
                                    {% if request.user.is_superuser or request.user == object.user %}
                                        <div class="w-full flex justify-between my-3">
                                            <p class="text-3xl font-bold">Report Anonymously:</p>
                                            {% if object.user %}
                                                <form method="post"
                                                      action="{% url 'remove_user_from_issue' id=object.id %}"
                                                      class="m-0 p-0">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="token" value="{{ csrf_token }}" class="m-0 p-0" />
                                                    <!-- Other form fields go here if needed -->
                                                    <button type="submit"
                                                            class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl"
                                                            onclick="return confirm('Are you sure you want to report it anonymously?')">
                                                        Yes <i class="fa fa-check"></i>
                                                    </button>
                                                </form>
                                            {% endif %}
                                        </div>
                                        <!-- add a delete button here like anonymous button -->
                                        <div class="w-full flex justify-between my-3">
                                            <p class="text-3xl font-bold">Delete Issue:</p>
                                            <a href="{% url 'delete_issue' id=object.id %}"
                                               onclick="return confirm('Are you sure you want to delete this issue?')">
                                                <button class="font-bold bg-red-600 px-5 py-1 text-white rounded-xl">
                                                    Yes <i class="fa fa-check"></i>
                                                </button>
                                            </a>
                                        </div>
                                        <!-- add a edit button here like delete button -->
                                        <div class="w-full flex justify-between my-3">
                                            <p class="text-3xl font-bold">Edit Issue:</p>
                                            <a class="font-bold bg-red-600 hover:text-white px-5 py-1 text-white rounded-xl edit-issue">Yes <i class="fa fa-check"></i></a>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="w-[500px] xl:w-[80%] border-[1px] border-gray-300 rounded-2xl shadow-md p-7 cursor-pointer mb-10">
                            <div class="w-full flex items-center">
                                <div class="w-[90px] h-[90px] rounded-full object-fill flex flex-col  overflow-hidden">
                                    {% if browser_family %}
                                        {% with "img/browser-logos/"|add:browser_family|add:"/"|add:browser_family|add:"_64x64.png"|lower as image_static %}
                                            <img class="w-full h-full object-cover"
                                                 src="{% static image_static %}"
                                                 alt="Browser Image"
                                                 width="auto"
                                                 height="auto">
                                        {% endwith %}
                                    {% endif %}
                                </div>
                                <div class="full p-3 flex flex-col justify-center">
                                    <p class="text-3xl font-light">
                                        Browser Version: <span class="font-bold text-2xl">{{ browser_version }}</span>
                                    </p>
                                    <p class="text-3xl font-light">
                                        Operating System: <span class="font-bold text-2xl">{{ os_family }}</span>
                                    </p>
                                    <p class="text-3xl font-light">
                                        OS Version: <span class="font-bold text-2xl">
                                        {% if os_version %}
                                            {{ os_version }}
                                        {% else %}
                                            Unknown
                                        {% endif %}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="w-[500px] xl:w-[80%] border-[1px] border-gray-300 rounded-2xl shadow-md p-7 cursor-pointer mb-10">
                        <div class="w-full flex items-center">
                            <div class="w-[90px] h-[90px] rounded-full object-fill border-black border-[1px] flex flex-col  overflow-hidden">
                                <img class="w-full h-full object-cover"
                                     src="{{ object.domain.get_logo }}"
                                     alt="Domain Logo"
                                     width="auto"
                                     height="auto">
                            </div>
                            <div class="full p-3 flex flex-col justify-center">
                                <a class="font-bold text-3xl"
                                   href="{% url 'domain' slug=object.domain.name %}">Reported on {{ object.domain.name }}</a>
                                <p class="text-2xl font-light">
                                    Total <span class="font-bold">{{ issue_count }}</span> bugs reported
                                </p>
                            </div>
                        </div>
                        <div class="w-full flex justify-end">
                            <button onclick="subscribe_domain()"
                                    id="subscribe_domain_btn"
                                    class="bg-red-600 hover:bg-red-800 text-white text-2xl px-10 py-3 rounded-lg">
                                {% if user.is_authenticated %}
                                    {% if subscribed_to_domain %}
                                        Click to Unsubscribe
                                    {% else %}
                                        Click to Subscribe
                                    {% endif %}
                                {% else %}
                                    <a href="{% url 'account_login' %}"
                                       class="text-white font-bold rounded-lg text-lg px-5 py-2.5">Login to Subscribe</a>
                                {% endif %}
                            </button>
                        </div>
                    </div>
                    <div class="w-[500px] xl:w-[80%] border-[1px] border-gray-300 rounded-2xl shadow-md p-7 cursor-pointer mb-10">
                        <div class="w-full flex items-center">
                            <div class="w-[90px] h-[90px] rounded-full object-fill border-black border-[1px] flex flex-col  overflow-hidden">
                                {% if object.user.username %}
                                    {% if object.user.userprofile.user_avatar %}
                                        <img class="w-full h-full object-cover"
                                             src="{{ MEDIA_URL }}{{ object.user.userprofile.user_avatar }}"
                                             alt="User Profile Logo"
                                             width="auto"
                                             height="auto">
                                    {% else %}
                                        <img class="w-full h-full object-cover"
                                             src="{% gravatar_url object.user.email 100 %}"
                                             alt="User Profile Logo"
                                             width="auto"
                                             height="auto">
                                    {% endif %}
                                {% else %}
                                    <img class="w-full h-full object-cover"
                                         src="{% static 'images/dummy-user.png' %}"
                                         alt="User Profile Logo"
                                         width="auto"
                                         height="auto">
                                {% endif %}
                            </div>
                            <div class="full p-3 flex flex-col justify-center">
                                {% if object.user.username %}
                                    <a class="font-bold text-3xl"
                                       href="{% url 'profile' slug=object.user.username %}">Reported By {{ object.user.username }}</a>
                                {% else %}
                                    <a class="font-bold text-3xl" href="">Reported By Anonymous</a>
                                {% endif %}
                                <p class="text-2xl font-light">
                                    Total points <span class="font-bold">{{ users_score }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="w-full flex justify-end">
                            <button type="button"
                                    id="openModal-{{ object.user.id }}"
                                    class="bg-red-600 hover:bg-red-800 text-white text-2xl px-10 py-2 rounded-lg"
                                    onclick="openModal('{{ object.user.userprofile.btc_address }}','{{ object.user.userprofile.eth_address }}','{{ object.user.userprofile.bch_address }}', '{{ object.user.id }}', '{{ cve_score }}')">
                                Send A TIP
                            </button>
                            <dialog id="dialog-{{ object.user.id }}" class="dialog">
                                <input type="radio"
                                       name="r"
                                       id="bch-{{ object.user.id }}"
                                       checked
                                       class="active">
                                <input type="radio" name="r" id="eth-{{ object.user.id }}">
                                <input type="radio" name="r" id="btc-{{ object.user.id }}">
                                <div class="navigation">
                                    <button class="nav-btn" id="bch-btn-{{ object.user.id }}">BCH</button>
                                    <button class="nav-btn" id="eth-btn-{{ object.user.id }}">Ethereum</button>
                                    <button class="nav-btn" id="btc-btn-{{ object.user.id }}">Bitcoin</button>
                                </div>
                                <div id="slideshow-{{ object.user.id }}" class="slideshow">
                                    <img id="qr-image-{{ object.user.id }}"
                                         alt="QR Code"
                                         height="300"
                                         width="400">
                                    <p id="crypto-name-{{ object.user.id }}" class="crypto-name"></p>
                                    <p id="crypto-address-{{ object.user.id }}" class="crypto-address"></p>
                                    <p id="tip-message" class="crypto-address"></p>
                                </div>
                                <button id="close-{{ object.user.id }}" class="btn btn-danger w-full">Close</button>
                            </dialog>
                        </div>
                    </div>
                </div>
            </div>
            {% include "comments2.html" %}
        </div>
    </div>
</div>
<aside aria-label="Related articles"
       class="w-full flex justify-center items-center bg-gray-50 py-10">
    <div class="w-full px-20 flex flex-col items-center">
        <h2 class="mb-8 text-4xl font-bold text-gray-900 ">
            More Reports from {{ object.user.username|default:"Anonymous" }}
        </h2>
        <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
            {% for bug in more_issues %}
                {% include "_bug.html" %}
            {% endfor %}
        </div>
    </div>
</aside>
<script src="{% static '/company/js/md_editor.js' %}"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/markdown-it@12.1.0/dist/markdown-it.min.js"></script>
<script>
    const md = window.markdownit();
    const markdownContent = `{{ object.markdown_description|escapejs }}`;
    const renderedHtml = md.render(markdownContent);
    // const renderedHtml = parse(markdownContent);
    // const renderedHtml = marked.parse(markdownContent)

    $("#bug_report").html(renderedHtml);


    function subscribe_domain(){
        $.ajax({
            type: 'GET',
            url: '/domain/{{ object.domain.id }}/subscribe/',
            data: {},
            success: function (data) {
                
                if (data === "SUBSCRIBED"){
                    $("#subscribe_domain_btn").text("Click To Unsubscribe");
                    $.notify("Subscribed!", {
                        style: "custom",
                        className: "success"
                    });
                }

                else if (data === "UNSUBSCRIBED"){
                    $("#subscribe_domain_btn").text("Click To Subscribe");
                    $.notify("Unsubscribed!", {
                        style: "custom",
                        className: "success"
                    });
                }
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        })
    }



    $(document).on('click', '.edit-issue-status',(e)=>{
        var s = $('.status').text();
        var action = s == "open" ? "close" : "open";
        $.ajax({
            type: 'POST',
            url: '/issue/update/',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('X-CSRFToken', "{{csrf_token}}");
            },
            data: {
                issue_pk: "{{object.id}}",
                action: action
            },
            success: function (data) {
                console.log(data);

                if (data == "Updated") {
                    if (action == "open") {
                        $('.status').text('open');
                        $('.status').removeClass('label-danger');
                        $('.status').addClass('label-success');
                        $('#issue_stat').text('Click to Close');
                        $.notify("Issue Opened!", {
                        style: "custom",
                        className: "success"
                        });
                    } else {
                        $('.status').text('closed');
                        $('.status').removeClass('label-success');
                        $('.status').addClass('label-danger');
                        $('#issue_stat').text('Click to Open');
                        $.notify("Issue Closed!", {
                        style: "custom",
                        className: "success"
                        });
                    }
                } else {
                    $.notify(
                        "Only the user who has submitted the bug and superuser can close/open an issue"
                    ), {
                        style: "custom",
                        className: "danger"
                    }
                }
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        })
    })

    function sanitizeURL(url) {
        var a = document.createElement('a');
        a.href = encodeURI(url);
        return a.href;
    }

    var label = "{{object.label}}";
    $(document).on('click', '.edit-issue', function (e) {
        $issue_desc = $('.issue-desc').text().trim();
        $('.form input[name=description]').val($issue_desc);
        $('.form input[name=domain]').val($('.issue-domain').text());
        $('.form select').val(label);
        $('.editables').hide();
        $('.form').show();
    });

    $(document).on('click', '.cancel-edit', function (e) {
        $('.form').hide();
        $('.editables').show();
    });

    $(document).on('click', '.save-issue', function (e) {
        e.preventDefault();

        if ($('.form input[name=description]').val().trim().length == 0 ||
            $('.form input[name=domain]').val().trim().length == 0) {
            return;
        }
        var dom_regex = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
        dom_regex = new RegExp(dom_regex);
        var domain_url = $('.form input[name=domain]').val();
        if (domain_url.match(dom_regex) == null) {
            alert('Enter a valid url');
            return;
        }


        $.ajax({
            type: 'POST',
            url: '/issue/edit/',
            data: {
                issue_pk: $('#issue_pk').val(),
                domain: $('.form input[name=domain]').val(),
                description: $('.form input[name=description]').val(),
                label: $('.form select').val(),
                csrfmiddlewaretoken: $('.form input[name=csrfmiddlewaretoken]').val(),
            },
            success: function (data) {
                $('.issue-desc').text($('.form input[name=description]').val());
                $('.issue-domain').text($('.form input[name=domain]').val());
                var sanitizedDomain = sanitizeURL($('.form input[name=domain]').val());
                $('.issue-domain').attr("href", sanitizedDomain);
                label = $('.form select').val();
                var l = $(".form select option[value='" + label + "']").text();
                $('.bug-label').text(l);
                $('.form').hide();
                $('.editables').show();
                $.notify("Issue updated!", {
                    style: "custom",
                    className: "success"
                });
                if (data === "Domain Created")
                    $.notify("Domain Added!", {
                        style: "custom",
                        className: "success"
                    });
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    });
    const openModal = (btc, eth, bch, userId, cve_score) => {
        let severityLevel;
        let suggestedTip;

        if (cve_score >= 9.0) {
            severityLevel = "critical";
            suggestedTip = "$50";
        } else if (cve_score >= 7.0) {
            severityLevel = "high";
            suggestedTip = "$20";
        } else if (cve_score >= 4.0) {
            severityLevel = "medium";
            suggestedTip = "$10";
        } else {
            severityLevel = "low";
            suggestedTip = "$5";
        }

        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('qr-image-'+userId).src = `https://api.qrserver.com/v1/create-qr-code/?data=${address}&size=400x300`;
                document.getElementById('crypto-name-' + userId).textContent = "No address: Will go to BLT Donation";
                document.getElementById('crypto-address-'+userId).textContent = `BCH: ${address}`;
                document.getElementById('tip-message').textContent = `is the address of the BLT monthly leaderboard that is distributed 100% to the top bug finder that month.`;
            }
            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}`;
                document.getElementById('tip-message').textContent = `This CVE is a ${severityLevel} severity, we suggest you tip ${suggestedTip}.`;
            }
        };
        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');
        });
    };
</script>
{% endblock content %}