{% load gravatar %}
{% load custom_tags %}
<!-- Modern redesigned like/dislike/share component -->
<div class="flex flex-wrap gap-x-3 w-full items-center border-y border-gray-300 py-6 my-3">
    <!-- We're removing the three-dot dropdown button for mobile -->
    <!-- Like/dislike widget for all screen sizes -->
    {% include "./_like_dislike_widget.html" %}
    <!-- Flag modal -->
    <div id="flag-modal"
         class="hidden relative z-10"
         aria-labelledby="modal-title"
         role="dialog"
         aria-modal="true">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             aria-hidden="true"></div>
        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
                <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 max-sm:w-full lg:w-[30vw] ">
                    <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start lg:w-full">
                            <div class="mt-3 sm:ml-4 sm:mt-0 sm:text-left lg:w-full">
                                <div class="mt-2">
                                    <h3 class="text-lg font-semibold text-gray-900">Flagged by:</h3>
                                    <div class="mt-4">
                                        <div class="space-y-3">
                                            {% for usr in flagers %}
                                                <div class="flex items-center p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
                                                    {% if usr.user.socialaccount_set.all.0.get_avatar_url %}
                                                        <img src="{{ usr.user.socialaccount_set.all.0.get_avatar_url }}"
                                                             class="h-10 w-10 rounded-full object-cover"
                                                             alt="{{ usr.user.username }}"
                                                             height="40"
                                                             width="40">
                                                    {% else %}
                                                        <img src="{% gravatar_url usr.user.email 50 %}"
                                                             class="h-10 w-10 rounded-full object-cover"
                                                             alt="{{ usr.user.username }}"
                                                             height="40"
                                                             width="40">
                                                    {% endif %}
                                                    <a href="{% url 'profile' slug=usr.user.username %}"
                                                       class="ml-3 font-medium text-gray-700 hover:text-gray-900">
                                                        {{ usr.user.username }}
                                                    </a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                        <button type="button"
                                class="inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                                id="close-flag">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Like modal -->
    <div id="like-modal"
         class="hidden relative z-10"
         aria-labelledby="modal-title"
         role="dialog"
         aria-modal="true">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             aria-hidden="true"></div>
        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
                <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 max-sm:w-full lg:w-[30vw] ">
                    <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start lg:w-full">
                            <div class="mt-3 sm:ml-4 sm:mt-0 sm:text-left lg:w-full">
                                <div class="mt-2">
                                    <h3 class="text-lg font-semibold text-gray-900">Liked By:</h3>
                                    <div class="mt-4">
                                        <div class="space-y-3">
                                            {% for usr in likers %}
                                                <div class="flex items-center p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
                                                    {% if usr.user.socialaccount_set.all.0.get_avatar_url %}
                                                        <img src="{{ usr.user.socialaccount_set.all.0.get_avatar_url }}"
                                                             class="h-10 w-10 rounded-full object-cover"
                                                             alt="{{ usr.user.username }}"
                                                             height="40"
                                                             width="40">
                                                    {% else %}
                                                        <img src="{% gravatar_url usr.user.email 50 %}"
                                                             class="h-10 w-10 rounded-full object-cover"
                                                             alt="{{ usr.user.username }}"
                                                             height="40"
                                                             width="40">
                                                    {% endif %}
                                                    <a href="{% url 'profile' slug=usr.user.username %}"
                                                       class="ml-3 font-medium text-gray-700 hover:text-gray-900">
                                                        {{ usr.user.username }}
                                                    </a>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                        <button type="button"
                                class="inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                                id="close-like">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Keep the existing JavaScript -->
<script>
    function copyClipboard() {
        var textToCopy = "Bug Found on @{{ object.domain_title|escapejs }} - {{ object.description|escapejs }} 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_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                window.location.reload();
            },
        });
    }

    $('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_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                window.location.reload();
            },
        });
    }
    $('body').on('click', '#dislike-btn', dislike_handler);
</script>
<script>
    function flag_unflag_handler(e){
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/flag_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                window.location.reload();
            },
        });
    }

    $('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) {
                window.location.reload();
            },
            error: function (e) {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    }

    $('body').on('click', '#bookmark', bookmark_handler);
</script>
<script>
    async function resolveIssue(){
        var id = {{object.pk}};

        const request = await fetch(`/resolve/${id}/`)
        window.location.reload();
        if (request.status == 403){
            $.notify("Permission Denied", {
                style: "custom",
                className: "danger"
            });
        }
    }
</script>
<script>
    function createIssue(){
        var issue_pk = $("#create_issue").attr('name');
        $.ajax({
            type: 'GET',
            url: '/create_github_issue/' + issue_pk,
            data: {},
            success: function (data) {
                if(data["status"] != "ok"){
                    $.notify(data["status_reason"], {
                        style: "custom",
                        className: "danger"
                    });
                }else{
                    window.location.reload();
                }
            },
        });
    }

    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"
                });
            }
        });
    });
</script>
<script>
    function subscribe_domain(){
        $.ajax({
            type: 'GET',
            url: '/domain/{{ object.domain.id }}/subscribe/',
            data: {},
            success: function (data) {
                window.location.reload();
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        })
    }
    
    function likeOpenn() {
        document.getElementById('like-modal').classList.remove('hidden');
    }
    
    function flagOpenn() {
        document.getElementById('flag-modal').classList.remove('hidden');
    }
    
    document.getElementById('close-like').addEventListener('click', function() {
        document.getElementById('like-modal').classList.add('hidden');
    });
    
    document.getElementById('close-flag').addEventListener('click', function() {
        document.getElementById('flag-modal').classList.add('hidden');
    });
</script>