{% extends "organization/organization_dashboard_base.html" %}
{% load static %}
{% block title %}
    Manage Bugs
{% endblock title %}
{% block description %}
    Keep track of and manage all bugs in your system. View, filter, and update bug statuses easily to ensure smooth operations.
{% endblock description %}
{% block keywords %}
    Manage Bugs, Bug Tracking, Bug Management, View Bugs, Update Bug Status, Filter Bugs
{% endblock keywords %}
{% block og_title %}
    Manage Bugs - Efficient Bug Tracking and Management
{% endblock og_title %}
{% block og_description %}
    View and manage all bugs in your system. Easily filter, view, and update bug statuses to maintain efficient operations.
{% endblock og_description %}
{% block body %}
    <div class="fixed bottom-2.5 right-3.75">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/organization/organization_manage_bugs.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=3%3A76&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <div class="bg-[#F3F5F7] w-full h-full flex flex-col items-center">
        <div class="flex items-center md:justify-between w-full md:h-max mt-5 flex-col md:flex-row">
            <p class="text-red-700 font-satoshi font-bold text-[35px] px-8">Manage Bugs</p>
            <div class="w-full md:w-[15%] flex justify-center md:justify-end mr-10">
                <a href="{% url 'report' %}"
                   class="flex items-center justify-center md:justify-center px-16 py-7 bg-[#DC4654] rounded-xl hover:bg-red-600 transition-all">
                    <i class="fa-sharp fa-solid fa-plus fa-xl text-white"></i>
                </a>
            </div>
        </div>
        <div class="w-[96%] h-[70vh] overflow-y-scroll flow-root my-10">
            <div class="relative overflow-x-auto shadow-md sm:rounded-lg h-full bg-white">
                <table class="w-full text-sm text-left text-gray-500">
                    <caption class="p-5 text-xl font-semibold text-left text-gray-900 bg-white">
                        <div class="flex w-full justify-between">
                            <h2 class="mt-1 text-xl font-extrabold text-gray-500">Bugs</h2>
                        </div>
                    </caption>
                    <thead class="text-gray-700 uppercase bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Description</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Created On</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Bug Type</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">Status</th>
                            <th scope="col" class="px-6 py-3 text-[1rem]">
                                <span class="sr-only">View</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if issues %}
                            {% for issue in issues %}
                                <tr class="bg-white border-b hover:bg-gray-50 transition-colors">
                                    <th scope="row"
                                        class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                        {{ issue.description|slice:":25" }}...
                                    </th>
                                    <td class="px-6 py-4">{{ issue.created|date:"F j, Y" }}</td>
                                    <td class="px-6 py-4">{{ issue.get_label_display }}</td>
                                    <td class="px-6 py-4">
                                        {% if issue.status == 'open' %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Open</span>
                                        {% else %}
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Closed</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <a href="{% url 'issue_view' issue.pk %}"
                                           class="font-medium text-blue-600 hover:underline">View</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr class="bg-white border-b">
                                <th scope="row"
                                    class="px-6 py-4 font-medium text-red-500 whitespace-nowrap">No Issues Found</th>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock body %}