{% load gravatar %}
<div id="flag_unflag_root" class="flex justify-between">
    {% if request.user.is_authenticated %}
        <!-- <a class="btn btn-info btn-xs flag_unflag" name="{{ object.pk }}">
            <i class="fa fa-thumbs-down"></i> Flag {{ flags }}
        </a> -->
        <button name="{{ object.pk }}"
                class="flag_unflag 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-flag text-2xl mr-2"> </i>
            {{ flags }} Flags
        </button>
    {% else %}
        <!-- <button class="btn btn-info btn-xs flag_unflag" disabled>
            <i class="fa fa-thumbs-down"></i> Flag {{ flags }}
        </button> -->
        <button disabled
                class="flag_unflag flex items-center px-10 h-14 rounded-xl border-[1px] border-gray-300 font-extrabold bg-gray-200 m-5 xl:m-0">
            <i class="fa-solid fa-flag text-2xl mr-2"> </i>
            {{ flags }} Flags
        </button>
    {% endif %}
    {% if flags %}
        <a href="#flagedBy"
           class="flex items-center justify-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 xl:ml-2 liked-by"
           data-toggle="modal">Flagged By</a>
    {% endif %}
    <div id="flagedBy" class="modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h3>Flaged by:</h3>
                    {% for usr in flagers %}
                        <div class="list-group-item">
                            {% if usr.user.socialaccount_set.all.0.get_avatar_url %}
                                <img src="{{ usr.user.socialaccount_set.all.0.get_avatar_url }}"
                                     height="50px"
                                     width="50px"
                                     alt="{{ usr.user.username }}">
                            {% else %}
                                <img src="{% gravatar_url usr.user.email 50 %}"
                                     height="50px"
                                     width="50px"
                                     alt="{{ usr.user.username }}">
                            {% endif %}
                            <a href="{% url 'profile' slug=usr.user.username %}">{{ usr.user.username }}</a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script>
        function flag_unflag_handler(e){
            e.preventDefault();
            var issue_pk = $(this).attr('name');
            $.ajax({
                type: 'GET',
                url: '/flag_issue2/' + issue_pk + '/',
                data: {},
                success: function (data) {
                    $('#flag_unflag_root').html(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>
</div>