{% if last_ticket_status.status == 'Open' %}
<div class="flex justify-start items-center gap-1 {% if new %} fade-in-up {% endif %}">
    <div class="w-[16px] h-[16px] rounded-full bg-green-200 shadow-md"></div>
    <p class="text-secondosiblue font-light">Opened by {{last_ticket_status.added_by.first_name}} on
        {{ last_ticket_status.date_added|date:"d F Y, h:i A" }}</p>
</div>
{% elif last_ticket_status.status == 'Working On' %}
<div class="flex justify-start items-center gap-1 {% if new %} fade-in-up {% endif %}"">
    <div class="w-[16px] h-[16px] rounded-full bg-yellow-200 shadow-md"></div>
    <p class="text-secondosiblue font-light">Updated to 'Working On' by
        {{last_ticket_status.added_by.first_name}} on {{ last_ticket_status.date_added|date:"d F Y, h:i A" }}
    </p>
</div>
{% elif last_ticket_status.status == 'Closed' %}
<div class="flex justify-start items-center gap-1 {% if new %} fade-in-up {% endif %}">
    <div class="w-[16px] h-[16px] rounded-full bg-red-200 shadow-md"></div>
    <p class="text-secondosiblue font-light">Closed by {{last_ticket_status.added_by.first_name}} on
        {{ last_ticket_status.date_added|date:"d F Y, h:i A" }}</p>
</div>
{% endif %}

<style>
    @keyframes fadeInAndUp {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0px); }
    }
    .fade-in-up {
        animation: fadeInAndUp 0.6s ease;
    }
</style>