{% load gravatar %}
{% load custom_tags %}
{% comment %} three dot  {% endcomment %}
<button id="dropdownDefaultButton"
        data-dropdown-toggle="dropdown"
        class="like_unlike border-[1px] rounded-2xl shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2  text-[#0.875rem] leading-4 p-4 "
        type="button">
    <svg viewBox="0 0 16 16" fill="currentColor" height="12px" width="12px">
        <circle cx="8" cy="8" r="1.31"></circle><circle cx="1.31" cy="8" r="1.31"></circle><circle cx="14.69" cy="8" r="1.31"></circle>
    </svg>
</button>
<!-- Dropdown menu -->
<div id="dropdown"
     class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
    <ul class="py-2 m-2 rounded text-gray-700"
        aria-labelledby="dropdownDefaultButton">
        <span class="md:hidden flex flex-col">{% include "./_like_dislike_widget.html" with device="mobile" %}</span>
        <li>
            <a href="https://twitter.com/intent/tweet?text=Bug Found on @{{ object.domain_title }} - {{ object.description }} Report: https://{% env 'FQDN' %}/issue/{{ object.id }}"
               target="_blank"
               rel="noopener noreferrer"
               class="w-[100%] block px-4 py-2 hover:bg-gray-100">Tweet &nbsp;<i class="fa-brands fa-x-twitter fa-lg"></i></a>
        </li>
        <li>
            <button onclick="copyClipboard()"
                    class="flex w-[100%] px-4 py-2 hover:bg-gray-100">
                Copy &nbsp;<i class="fa-solid fa-copy text-3xl text-red-[#4A6676]"></i>
            </button>
        </li>
        <li>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Github &nbsp;<i class="fa-brands fa-github text-3xl text-black"></i></a>
        </li>
        {% if request.user.is_superuser or request.user == object.user %}
            <li>
                <a href="{% url 'delete_issue' id=object.id %}"
                   onclick="return confirm('Are you sure you want to delete this issue?')"
                   class="block px-4 py-2 hover:bg-gray-100"> Delete &nbsp;<i class="fa-solid fa-trash text-2xl text-black"></i></a>
            </li>
        {% endif %}
    </ul>
</div>
<span class="max-sm:hidden">{% include "./_like_dislike_widget.html" with device="desktop" %}</span>
<script>
    function copyClipboard() {
        var textToCopy = "Bug Found on @{{ object.domain_title }} - {{ object.description }} Report: https://{% env 'FQDN' %}/issue/{{ object.id }}";
        
        navigator.clipboard.writeText(textToCopy);
      
        $.notify("Bug details copied to clipboard!", {
            style: "custom",
            className: "success"
        });
      }

      function like_unlike_handler(e) {
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/like_issue3/' + issue_pk + '/',
            data: {},
            success: function (data) {
                $('.like_unlike').remove();
                $('#like-container').append(data);
                if ($("#dislike-btn i").hasClass("fa-solid")) {
                var dislikes = $("#dislikes").text();
                    dislikes =  dislikes-1;
                    $('#dislike-btn').html(
                        dislikes+`&nbsp;
                        <i class="fa-regular fa-thumbs-down text-3xl text-black"></i>`
                    );
                }
            },
        });
        // Later, when you want to "destroy" the event handler:
        $('body').off('click', '.like_unlike', like_unlike_handler);
    }

    // Attach the click event handler
    $('body').on('click', '.like_unlike', like_unlike_handler);

    function dislike_handler(e){
        e.preventDefault();
        var issue_pk = document.getElementById("dislike-btn").getAttribute("name");
        $.ajax({
            type: 'GET',
            url: '/dislike_issue3/' + issue_pk + '/',
            data: {},
            success: function (data) {
                $('.dislike').remove();
                $("#dislike-container").append(data);
                if ($("#like_unlike i").hasClass("fa-solid")) {
                    var likes = $("#likes").text();
                    likes = likes-1;
                    $('#like_unlike').html(
                        likes+`&nbsp;
                        <i class="fa-regular fa-thumbs-up text-3xl text-black"></i>`
                    );
                }
            },
        });
        $('body').off('click', '.dislike', dislike_handler);
    }
    $('body').on('click', '.dislike', dislike_handler);
</script>
<script>
    function flag_unflag_handler(e){
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/flag_issue3/' + issue_pk + '/',
            data: {},
            success: function (data) {
                $('#flag-unflag').remove();
                $('#flag-container').append(data);
            },
        });
            // Later, when you want to "destroy" the event handler:
        $('body').off('click', '#flag-unflag', flag_unflag_handler);
    }

    // Attach the click event handler
    $('body').on('click', '#flag-unflag', flag_unflag_handler);

</script>
<script>
    function bookmark_handler(e){
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/save_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                if (data === "REMOVED"){
                    $('.bookmark i').removeClass('fa-solid');
                    $('.bookmark i').addClass('fa-regular');
                    $.notify("Bookmark Removed!", {
                        style: "custom",
                        className: "success"
                    });
                }
                else{
                    $('.bookmark i').removeClass('fa-regular');
                    $('.bookmark i').addClass('fa-solid');
                    $.notify("Bookmark Added!", {
                        style: "custom",
                        className: "success"
                    });
                }
            },
            error: function (e) {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    }

    // Attach the click event handler
    $('body').on('click', '.bookmark', bookmark_handler);
    async function resolveIssue(){
        var id = {{object.pk}};

        const request = await fetch(`/resolve/${id}/`)
        window.location.reload();
        if(request.status == 200){
        const jsonData = await request.json();
        console.log(jsonData["issue_status"])
        }else if (request.status == 403){
            $.notify("Permission Denied", {
                style: "custom",
                className: "danger"
            });
        }
    }
</script>