{% extends "admin/change_list.html" %}

{% block content_title %}
    <h1 class="h4 m-0 pr-3 mr-3 border-right">ACL Links & User Statistics</h1>
{% endblock %}

{% block content %}
    <!-- Compact Statistics Panel -->
    <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 16px; margin: 0 0 16px 0;">
        <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
            <!-- Key Metrics -->
            <div style="background: #3b82f6; color: white; padding: 8px 12px; border-radius: 4px; min-width: 100px; text-align: center;">
                <div style="font-size: 18px; font-weight: bold;">{{ total_links|default:0 }}</div>
                <div style="font-size: 11px; opacity: 0.9;">Links</div>
            </div>
            <div style="background: #10b981; color: white; padding: 8px 12px; border-radius: 4px; min-width: 100px; text-align: center;">
                <div style="font-size: 18px; font-weight: bold;">{{ total_uses|default:0|floatformat:0 }}</div>
                <div style="font-size: 11px; opacity: 0.9;">Total Uses</div>
            </div>
            <div style="background: #8b5cf6; color: white; padding: 8px 12px; border-radius: 4px; min-width: 100px; text-align: center;">
                <div style="font-size: 18px; font-weight: bold;">{{ recent_uses|default:0|floatformat:0 }}</div>
                <div style="font-size: 11px; opacity: 0.9;">Recent (30d)</div>
            </div>
            
            <!-- Status indicators -->
            <div style="margin-left: 20px; display: flex; gap: 12px; flex-wrap: wrap;">
                {% if never_accessed > 0 %}
                <span style="background: #dc2626; color: white; padding: 4px 8px; border-radius: 3px; font-size: 12px;">❌ {{ never_accessed }} never used</span>
                {% endif %}
                {% if old_links > 0 %}
                <span style="background: #f97316; color: white; padding: 4px 8px; border-radius: 3px; font-size: 12px;">⚠️ {{ old_links }} old</span>
                {% endif %}
                <span style="background: #059669; color: white; padding: 4px 8px; border-radius: 3px; font-size: 12px;">✅ {{ active_links|default:0 }} active</span>
            </div>
            
            <!-- Quick Actions -->
            <div style="margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap;">
                <a href="?last_access_status=never" style="background: #dc2626; color: white; padding: 4px 8px; border-radius: 3px; text-decoration: none; font-size: 11px;">🔍 Never Used</a>
                <a href="?last_access_status=old" style="background: #f97316; color: white; padding: 4px 8px; border-radius: 3px; text-decoration: none; font-size: 11px;">⏰ Old</a>
                <a href="?last_access_status=week" style="background: #10b981; color: white; padding: 4px 8px; border-radius: 3px; text-decoration: none; font-size: 11px;">📅 Recent</a>
                <a href="?" style="background: #6b7280; color: white; padding: 4px 8px; border-radius: 3px; text-decoration: none; font-size: 11px;">🔄 Clear</a>
            </div>
        </div>
    </div>
    
    {{ block.super }}
{% endblock %}