{% extends "base.html" %}
{% block style %}
    <!-- DataTables CSS -->
    <link rel="stylesheet"
          href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
{% endblock style %}
{% load static %}
{% load custom_tags %}
{% block title %}
    OWASP {% env 'PROJECT_NAME' %} - User Statistics
{% endblock %}
{% block description %}
    View user statistics for contributions, including commits, opened/closed issues, PRs, and comments for a selected time period.
{% endblock %}
{% block keywords %}
    user statistics, OWASP {% env 'PROJECT_NAME' %}, commits, issues, PRs, contributions
{% endblock %}
{% block og_title %}
    OWASP {% env 'PROJECT_NAME' %} - User Statistics
{% endblock %}
{% block og_description %}
    Explore the statistics for contributors in the OWASP {% env 'PROJECT_NAME' %} project, showcasing activity like commits, issues, and pull requests.
{% endblock %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="w-full p-6">
        <!-- Period Selection Buttons -->
        <div class="flex gap-4 mb-6 mt-10 justify-center">
            <a href="?period=1"
               class="px-6 py-3 rounded-md text-lg {% if period == '1' %}bg-blue-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
                Daily
            </a>
            <a href="?period=30"
               class="px-6 py-3 rounded-md text-lg {% if period == '30' %}bg-blue-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
                Weekly
            </a>
            <a href="?period=365"
               class="px-6 py-3 rounded-md text-lg {% if period == '365' %}bg-blue-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
                Yearly
            </a>
        </div>
        <!-- Date Range Display -->
        <div class="text-lg text-gray-700 mb-6 text-center">Showing contributions from {{ start_date }} to {{ end_date }}</div>
        <!-- User Statistics Table -->
        <div class="max-w-5xl mx-auto">
            <table id="userStatsTable"
                   class="table-auto divide-y divide-gray-200 mx-auto">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left text-base font-semibold text-gray-600 uppercase">Username</th>
                        <th class="px-4 py-3 text-center text-base font-semibold text-gray-600 uppercase">Commits</th>
                        <th class="px-4 py-3 text-center text-base font-semibold text-gray-600 uppercase">Issues Opened</th>
                        <th class="px-4 py-3 text-center text-base font-semibold text-gray-600 uppercase">Issues Closed</th>
                        <th class="px-4 py-3 text-center text-base font-semibold text-gray-600 uppercase">PRs</th>
                        <th class="px-4 py-3 text-center text-base font-semibold text-gray-600 uppercase">Comments</th>
                        <th class="px-4 py-3 text-center text-base font-semibold text-gray-600 uppercase">Total</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for username, stats in user_stats.items %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 whitespace-nowrap text-lg font-medium text-gray-900">{{ username }}</td>
                            <td class="px-4 py-3 text-center text-lg text-gray-800">{{ stats.commits }}</td>
                            <td class="px-4 py-3 text-center text-lg text-gray-800">{{ stats.issues_opened }}</td>
                            <td class="px-4 py-3 text-center text-lg text-gray-800">{{ stats.issues_closed }}</td>
                            <td class="px-4 py-3 text-center text-lg text-gray-800">{{ stats.prs }}</td>
                            <td class="px-4 py-3 text-center text-lg text-gray-800">{{ stats.comments }}</td>
                            <td class="px-4 py-3 text-center text-lg font-bold text-gray-900">{{ stats.total }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock content %}
{% block scripts %}
    <!-- jQuery and DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#userStatsTable').DataTable({
            "paging": true,
            "info": false,
            "searching": true,
            "order": [[6, 'desc']],
            "columnDefs": [
                { "orderable": false, "targets": [0] }
            ],
            "autoWidth": false
        });
    });
    </script>
{% endblock scripts %}