{% load gravatar %}
{% load static %}
{% load custom_tags %}
<div class="bug-container flex flex-col p-5 bg-white m-1 w-[100%] h-[300px] rounded-[2.5rem] border-[#e8e8e8] border-2">
    <div class="bug-author bg-red font-medium font-['Inter'] text-[#656565] flex flex-row items-center gap-[0.8rem]">
        {% if bug.user.userprofile.avatar %}
            <img src="{{ bug.user.userprofile.avatar }}"
                 width="30"
                 height="30"
                 class="h-[30px] object-cover img-responsive rounded-full"
                 loading="lazy"
                 alt="user avatar">
        {% elif bug.user.socialaccount_set.all.0.get_avatar_url %}
            <img src="{{ bug.user.socialaccount_set.all.0.get_avatar_url }}"
                 width="30"
                 height="30"
                 class="h-[30px] object-cover img-responsive rounded-full"
                 loading="lazy"
                 alt="user avatar">
        {% elif bug.user.email %}
            <img src="{% gravatar_url bug.user.email 30 %}"
                 width="30"
                 height="30"
                 class="h-[30px] object-cover img-responsive  rounded-full"
                 loading="lazy"
                 alt="user avatar">
        {% else %}
            <img src="{% static 'images/dummy-user.png' %}"
                 width="30"
                 height="30"
                 class="h-[30px] object-cover img-responsive rounded-full"
                 loading="lazy"
                 alt="user avatar">
        {% endif %}
        {% if bug.user.username is not None %}
            <a href="{% url 'profile' slug=bug.user.username %}"
               class="whitespace-nowrap overflow-clip">{{ bug.user }}</a>
        {% else %}
            <span class="whitespace-nowrap overflow-clip">Anonymous</span>
        {% endif %}
        <div class="bug-type bg-[#0097ED] border-[#005AAD] ms-auto me-2 border-[1px] tracking-wider px-3 py-[1px] rounded-full font-['Nunito_Sans'] font-bold text-lg text-white">
            {{ bug.get_label_display }}
        </div>
    </div>
    <div class="bug-desc py-2 h-[100%] font-['Barlow'] font-medium text-[#774343] text-3xl leading-10 overflow-clip">
        <a href="{% url 'issue_view2' slug=bug.id %}">{{ bug.description|truncatechars:100 }}</a>
    </div>
    {% if bug.screenshot %}
        <div class="bug-images h-[160px] flex flex-row justify-between px-3 my-2">
            <img class="bug-img h-[100%] w-[200px] object-contain"
                 src="{{ bug.screenshot.url }}"
                 alt="bug screenshot"
                 width="200px"
                 height="100%">
        </div>
    {% else %}
        <div class="bug-images h-[160px] flex flex-row justify-between my-2">
            {% for bug_key, bug_screenshots in bugs_screenshots.items %}
                {% if bug == bug_key %}
                    {% if bug_screenshots %}
                        {% if bug_screenshots|length == 1 %}
                            <img class="bug-img h-[100%] w-[200px] object-contain"
                                 src="{{ bug_screenshots.0.image.url }}"
                                 alt="bug screenshot"
                                 width="200px"
                                 height="100%">
                        {% else %}
                            <div class="flex flex-row items-center gap-2">
                                <button class="py-4" id="prev-btn">
                                    <i class="fa fa-angle-left fa-2x"></i>
                                </button>
                                <div class="flex flex-row items-center w-[200px] gap-10">
                                    <img id="screenshot"
                                         class="bug-img h-[160px] w-[200px] object-cover"
                                         src="{{ bug_screenshots.0.image.url }}"
                                         alt="bug screenshot"
                                         width="200px"
                                         height="100%">
                                </div>
                                <button class="py-4" id="next-btn">
                                    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
                                </button>
                            </div>
                            <script>
                            var currentIndex = 0;
                            var bugScreenshots = [
                                {% for screenshot in bug_screenshots %}
                                    "{{ screenshot.image.url }}",
                                {% endfor %}
                            ];
                            var screenshotElement = document.getElementById("screenshot");
                            var prevButton = document.getElementById("prev-btn");
                            var nextButton = document.getElementById("next-btn");
        
                            function updateButtons() {
                                prevButton.disabled = currentIndex === 0;
                                nextButton.disabled = currentIndex === bugScreenshots.length - 1;
                            }
        
                            updateButtons();
        
                            document.getElementById("next-btn").addEventListener("click", function() {
                                if (currentIndex < bugScreenshots.length - 1) {
                                    currentIndex++;
                                    screenshotElement.src = bugScreenshots[currentIndex];
                                    updateButtons();
                                }
                            });
        
                            document.getElementById("prev-btn").addEventListener("click", function() {
                                if (currentIndex > 0) {
                                    currentIndex--;
                                    screenshotElement.src = bugScreenshots[currentIndex];
                                    updateButtons();
                                }
                            });
                            </script>
                        {% endif %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
    <div class="bug-actions h-[45px] flex flex-row justify-between">
        <div class="flex flex-row items-center">
            <button {% if not user.is_authenticated %}disabled{% endif %}
                    onclick="like_unlike_handler(event,{{ bug.id }})">
                <svg id="likeSvg{{ bug.id }}"
                     class="scale-125 m-3"
                     width="23"
                     height="23"
                     viewBox="0 0 23 23"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.46692 9.45723V18.6604" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round">
                    </path>
                    <path d="M16.0815 18.6604H7.46693H3.78564V9.4572H7.46693L12.2485 3.87867C12.7023 3.34933 13.4161 3.12177 14.0925 3.29086L14.1362 3.3018C15.3711 3.61052 15.9274 5.04941 15.2214 6.10849L12.9889 9.4572H17.1859C18.3474 9.4572 19.2186 10.5198 18.9908 11.6588L17.8864 17.1807C17.7143 18.0411 16.9589 18.6604 16.0815 18.6604Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round">
                    </path>
                </svg>
            </button>
            <span id="likes_count">0</span>
            {% with user_issue_upvoted_list=user.userprofile.issue_upvoted.all %}
                {% if user_issue_upvoted_list and bug in user_issue_upvoted_list %}
                    <script>
                    $(document).ready(function () {
                        $('#likeSvg{{bug.id}}').find('path').attr('fill', '#a11010');
                        getVoteCount({{bug.id}});
                    });
                    </script>
                {% endif %}
            {% endwith %}
            <button {% if not user.is_authenticated %}disabled{% endif %}
                    onclick="dislike_handler(event,{{ bug.id }})">
                <svg id="dislikeSvg{{ bug.id }}"
                     class="scale-125 m-3"
                     width="23"
                     height="23"
                     viewBox="0 0 23 23"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M 7.467 12.439 L 7.467 3.236" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M 16.081 3.236 L 7.467 3.236 L 3.786 3.236 L 3.786 12.439 L 7.467 12.439 L 12.249 18.018 C 12.702 18.547 13.416 18.774 14.093 18.605 L 14.136 18.594 C 15.371 18.286 15.927 16.847 15.221 15.788 L 12.989 12.439 L 17.186 12.439 C 18.347 12.439 19.219 11.376 18.991 10.237 L 17.886 4.716 C 17.714 3.855 16.959 3.236 16.081 3.236 Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
            <span id="dislikes_count">0</span>
            {% with user_issue_downvoted_list=user.userprofile.issue_downvoted.all %}
                {% if user_issue_downvoted_list and bug in user_issue_downvoted_list %}
                    <script>
                    $(document).ready(function () {
                        $('#dislikeSvg{{bug.id}}').find('path').attr('fill', '#a11010');
                        getVoteCount({{bug.id}});
                    });
                    </script>
                {% endif %}
            {% endwith %}
            <button {% if not user.is_authenticated %}disabled{% endif %}
                    onclick="flag_unflag_handler(event,{{ bug.id }})">
                <svg id="flagSvg{{ bug.id }}"
                     class="scale-125 m-3 "
                     width="23"
                     height="23"
                     viewBox="0 0 23 23"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.06152 19.5808V13.1385V3.93531" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M4.06152 3.93531H18.7867L14.1851 8.53692L18.7867 13.1385H4.06152" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </button>
            {% if user.is_superuser %}
                <a href="{% url 'delete_issue' id=bug.id %}">del</a> |
                <a href="{% url 'admin:website_issue_change' object_id=bug.id %}">edit</a>
            {% endif %}
            {% with user_issue_flagged_list=user.userprofile.issue_flaged.all %}
                {% if user_issue_flagged_list and bug in user_issue_flagged_list %}
                    <script>
                        $(document).ready(function () {
                            $('#flagSvg{{bug.id}}').find('path').attr('fill', '#a11010');
                        });
                    </script>
                {% endif %}
            {% endwith %}
        </div>
        <a target="_blank"
           href="https://twitter.com/intent/tweet?text=Bug Found on @{{ bug.domain_title }} - {{ bug.description }} Report: https://{% env 'FQDN' %}/issue2/{{ bug.id }}"
           class="w-fit flex items-center px-2 h-14 rounded-xl font-extrabold hover:text-red-500 hover:bg-gray-100 m-5 xl:m-0 "
           rel="noopener noreferrer">
            <svg class="scale-125 m-3 ms-1"
                 width="23"
                 height="23"
                 viewBox="0 0 23 23"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M19.3375 5.77593C19.3375 7.30077 18.1014 8.5369 16.5765 8.5369C15.0516 8.5369 13.8156 7.30077 13.8156 5.77593C13.8156 4.2511 15.0516 3.01497 16.5765 3.01497C18.1014 3.01497 19.3375 4.2511 19.3375 5.77593Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" />
                <path d="M8.00513 10.0626L14.1051 7.0126" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" />
                <path d="M8.29475 11.2979C8.29475 12.8227 7.05863 14.0588 5.53379 14.0588C4.00896 14.0588 2.77283 12.8227 2.77283 11.2979C2.77283 9.77298 4.00896 8.5369 5.53379 8.5369C7.05863 8.5369 8.29475 9.77298 8.29475 11.2979Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" />
                <path d="M14.1071 15.5846L8.01294 12.5375" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" />
                <path d="M19.3375 16.8198C19.3375 18.3447 18.1014 19.5808 16.5765 19.5808C15.0516 19.5808 13.8156 18.3447 13.8156 16.8198C13.8156 15.2949 15.0516 14.0588 16.5765 14.0588C18.1014 14.0588 19.3375 15.2949 19.3375 16.8198Z" stroke="#8C0000" stroke-opacity="0.74" stroke-width="1.65658" />
            </svg>
        </a>
    </div>
</div>