{% extends "admin/change_list.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
{{ block.super }}
<style>
    /* Message List Styling */
    #changelist table {
        border-radius: 8px;
        overflow: hidden;
    }
    
    #changelist .column-status {
        width: 120px;
    }
    
    #changelist .column-priority {
        width: 100px;
    }
    
    /* Status Styling */
    .status-indicator {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
        text-align: center;
        min-width: 90px;
    }
    
    .status-new {
        background-color: #e3f2fd;
        color: #0d47a1;
    }
    
    .status-in_progress {
        background-color: #fff8e1;
        color: #ff8f00;
    }
    
    .status-resolved {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
    
    .status-closed {
        background-color: #eeeeee;
        color: #616161;
    }
    
    /* Priority Styling */
    .priority-indicator {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
        text-align: center;
        min-width: 90px;
    }
    
    .priority-low {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
    
    .priority-medium {
        background-color: #e3f2fd;
        color: #0d47a1;
    }
    
    .priority-high {
        background-color: #fff8e1;
        color: #ff8f00;
    }
    
    .priority-urgent {
        background-color: #ffebee;
        color: #c62828;
    }
    
    .priority-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 6px;
    }
    
    .priority-low .priority-dot {
        background-color: #81c784;
    }
    
    .priority-medium .priority-dot {
        background-color: #ffb74d;
    }
    
    .priority-high .priority-dot {
        background-color: #e57373;
    }
    
    .priority-urgent .priority-dot {
        background-color: #d32f2f;
    }
    
    /* Hover effect */
    #changelist tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }
</style>
{% endblock %}

{% block result_list %}
    {% if action_form and actions_on_top and cl.show_admin_actions %}
        {% admin_actions %}
    {% endif %}
    {% result_list cl %}
    {% if action_form and actions_on_bottom and cl.show_admin_actions %}
        {% admin_actions %}
    {% endif %}
{% endblock %}