{% load static %}

<div class="flex items-center p-4 space-x-4 bg-gray-900 rounded-lg">
    <a href="{% url 'moderation:submission_list' %}?status=NEW" 
       class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'NEW' or not request.GET.status %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
       hx-get="{% url 'moderation:submission_list' %}?status=NEW"
       hx-target="body"
       hx-push-url="true"
       hx-indicator="#loading-indicator">
        <i class="mr-2.5 text-lg fas fa-clock"></i>
        <span>Pending</span>
    </a>
    
    <a href="{% url 'moderation:submission_list' %}?status=APPROVED" 
       class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'APPROVED' %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
       hx-get="{% url 'moderation:submission_list' %}?status=APPROVED"
       hx-target="body"
       hx-push-url="true"
       hx-indicator="#loading-indicator">
        <i class="mr-2.5 text-lg fas fa-check"></i>
        <span>Approved</span>
    </a>
    
    <a href="{% url 'moderation:submission_list' %}?status=REJECTED"
       class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'REJECTED' %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
       hx-get="{% url 'moderation:submission_list' %}?status=REJECTED"
       hx-target="body"
       hx-push-url="true"
       hx-indicator="#loading-indicator">
        <i class="mr-2.5 text-lg fas fa-times"></i>
        <span>Rejected</span>
    </a>
    
    <a href="{% url 'moderation:submission_list' %}?status=ESCALATED"
       class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'ESCALATED' %}bg-blue-900/40 text-blue-400{% else %}text-gray-400 hover:text-gray-300{% endif %}"
       hx-get="{% url 'moderation:submission_list' %}?status=ESCALATED"
       hx-target="body"
       hx-push-url="true"
       hx-indicator="#loading-indicator">
        <i class="mr-2.5 text-lg fas fa-exclamation-triangle"></i>
        <span>Escalated</span>
    </a>
</div>