{% extends "base.html" %}
{% load static %}
{% block title %}
    Reported IPs
{% endblock title %}
{% block description %}
    View and manage reported IPs with detailed information on activity types, user reports, and descriptions. Stay updated with the latest activity reports.
{% endblock description %}
{% block keywords %}
    Reported IPs, IP Activity Reports, Manage IPs, View Reports, Activity Types, User Reports
{% endblock keywords %}
{% block og_title %}
    Reported IPs - Manage Activity Reports
{% endblock og_title %}
{% block og_description %}
    Access detailed information on reported IPs, including activity types, user reports, and descriptions. Stay informed with the latest activity reports.
{% endblock og_description %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="report-container mt-5 grid grid-cols-1 gap-4">
        {% for ip in reported_ips %}
            <div class="report-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-colors duration-300 hover:bg-gray-100"
                 onclick="toggleExpand(this)">
                <div class="ip-header flex items-center justify-between font-bold">
                    <div class="ip-info flex items-center flex-grow">
                        <span class="ip-address text-lg font-bold mr-2 truncate">{{ ip.ip_address }}</span>
                    </div>
                    <div class="activity-type flex items-center ml-auto">
                        <span class="activity-dot w-2.5 h-2.5 rounded-full mr-2 {% if ip.activity_type == 'malicious' %}bg-red-500{% else %}bg-green-500{% endif %}"></span>
                        <span class="activity-text font-bold text-gray-700 text-xl">{{ ip.activity_type|capfirst }}</span>
                    </div>
                    <span class="expand-icon text-2xl text-gray-700 flex items-center justify-center w-8 transition-transform duration-300">⬇</span>
                </div>
                <div class="user-info flex items-center text-sm text-gray-600 mt-1">
                    <i class="fas fa-user mr-1"></i> {{ ip.user.username|default:"Anonymous" }} - {{ ip.created|date:"M d, Y" }}
                </div>
                <div class="description-content max-h-0 overflow-hidden bg-gray-100 mt-2 px-3 rounded-lg border border-gray-200 text-sm transition-all duration-500">
                    <p class="reason font-bold">Reason: {{ ip.activity_title }}</p>
                    <p>{{ ip.description|default:"No additional details provided." }}</p>
                </div>
            </div>
        {% empty %}
            <p>No IPs reported.</p>
        {% endfor %}
    </div>
    <div class="col-md-12 text-center mt-4">
        <div class="pagination">
            {% if is_paginated %}
                {% if page_obj.has_previous %}
                    <a href="?page=1" class="btn btn-default">First</a>
                    <a href="?page={{ page_obj.previous_page_number }}"
                       class="btn btn-default">Previous</a>
                {% endif %}
                <span class="current">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}" class="btn btn-default">Next</a>
                    <a href="?page={{ page_obj.paginator.num_pages }}"
                       class="btn btn-default">Last</a>
                {% endif %}
            {% endif %}
        </div>
    </div>
    <div class="bottom-right fixed bottom-4 right-4">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/reported_ips_list.html"
           class="mr-2">
            <i class="fab fa-github text-2xl text-gray-700"></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 text-2xl text-gray-700"></i>
        </a>
    </div>
    <a href="{% url 'report_ip' %}"
       class="floating-report-ip-button fixed bottom-12 left-56 px-4 py-2 bg-red-600 text-white font-bold rounded-lg shadow-lg hover:scale-110 transition-transform duration-300 z-50">
        <i class="fas fa-exclamation-triangle mr-2"></i> Report an IP
    </a>
    <script>
        function toggleExpand(card) {
            const descriptionContent = card.querySelector(".description-content");
            const icon = card.querySelector(".expand-icon");
            const isExpanded = descriptionContent.classList.contains("max-h-48");
    
            if (isExpanded) {
                descriptionContent.classList.remove("max-h-48", "px-3", "py-3");
                descriptionContent.classList.add("max-h-0");
                icon.style.transform = "rotate(0deg)"; 
                icon.setAttribute("aria-expanded", "false");
            } else {
                descriptionContent.classList.remove("max-h-0");
                descriptionContent.classList.add("max-h-48", "px-3", "py-3");
                icon.style.transform = "rotate(180deg)"; 
                icon.setAttribute("aria-expanded", "true");
            }
        }
    </script>
{% endblock content %}