{% extends "base.html" %}
{% load gravatar %}
{% load static %}
{% block title %}
    Domain Scoreboard
{% endblock title %}
{% block description %}
    Track and compare domain performance. View open and closed issues, email events, and the top tester for each domain to monitor activity and engagement.
{% endblock description %}
{% block keywords %}
    Domain Scoreboard, Track Domain Performance, Open Issues, Closed Issues, Email Events, Top Tester
{% endblock keywords %}
{% block og_title %}
    Domain Scoreboard - Monitor Domain Performance
{% endblock og_title %}
{% block og_description %}
    Access the domain scoreboard to track and compare domain performance. View details on open and closed issues, email events, and the top tester for each domain.
{% endblock og_description %}
{% load humanize %}
{% block style %}
    {% include "includes/sidenav.html" %}
{% endblock style %}
{% block content %}
    <div class="fixed bottom-4 right-4 space-x-2">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/scoreboard.html"
           class="text-gray-600 hover:text-gray-800">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=1307%3A653&t=pqxWpF3hcYxjEDrs-1"
           class="text-gray-600 hover:text-gray-800">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <div class="container mx-auto px-4 py-8">
        <h2 class="text-3xl font-bold mb-8">Domain Scoreboard</h2>
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-[#e74c3c]">
                        <tr>
                            <th scope="col"
                                class="px-6 py-4 text-left text-sm font-semibold text-white">Logo</th>
                            <th scope="col"
                                class="px-6 py-4 text-left text-sm font-semibold text-white">
                                <a href="?sort_by=name&sort_order={% if sort_by == 'name' and sort_order == 'asc' %}desc{% else %}asc{% endif %}"
                                   class="text-white hover:text-white/80">Domain Name</a>
                            </th>
                            <th scope="col"
                                class="px-6 py-4 text-center text-sm font-semibold text-white">
                                <a href="?sort_by=open_issues_count&sort_order={% if sort_by == 'open_issues_count' and sort_order == 'asc' %}desc{% else %}asc{% endif %}"
                                   class="text-white hover:text-white/80">Open Issues</a>
                            </th>
                            <th scope="col"
                                class="px-6 py-4 text-center text-sm font-semibold text-white">
                                <a href="?sort_by=closed_issues_count&sort_order={% if sort_by == 'closed_issues_count' and sort_order == 'asc' %}desc{% else %}asc{% endif %}"
                                   class="text-white hover:text-white/80">Closed Issues</a>
                            </th>
                            <th scope="col"
                                class="px-6 py-4 text-center text-sm font-semibold text-white">
                                <a href="?sort_by=email_event&sort_order={% if sort_by == 'email_event' and sort_order == 'asc' %}desc{% else %}asc{% endif %}"
                                   class="text-white hover:text-white/80">Email Event</a>
                            </th>
                            <th scope="col"
                                class="px-6 py-4 text-center text-sm font-semibold text-white">
                                <a href="?sort_by=modified&sort_order={% if sort_by == 'modified' and sort_order == 'asc' %}desc{% else %}asc{% endif %}"
                                   class="text-white hover:text-white/80">Time of Last Event</a>
                            </th>
                            <th scope="col"
                                class="px-6 py-4 text-center text-sm font-semibold text-white">
                                <a href="?sort_by=top_tester&sort_order={% if sort_by == 'top_tester' and sort_order == 'asc' %}desc{% else %}asc{% endif %}"
                                   class="text-white hover:text-white/80">Top Domain Tester</a>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for domain in scoreboard %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <a href="{% url 'domain' slug=domain.name %}" class="block w-16 h-16">
                                        {% if domain.get_logo and domain.get_logo != "None" %}
                                            <img src="{{ domain.get_logo }}"
                                                 alt="{{ domain.name }}"
                                                 onerror="this.style.display='none';this.nextElementSibling.style.display='flex';"
                                                 class="w-16 h-16 object-contain rounded"
                                                 width="64"
                                                 height="64">
                                        {% endif %}
                                        <div class="{% if domain.get_logo and domain.get_logo != 'None' %}hidden{% endif %} w-16 h-16 rounded bg-gray-100 flex items-center justify-center text-gray-500 text-xl font-bold">
                                            {{ domain.name|slice:":1"|upper }}
                                        </div>
                                    </a>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ domain.name }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">{{ domain.open_issues_count }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">{{ domain.closed_issues_count }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">{{ domain.email_event }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-900">{{ domain.modified|timesince }} ago</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                                    <a href="{% url 'profile' slug=domain.top_tester %}"
                                       class="text-[#e74c3c] hover:text-[#c0392b]">
                                        {{ domain.top_tester|default:"" }}
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% if is_paginated %}
            <div class="mt-6 flex justify-center items-center space-x-4">
                {% if page_obj.has_previous %}
                    <a href="?page={{ page_obj.previous_page_number }}{% if user %}&user={{ user }}{% endif %}"
                       class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        Previous
                    </a>
                {% endif %}
                <span class="text-sm text-gray-700">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}{% if user %}&user={{ user }}{% endif %}"
                       class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        Next
                    </a>
                {% endif %}
            </div>
        {% endif %}
    </div>
{% endblock content %}