{% extends "base.html" %}
{% load static %}
{% load custom_filters %}
{% block head %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description"
          content="View details of the Bughunt: {{ hunt_obj.name }}. Check the timeline, prizes, and participants. Stay updated with the latest status and results of the competition.">
    <meta name="keywords"
          content="{{ hunt_obj.name }}, BugHunt, Prizes, Timeline">
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"
            integrity="sha384-GP2+CwBlakZSDJUr+E4JvbxpM75i1i8+RKkieQxzuyDZLG+5105E1OfHIjzcXyWH"
            crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" />
    <link rel="stylesheet"
          href="https://unpkg.com/@tailwindcss/typography@0.2.x/dist/typography.min.css" />
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/codemirror@5.59.2/lib/codemirror.min.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
          rel="stylesheet">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
          integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer" />
    <title>Hunt Info</title>
{% endblock head %}
{% block style %}
    <style>
        .cursive {
            font-family: 'Nanum Pen Script', cursive;
        }
        [x-cloak] { display: none; }

        .CodeMirror-focused {   
            border-radius: .375rem;
            outline: 2px solid transparent;
            outline-offset: 2px;
            --tw-ring-opacity: 0.5;
            --tw-ring-color: rgba(199, 210, 254, var(--tw-ring-opacity));
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        }
        .CodeMirror {
            padding: 0.75rem;
            font-family: inherit;
            font-size: inherit;
            border-bottom-left-radius: .375rem;
            border-bottom-right-radius: .375rem;
            --tw-border-opacity: 1;
            border: 1px solid rgba(209, 213, 219, var(--tw-border-opacity));
        }
        .CodeMirror.CodeMirror-focused {
            --tw-border-opacity: 1;
            border-color: rgba(165, 180, 252, var(--tw-border-opacity));
        }

        .cm-s-default .cm-header,
        .cm-s-default .cm-variable-2 {
            color: rgb(31, 41, 55);
        }

        .dropdown {
            min-width: 160px;
            z-index: 1000;
        }

        .pagination-button:disabled {
            background-color: #d1d5db; /* Gray background */
            color: #6b7280; /* Gray text */
            cursor: not-allowed; /* Change cursor to indicate disabled */
            box-shadow: none; /* Remove shadow for disabled state */
        }

        .crypto-address {
        text-align: center;
        }

        .dialog {
            /* position: relative; */
        }

        .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 */
        }

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

        .nav-btn {
            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 */
        }

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

    </style>
{% endblock style %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="h-full bg-gray-200 p-8">
        <div class="bg-white rounded-lg shadow-xl pb-8">
            <div class="w-full h-[250px]">
                <img src="{% if banner_src %} {{ MEDIA_URL }}{{ banner_src }} {% else %}https://versohydraulic.com/bitrix/templates/aspro-allcorp/images/background.png {% endif %}"
                     class="w-full h-full rounded-tl-lg rounded-tr-lg object-cover"
                     width="100%"
                     height="100%"
                     alt="banner">
            </div>
            <div class="flex flex-col items-center -mt-20">
                <img src="{% if hunt_obj.logo %} {{ MEDIA_URL }}{{ hunt_obj.logo }} {% else %} https://via.placeholder.com/160?text=No+Logo {% endif %}"
                     class="w-40 h-40 border-4  rounded-full"
                     width="100"
                     height="100"
                     alt="logo">
                <div class="flex items-center space-x-2 mt-2">
                    <p class="text-2xl">{{ hunt_obj.name }}</p>
                    <a href="{{ hunt_obj.url }}" class="m-0 p-0">
                        <i class="fa-sharp fa-solid fa-arrow-up-right-from-square fa-lg text-[#596780] hover:text-black"></i>
                    </a>
                </div>
            </div>
            <div class="flex-1 flex flex-col items-center lg:items-end justify-end px-8 mt-2">
                <div class="flex items-center space-x-4 mt-2">
                    {% if is_hunt_manager and not hunt_obj.result_published %}
                        <a href="{% url 'end_bughunt' hunt_obj.id %}"
                           class="flex items-center bg-red-600 hover:bg-red-700 text-gray-100 px-4 py-2 rounded text-sm space-x-2 transition duration-100">
                            <i class="fa-sharp fa-solid fa-bug fa-lg text-white"></i>
                            <span>End Bughunt</span>
                        </a>
                    {% elif not is_hunt_manager and not hunt_obj.result_published %}
                        <a href="#"
                           onclick="history.back(); return false;"
                           class="flex items-center bg-red-600 hover:bg-red-700 text-gray-100 px-4 py-2 rounded text-sm space-x-2 transition duration-100">
                            <i class="fa-sharp fa-solid fa-cog fa-lg text-white"></i>
                            <span>Back</span>
                        </a>
                        <a href="{% url 'report' %}?hunt={{ hunt_obj.id }}"
                           class="flex items-center bg-red-600 hover:bg-red-700 text-gray-100 px-4 py-2 rounded text-sm space-x-2 transition duration-100">
                            <i class="fa-sharp fa-solid fa-bug fa-lg text-white"></i>
                            <span>Submit Bug</span>
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="my-4 flex flex-col 2xl:flex-row space-y-4 2xl:space-y-0 2xl:space-x-4">
            <div class="w-full flex flex-col 2xl:w-1/3">
                <div class="flex-1 bg-white rounded-lg shadow-xl p-8">
                    <h4 class="text-xl text-gray-900 font-bold">BugHunt Info</h4>
                    <ul class="mt-2 text-gray-700">
                        <li class="flex border-y py-2 my-2">
                            <span class="font-bold w-24">Hunt:</span>
                            <span class="text-gray-700">{{ hunt_obj.name }}</span>
                        </li>
                        <li class="flex border-b py-2 my-2">
                            <span class="font-bold w-24">Url</span>
                            <span class="text-gray-700">{{ hunt_obj.url }}</span>
                        </li>
                        <li class="flex border-b py-2 my-2">
                            <span class="font-bold w-24">Domain</span>
                            <span class="text-gray-700">{{ hunt_obj.domain.name }}</span>
                        </li>
                        <li class="flex border-b py-2 my-2">
                            <span class="font-bold w-24">Starts On:</span>
                            <span class="text-gray-700">{{ hunt_obj.starts_on.day }} / {{ hunt_obj.starts_on.month }} / {{ hunt_obj.starts_on.year }}</span>
                        </li>
                        <li class="flex border-b py-2 my-2">
                            <span class="font-bold w-24">Ends On:</span>
                            <span class="text-gray-700">{{ hunt_obj.end_on.day }} / {{ hunt_obj.end_on.month }} / {{ hunt_obj.end_on.year }}</span>
                        </li>
                        <li class="flex border-b py-2 my-2">
                            <span class="font-bold w-24">Status:</span>
                            {% if hunt_obj.result_published %}
                                <span class="text-red-500 font-bold">ENDED</span>
                            {% else %}
                                <span class="text-green-500 font-bold">ONGOING</span>
                            {% endif %}
                        </li>
                    </ul>
                </div>
                <div class="flex-1 bg-white rounded-lg shadow-xl mt-4 p-8">
                    <h4 class="text-xl text-gray-900 font-bold">Activity log</h4>
                    <div class="relative px-4">
                        <div class="absolute h-full border border-dashed border-opacity-20 border-secondary"></div>
                        <!-- start::Timeline item -->
                        <div class="flex items-center w-full my-6 -ml-1.5">
                            <div class="w-1/12 z-10">
                                <div class="w-3.5 h-3.5 bg-red-600 rounded-full"></div>
                            </div>
                            <div class="w-11/12">
                                <p class="text-sm">BugHunt created at: {{ hunt_obj.created|date:"d/m/Y" }}</p>
                                <p class="text-xs text-gray-500">{{ hunt_obj.created|timesince }} ago</p>
                            </div>
                        </div>
                        <div class="flex items-center w-full my-6 -ml-1.5">
                            <div class="w-1/12 z-10">
                                <div class="w-3.5 h-3.5 bg-red-600 rounded-full"></div>
                            </div>
                            <div class="w-11/12">
                                <p class="text-sm">Last modification in BugHunt: {{ hunt_obj.modified|date:"d/m/Y" }}</p>
                                <p class="text-xs text-gray-500">{{ hunt_obj.modified|timesince }} ago</p>
                            </div>
                        </div>
                        {% if first_bug %}
                            <!-- First Bug in the Domain -->
                            <div class="flex items-center w-full my-6 -ml-1.5">
                                <div class="w-1/12 z-10">
                                    <div class="w-3.5 h-3.5 bg-red-600 rounded-full"></div>
                                </div>
                                <div class="w-11/12">
                                    <p class="text-sm">First bug in this BugHunt: {{ first_bug.created|date:"d/m/Y" }}</p>
                                    <p class="text-xs text-gray-500">{{ first_bug.created|timesince }} ago</p>
                                </div>
                            </div>
                        {% endif %}
                        {% if last_bug %}
                            <!-- Last Bug Created in the Domain -->
                            <div class="flex items-center w-full my-6 -ml-1.5">
                                <div class="w-1/12 z-10">
                                    <div class="w-3.5 h-3.5 bg-red-600 rounded-full"></div>
                                </div>
                                <div class="w-11/12">
                                    <p class="text-sm">Last bug created in this BugHunt: {{ last_bug.created|date:"d/m/Y" }}</p>
                                    <p class="text-xs text-gray-500">{{ last_bug.created|timesince }} ago</p>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="flex flex-col w-full 2xl:w-2/3">
                <div class="flex flex-col w-full">
                    <div class="flex-1 bg-white rounded-lg shadow-xl p-8">
                        <h4 class="text-xl text-gray-900 font-bold">Statistics</h4>
                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-4">
                            <div class="px-6 py-6 bg-gray-100 border border-gray-300 rounded-lg shadow-xl">
                                <div class="flex items-center justify-between">
                                    <span class="font-bold text-sm text-indigo-600">Total Rewarded</span>
                                </div>
                                <div class="flex items-center justify-between mt-6">
                                    <div>
                                        <svg class="w-12 h-12 p-2.5 bg-indigo-400 bg-opacity-20 rounded-full text-indigo-600 border border-indigo-600"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                            </path>
                                        </svg>
                                    </div>
                                    <div class="flex flex-col">
                                        <div class="flex items-end">
                                            <span class="text-2xl 2xl:text-3xl font-bold">${{ stats.total_rewarded }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="px-6 py-6 bg-gray-100 border border-gray-300 rounded-lg shadow-xl">
                                <div class="flex items-center justify-between">
                                    <span class="font-bold text-sm text-green-600">Total Bugs</span>
                                </div>
                                <div class="flex items-center justify-between mt-6">
                                    <div>
                                        <svg class="w-12 h-12 p-2.5 bg-green-400 bg-opacity-20 rounded-full text-green-600 border border-green-600"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z">
                                            </path>
                                        </svg>
                                    </div>
                                    <div class="flex flex-col">
                                        <div class="flex items-end">
                                            <span class="text-2xl 2xl:text-3xl font-bold">{{ stats.total_bugs }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="px-6 py-6 bg-gray-100 border border-gray-300 rounded-lg shadow-xl">
                                <div class="flex items-center justify-between">
                                    <span class="font-bold text-sm text-red-600">Accepted Bugs</span>
                                </div>
                                <div class="flex items-center justify-between mt-6">
                                    <div>
                                        <svg class="w-12 h-12 p-2.5 bg-red-400 bg-opacity-20 rounded-full text-red-600 border border-red-600"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z">
                                            </path>
                                        </svg>
                                    </div>
                                    <div class="flex flex-col">
                                        <div class="flex items-end">
                                            <span class="text-2xl 2xl:text-3xl font-bold">{{ stats.total_bug_accepted }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-white w-full h-full my-5 p-5 rounded-lg">
                    <div class="w-full flex justify-between">
                        <h4 class="text-xl text-gray-900 font-bold mb-5">BUGHUNT WINNERS</h4>
                    </div>
                    <div class="relative overflow-x-auto shadow-md sm:rounded-lg max-h-[550px] overflow-y-scroll">
                        <table id="winnersTable" class="w-full text-sm text-left text-gray-500">
                            <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3">Winner</th>
                                    <th scope="col" class="px-6 py-3">Prize</th>
                                    <th scope="col" class="px-6 py-3">Amount</th>
                                    <th scope="col" class="px-6 py-3">Action</th>
                                </tr>
                            </thead>
                            <tbody id="winnersBody">
                                {% for winner in winners %}
                                    <tr class="winner-row bg-white border-b">
                                        <td scope="row"
                                            class="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap">
                                            <img class="rounded-full"
                                                 src="{% if winner.winner.userprofile.user_avatar %} {{ MEDIA_URL }}{{ winner.winner.userprofile.user_avatar }} {% else %} https://via.placeholder.com/100?text=No+Avatar {% endif %}"
                                                 alt="avatar"
                                                 width="40"
                                                 height="40">
                                            <div class="pl-3">
                                                <a href="{% url 'profile' winner.winner.username %}"
                                                   class="font-medium text-gray-900 hover:text-gray-600">{{ winner.winner.username }}</a>
                                                <div class="font-normal text-gray-500">{{ winner.winner.email }}</div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4">{{ winner.prize.name }}</td>
                                        <td class="px-6 py-4">{{ winner.prize.value }}</td>
                                        <td class="px-6 py-4">
                                            <button type="button"
                                                    id="openModal-{{ winner.winner.id }}"
                                                    class="bg-red-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-red-700 transition-colors duration-300 ease-in-out"
                                                    onclick="openModal('{{ winner.winner.userprofile.btc_address }}', '{{ winner.winner.userprofile.eth_address }}', '{{ winner.winner.userprofile.bch_address }}', '{{ winner.winner.id }}')">
                                                Pay The Prize
                                            </button>
                                        </td>
                                    </tr>
                                    <dialog id="dialog-{{ winner.winner.id }}" class="dialog">
                                        <input type="radio"
                                               name="r"
                                               id="bch-{{ winner.winner.id }}"
                                               checked
                                               class="active">
                                        <input type="radio" name="r" id="eth-{{ winner.winner.id }}">
                                        <input type="radio" name="r" id="btc-{{ winner.winner.id }}">
                                        <div class="navigation">
                                            <button class="nav-btn border font-medium px-4 py-2 hover:bg-red-500 mx-2"
                                                    id="bch-btn-{{ winner.winner.id }}">BCH</button>
                                            <button class="nav-btn border font-medium px-4 py-2 hover:bg-red-500 mx-2"
                                                    id="eth-btn-{{ winner.winner.id }}">Ethereum</button>
                                            <button class="nav-btn border font-medium px-4 py-2 hover:bg-red-500 mx-2"
                                                    id="btc-btn-{{ winner.winner.id }}">Bitcoin</button>
                                        </div>
                                        <div id="slideshow-{{ winner.winner.id }}" class="slideshow mt-[50px]">
                                            <img id="qr-image-{{ winner.winner.id }}"
                                                 alt="QR Code"
                                                 height="300"
                                                 width="400">
                                            <p id="crypto-name-{{ winner.winner.id }}"
                                               class="crypto-name font-semibold"></p>
                                            <p id="crypto-address-{{ winner.winner.id }}" class="crypto-address"></p>
                                        </div>
                                        <!-- app css in tailwind a close button which take whole width of the dialog -->
                                        <button id="close-{{ winner.winner.id }}"
                                                class="w-full bg-red-600 text-white font-bold py-2">Close</button>
                                    </dialog>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <!-- Pagination Controls -->
                    <div id="paginationControls" class="flex justify-center mt-5">
                        <button id="prevPage"
                                class="pagination-button px-4 py-2 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 transition-colors duration-300 ease-in-out">
                            Previous
                        </button>
                        <span id="pageInfo" class="mx-4 text-gray-700 font-medium"></span>
                        <button id="nextPage"
                                class="pagination-button px-4 py-2 bg-red-600 text-white font-semibold rounded-lg shadow-md hover:bg-red-700 transition-colors duration-300 ease-in-out">
                            Next
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white w-full p-10 my-5 rounded-lg shadow-md">
            <div class="w-full flex justify-between">
                <h4 class="text-xl text-gray-900 font-bold mb-5">Description</h4>
            </div>
            <div class="w-full">
                <div x-data="markdown()"
                     x-init=" convertHtmlToMarkdown(); codeMirrorEditor = CodeMirror.fromTextArea($refs.input, { mode: 'markdown', theme: 'default', lineWrapping: true });  codeMirrorEditor.setValue(content); codeMirrorEditor.setSize('100%', height); setTimeout(function() { codeMirrorEditor.refresh(); }, 1);  codeMirrorEditor.on('change', () => content = codeMirrorEditor.getValue()) "
                     class="relative"
                     x-cloak>
                    <div class="bg-gray-50 border border-b-0 border-gray-300 top-0 left-0 right-0 block rounded-t-md">
                        <button type="button"
                                id="mdPreview"
                                class="py-2 px-4 inline-block text-gray-400 font-semibold"
                                :class="{ 'text-indigo-600': tab === 'preview' && showConvertedMarkdown === true }"
                                x-on:click.prevent="tab = 'preview'; convertedMarkdown()">
                            Click for the Description
                        </button>
                    </div>
                    <div x-show="showConvertedMarkdown">
                        <div x-html="convertedContent"
                             class="w-full prose max-w-none prose-indigo leading-6 rounded-b-md shadow-sm border border-gray-300 p-5 bg-white overflow-y-auto"
                             :style="`height: ${height}; max-width: 100%`"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white w-full p-10 my-5 rounded-lg shadow-md">
            <div class="w-full flex justify-between">
                <h4 class="text-xl text-gray-900 font-bold mb-5">Rewards</h4>
            </div>
            <div class="flex justify-start w-full overflow-x-scroll">
                {% for reward in rewards %}
                    <div class="min-w-[400px] w-full max-w-sm p-4 m-5 bg-white border border-gray-200 rounded-lg shadow-md sm:p-8">
                        <h5 class="mb-4 text-xl font-medium text-gray-700">{{ reward.name }}</h5>
                        <div class="flex items-baseline text-gray-900">
                            <span class="text-3xl font-semibold">$</span>
                            <span class="text-5xl font-extrabold tracking-tight">{{ reward.value }}</span>
                        </div>
                        <ul role="list" class="space-y-5 my-7">
                            <li class="flex space-x-3 items-center">
                                <svg class="flex-shrink-0 w-4 h-4 text-red-600"
                                     aria-hidden="true"
                                     xmlns="http://www.w3.org/2000/svg"
                                     fill="currentColor"
                                     viewBox="0 0 20 20">
                                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
                                </svg>
                                {% if reward.valid_submissions_eligible %}
                                    <span class="text-base font-normal leading-tight text-gray-500">Each Accepted Bug will recieve ${{ reward.value }}</span>
                                {% else %}
                                    <span class="text-base font-normal leading-tight text-gray-500">Top {{ reward.no_of_eligible_projects }} Users</span>
                                {% endif %}
                            </li>
                            {% if reward.prize_in_crypto %}
                                <li class="flex space-x-3 items-center">
                                    <svg class="flex-shrink-0 w-4 h-4 text-red-600"
                                         aria-hidden="true"
                                         xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor"
                                         viewBox="0 0 20 20">
                                        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
                                    </svg>
                                    <span class="text-base font-normal leading-tight text-gray-500">Prize paid in cryptocurrency</span>
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="w-full flex justify-between min-h-[80vh] flex-col md:flex-row">
            <div class="flex flex-col w-full md:w-[80%] mr-5 items-start bg-white rounded-xl p-5 overflow-x-hidden overflow-y-scroll">
                <div class="w-full flex justify-between">
                    <h4 class="text-xl text-gray-900 font-bold mb-5">Latest Bugs Reported ({{ latest_issues|length }})</h4>
                    <a href="{% url 'hunts' %}" class="text-md text-blue-600">View all</a>
                </div>
                {% if latest_issues|length > 0 %}
                    {% for issue in latest_issues %}
                        <div class="w-full h-[200px] flex px-5 my-2 py-6 bg-white rounded-lg shadow-md hover:shadow-xl transition-all">
                            <div class="w-[10%] mr-5 h-full flex items-center">
                                <img src="{% if issue.first_screenshot %} {{ MEDIA_URL }}{{ issue.first_screenshot }} {% else %} https://via.placeholder.com/100?text=No+Screenshot {% endif %}"
                                     alt=""
                                     width="100%"
                                     height="100%">
                            </div>
                            <div class="w-full h-full">
                                <div class="flex justify-between items-center">
                                    <span class="font-light text-gray-600">Reported to {{ issue.domain__name }} on {{ issue.created|date:"d/m/Y" }}</span>
                                    <div>
                                        <a class="px-2 py-1 mx-2 bg-red-600 text-white font-bold rounded hover:bg-red-500">#{{ issue.label }}</a>
                                        <a class="px-2 py-1 mx-2 bg-red-600 text-white font-bold rounded hover:bg-red-500">#{{ issue.status }}</a>
                                        {% if issue.verified %}
                                            <a class="px-2 py-1 mx-2 bg-red-600 text-white font-bold rounded hover:bg-red-500">#Accepted</a>
                                            <a class="px-2 py-1 mx-2 bg-red-600 text-white font-bold rounded hover:bg-red-500"># ${{ issue.rewarded }}</a>
                                        {% endif %}
                                        {% if is_hunt_manager and issue.user__id and not issue.verified and not hunt_obj.result_published %}
                                            <button id="accept-btn-{{ issue.id }}"
                                                    class="px-2 py-1 mx-2 bg-red-600 text-white font-bold rounded hover:bg-red-500"
                                                    onclick="toggleDropdown({{ issue.id }})">Accept Bug</button>
                                            <div id="dropdown-{{ issue.id }}"
                                                 class="dropdown border hidden absolute bg-white shadow-lg rounded mt-2">
                                                <a href="{% url 'accept_bug' issue.id 'no_reward' %}"
                                                   class="block px-4 py-2 text-gray-800 hover:bg-red-500 hover:text-white">Accept without reward</a>
                                                {% if rewards|length > 0 %}
                                                    {% for reward in rewards %}
                                                        {% if reward.valid_submissions_eligible %}
                                                            <a href="{% url 'accept_bug' issue.id reward.id %}"
                                                               class="block px-4 py-2 text-gray-800 hover:bg-red-500 hover:text-white">Reward: {{ reward.name }} - ${{ reward.value }}</a>
                                                        {% else %}
                                                            {% if winners_count|get_item:reward.id < reward.no_of_eligible_projects %}
                                                                <a href="{% url 'accept_bug' issue.id reward.id %}"
                                                                   class="block px-4 py-2 text-gray-800 hover:bg-red-500 hover:text-white">Reward: {{ reward.name }} - ${{ reward.value }}</a>
                                                            {% endif %}
                                                        {% endif %}
                                                    {% endfor %}
                                                {% else %}
                                                    <a href="#"
                                                       class="block px-4 py-2 text-gray-800 hover:bg-red-500 hover:text-white">No rewards available</a>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <a class="text-xl text-black font-bold hover:text-gray-700"
                                       href="{% url 'issue_view' issue.id %}">{{ issue.description }}</a>
                                </div>
                                <div class="flex justify-between items-center mt-4">
                                    <div>
                                        <a class="flex items-center"
                                           href="{% url 'profile' issue.user__username %}">
                                            <img class="mr-3 w-10 h-10 object-cover rounded-full hidden sm:block"
                                                 src="{% if issue.user__userprofile__user_avatar %} {{ MEDIA_URL }}{{ issue.user__userprofile__user_avatar }} {% else %} https://via.placeholder.com/40?text=No+Avatar {% endif %}"
                                                 alt="avatar"
                                                 width="40px"
                                                 height="40px">
                                            <h1 class="text-gray-700 font-bold">{{ issue.user__username }}</h1>
                                        </a>
                                    </div>
                                    <a class="text-blue-600 hover:underline"
                                       href="{% url 'issue_view' issue.id %}">Read more</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="w-full h-full flex items-center justify-center">
                        <p class="text-xl text-red-500">No bugs reported</p>
                    </div>
                {% endif %}
            </div>
            <div class="bg-white rounded-lg shadow-xl p-8 w-full mt-5 md:w-[20%] md:mt-0 overflow-y-scroll">
                <div class="flex items-center justify-between">
                    <h4 class="text-xl text-gray-900 font-bold">Top Testers ({{ top_testers | length }})</h4>
                </div>
                <div class="flex flex-wrap justify-between mt-10">
                    {% for tester in top_testers %}
                        <a href="{% url 'profile' tester.user__username %}"
                           class="flex flex-col items-center m-5 justify-center text-gray-800 hover:text-red-600"
                           title="View Profile">
                            <div class="w-[100px] h-[100px] rounded-full border-[1px] border-gray-500 overflow-hidden flex items-center justify-center">
                                <img src="{% if tester.user__userprofile__user_avatar %} {{ MEDIA_URL }}{{ tester.user__userprofile__user_avatar }} {% else %} https://via.placeholder.com/100?text=No+Avatar {% endif %}"
                                     class="object-cover"
                                     width="100%"
                                     height="100%"
                                     alt="Avatar">
                            </div>
                            <p class="text-center font-bold text-sm mt-1">{{ tester.user__username }}</p>
                            <p class="text-xs text-gray-500 text-center">Reported {{ tester.count }} Bugs</p>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.59.2/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.59.2/mode/markdown/markdown.js"></script>
<script src="https://cdn.jsdelivr.net/npm/turndown@7.0.0/dist/turndown.min.js"></script>
<script src="https://unpkg.com/marked@0.3.6/lib/marked.js"></script>
<script>
    function markdown() {
        return {
            height: '500px',
            tab: 'write',
            content: '',
            showConvertedMarkdown: false,
            convertedContent: '',
            convertedMarkdown() {
                this.showConvertedMarkdown = true;
                this.convertedContent = marked(`{{ hunt_obj.description }}`, { sanitize: true });
            },
            convertHtmlToMarkdown() {
                turndownService = new TurndownService({
                    headingStyle: 'atx',
                    codeBlockStyle: 'fenced'
                });

                this.content = turndownService.turndown(`
                    <h1 id="sample-markdown">Sample Markdown</h1>
                    <p>This is some basic, sample markdown.</p>
                    <h2 id="second-heading">Second Heading</h2>
                    <ul>
                    <li>Unordered lists, and:<ol>
                    <li>One</li>
                    <li>Two</li>
                    <li>Three</li>
                    </ol>
                    </li>
                    <li>More</li>
                    </ul>
                    <blockquote>
                    <p>Blockquote</p>
                    </blockquote>
                    <p>And <strong>bold</strong>, <em>italics</em>, and even <em>italics and later <strong>bold</strong></em>. Even <del>strikethrough</del>. <a href="https://markdowntohtml.com">A link</a> to somewhere.</p>
                    <p>And code highlighting:</p>
                    <pre><code class="lang-js"><span class="hljs-keyword">var</span> foo = <span class="hljs-string">'bar'</span>;

                    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">baz</span><span class="hljs-params">(s)</span> </span>{
                    <span class="hljs-keyword">return</span> foo + <span class="hljs-string">':'</span> + s;
                    }
                    </code></pre>
                    <p>Or inline code like <code>var foo = &#39;bar&#39;;</code>.</p>
                    <p>Or an image of bears</p>
                    <p><img src="http://placebear.com/200/200" width="100%" height="100%" alt="bears"></p>
                    <p>The end ...</p>
                `);
            }
        }
    }
    let prev = document.getElementById("mdPreview");
    prev.addEventListener('click', () => {
        markdown();
    });

    let openDropdownId = null;

    function toggleDropdown(issueId) {
        const dropdown = document.getElementById(`dropdown-${issueId}`);
        const button = document.getElementById(`accept-btn-${issueId}`);

        if (openDropdownId && openDropdownId !== issueId) {
            // Close the previously open dropdown
            document.getElementById(`dropdown-${openDropdownId}`).classList.add('hidden');
            document.getElementById(`accept-btn-${openDropdownId}`).textContent = 'Accept Bug';
        }

        if (dropdown.classList.contains('hidden')) {
            // Open the new dropdown
            dropdown.classList.remove('hidden');
            button.textContent = 'Accept Bug';
            openDropdownId = issueId;
        } else {
            // Close the current dropdown
            dropdown.classList.add('hidden');
            button.textContent = 'Accept Bug';
            openDropdownId = null;
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const rowsPerPage = 5;
        const table = document.getElementById('winnersTable');
        const rows = Array.from(table.getElementsByClassName('winner-row'));
        const totalRows = rows.length;
        const totalPages = Math.ceil(totalRows / rowsPerPage);
        let currentPage = 1;

        function showPage(page) {
            rows.forEach((row, index) => {
                row.style.display = (index >= (page - 1) * rowsPerPage && index < page * rowsPerPage) ? '' : 'none';
            });
            document.getElementById('pageInfo').textContent = `Page ${page} of ${totalPages}`;

            // Update button states
            document.getElementById('prevPage').disabled = page === 1;
            document.getElementById('nextPage').disabled = page === totalPages;
        }

        document.getElementById('prevPage').addEventListener('click', function () {
            if (currentPage > 1) {
                currentPage--;
                showPage(currentPage);
            }
        });

        document.getElementById('nextPage').addEventListener('click', function () {
            if (currentPage < totalPages) {
                currentPage++;
                showPage(currentPage);
            }
        });

        // Initial page load
        showPage(currentPage);
    });

    const openModal = (btc, eth, bch, userId) => {
        // Close any existing modals
        document.querySelectorAll('dialog[open]').forEach(dialog => dialog.close());

        // Set up the crypto options
        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();

        
        // Set up the navigation buttons
        const bchBtn = document.getElementById('bch-btn-' + userId);
        const ethBtn = document.getElementById('eth-btn-' + userId);
        const btcBtn = document.getElementById('btc-btn-' + userId);

        // Open the corresponding modal
        const dialog = document.getElementById('dialog-' + userId);
        if (dialog) {
            dialog.showModal();
            bchBtn.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        // Close the modal when the close button is clicked
        document.getElementById('close-' + userId).addEventListener('click', function() {
            if (dialog) {
                dialog.close();
                bchBtn.classList.remove('active');
                ethBtn.classList.remove('active');
                btcBtn.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        });

        bchBtn.addEventListener('click', () => {
            currentIndex = 0;
            updateSlide();
            // add active class to the button and remove it from the others
            bchBtn.classList.add('active');
            ethBtn.classList.remove('active');
            btcBtn.classList.remove('active');
        });

        ethBtn.addEventListener('click', () => {
            currentIndex = 1;
            updateSlide();
            // add active class to the button and remove it from the others
            bchBtn.classList.remove('active');
            ethBtn.classList.add('active');
            btcBtn.classList.remove('active');
        });

        btcBtn.addEventListener('click', () => {
            currentIndex = 2;
            updateSlide();
            // add active class to the button and remove it from the others
            bchBtn.classList.remove('active');
            ethBtn.classList.remove('active');
            btcBtn.classList.add('active');
        });
    };
</script>