{% load gravatar %}
<div class="like_unlike_root flex justify-between">
    {% if request.user.is_authenticated %}
        {% if bookmarked %}
            <button name="{{ object.pk }}"
                    class="bookmark 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">
                <i class="fa-solid fa-bookmark text-2xl mr-2"> </i>
                <p id="bookmark_val">Bookmarked</p>
            </button>
        {% else %}
            <button name="{{ object.pk }}"
                    class="bookmark 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">
                <i class="fa-regular fa-bookmark text-2xl mr-2"> </i>
                <p id="bookmark_val">Bookmark</p>
            </button>
        {% endif %}
    {% endif %}
    <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');
                        $('.bookmark p').text('Bookmark');
                        $.notify("Bookmark Removed!", {
                            style: "custom",
                            className: "success"
                        });
                    }
                    else{
                        $('.bookmark i').removeClass('fa-regular');
                        $('.bookmark i').addClass('fa-solid');
                        $('.bookmark p').text('Bookmarked');
                        $.notify("Bookmark Added!", {
                            style: "custom",
                            className: "success"
                        });
                    }
                },
                error: function () {
                    $.notify("Some error occurred!", {
                        style: "custom",
                        className: "danger"
                    });
                }
            });
        }
    
        // Attach the click event handler
        $('body').on('click', '.bookmark', bookmark_handler);
    </script>
</div>