{% extends "base.html" %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <style>
        .hero-bugs-container {
            grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
        }

        .bottom-right {
            position: absolute;
            bottom: 10px;
            right: 15px;
        }
    </style>
    <div class="flex flex-col sm:flex-row mt-[35px]">
        <div class="flex-1">
            <div class="hero-bugs-container grid grid-cols-1 sm:grid-cols-2 gap-4 mx-4 my-2.5">
                {% for bug in bugs %}
                    {% include "_bug.html" %}
                {% endfor %}
            </div>
        </div>
        <div class="w-full mt-4  sm:w-[20%] sm:mt-0 sm:order-2 ">
            <div class="mx-4 mr-10 ">{% include "_leaderboard_widget.html" %}</div>
        </div>
    </div>
    <script>
        function like_unlike_handler(e,issue_pk){
            e.preventDefault();
            var issue_pk = issue_pk;
            $.ajax({
                type: 'GET',
                url: '/like_issue2/' + issue_pk + '/',
                data: {},
                success: function (data) {

                    var likesvg = $('#likeSvg' + issue_pk);
                    var dislikesvg = $('#dislikeSvg' + issue_pk);
                    var currentColor = likesvg.find('path').attr('fill');
                    
                    if (currentColor === '#a11010') {
                        likesvg.find('path').attr('fill', ''); 
                    } else {
                        likesvg.find('path').attr('fill', '#a11010');
                        dislikesvg.find('path').attr('fill', ''); 
                    }

                    getVoteCount(issue_pk);
                },
            });
        }
        function dislike_handler(e,issue_pk){
            e.preventDefault();
            var issue_pk = issue_pk;
            $.ajax({
                type: 'GET',
                url: '/dislike_issue2/' + issue_pk + '/',
                data: {},
                success: function (data) {
                    var likesvg = $('#likeSvg' + issue_pk);
                    var dislikesvg = $('#dislikeSvg' + issue_pk);
                    var currentColor = dislikesvg.find('path').attr('fill');
    
                    if (currentColor === '#a11010') {
                        dislikesvg.find('path').attr('fill', ''); 
                    } else {
                        dislikesvg.find('path').attr('fill', '#a11010');
                        likesvg.find('path').attr('fill', ''); 
                    }

                    getVoteCount(issue_pk);
                },
            });
        }
        function flag_unflag_handler(e,issue_pk){
            e.preventDefault();
            var issue_pk = issue_pk;
            $.ajax({
                type: 'GET',
                url: '/flag_issue2/' + issue_pk + '/',
                data: {},
                success: function (data) {
                    // Toggle the color of the SVG
                    var svg = $('#flagSvg' + issue_pk);
                    var currentColor = svg.find('path').attr('fill');
    
                    if (currentColor === '#a11010') {
                        // Change to default color
                        svg.find('path').attr('fill', ''); // Set to default color
                    } else {
                        // Change to full red
                        svg.find('path').attr('fill', '#a11010');
                    }
                },
            });
        }
        function getVoteCount(issue_pk) {
            $.ajax({
                url: `/vote_count/${issue_pk}/`,  // Adjust the URL as needed
                type: 'GET',
                success: function(response) {
                    $('#likes_count').text(response.likes);
                    $('#dislikes_count').text(response.dislikes);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }
    </script>
    <div class="col-md-12">
        <div class="text-center">
            {% if bugs.has_previous %}
                <a href="?page=1{% if user %}&user={{ user }}{% endif %}{% if label %}&label={{ label }}{% endif %}"
                   class="btn btn-default">First</a>
            {% else %}
                <button class="btn btn-default" disabled>First</button>
            {% endif %}
            {% for num in bugs.paginator.page_range %}
                {% if num == bugs.number %}
                    <button class="btn btn-default" disabled>{{ num }}</button>
                {% elif num > bugs.number|add:"-5" and num < bugs.number|add:"5" %}
                    <a href="?page={{ num }}{% if user %}&user={{ user }}{% endif %}{% if label %}&label={{ label }}{% endif %}"
                       class="btn btn-default">{{ num }}</a>
                {% endif %}
            {% endfor %}
            {% if bugs.has_next %}
                <a href="?page={{ bugs.paginator.num_pages }}{% if user %}&user={{ user }}{% endif %}{% if label %}&label={{ label }}{% endif %}"
                   class="btn btn-default">Last</a>
            {% else %}
                <button class="btn btn-default" disabled>Last</button>
            {% endif %}
            <div>Page {{ bugs.number }} of {{ bugs.paginator.num_pages }}</div>
        </div>
    </div>
    <div class="bottom-right">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/new_home.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/JE0QlQ95FVpk0wG9HyFw4D/BLT-Website?type=design&node-id=0%3A1&mode=design&t=glf1ydd0YzYzsUJh-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
{% endblock content %}