<tr class="ticket-{{ticket.id}} {% if new %}bg-gray-200 fade-in-up{% endif %} hover:bg-gray-100 duration-300 cursor-pointer"
    data-href="{% url 'ticketroom' ticket.ticket_number %}">
    <td class="px-6 py-4 text-sm border-r border-gray-300">
        <div
            class="w-full flex  {% if ticket.unread_updates_count > 0 %} justify-between {% else %} justify-center text-center {% endif %} items-center gap-3">
            <p class="text-secondosiblue">{{ticket.title}}</p>

            {% if ticket.unread_updates_count > 0 %}
            <div>
                <div
                    class="w-[25px] h-[25px] rounded-full bg-green-700 text-white flex justify-center items-center text-sm">
                    <p>{{ticket.unread_updates_count}}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </td>


    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
        <p class="text-secondosiblue">{{ticket.ticket_number}}</p>
    </td>

    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
        <p class="text-secondosiblue">{{ticket.regarding}}</p>
    </td>

    <td class="px-6 py-4 text-center text-sm ">
        {% if ticket.ticketupdate_set.all %}
        <p class="text-secondosiblue">{{ticket.ticketupdate_set.all.last.date_added}} <br> by
            {{ticket.ticketupdate_set.all.last.added_by.first_name}}</p>
        {% endif %}
    </td>

</tr>

<style>
    @keyframes fadeInAndUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    .fade-in-up {
        animation: fadeInAndUp 0.6s ease;
    }
</style>