{% load static %}
    {% if update.added_by.staffprofile %}
    <div class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3 p-5 {% if not user.customerprofile %} hidden {% endif %}">
        <a class="text-secondosiblue font-light cursor-pointer hover:text-gray-500 duration-300">How
            did I do?</a>

        <div class="flex justify-start items-center gap-2">
            <button data-update-id="{{ update.id }}" data-reaction="Happy"
                class="reaction-button w-fit h-fit rounded-full {% if update.ticketupdatereaction_set.all.last.reaction == 'Happy' %} border-2 border-secondosiblue {% endif %}">
                <img src="{% static 'images/icons/happy-icon.png' %}"
                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform pointer-events-none">
            </button>

            <button data-update-id="{{ update.id }}" data-reaction="Indifferent"
                class="reaction-button w-fit h-fit rounded-full {% if update.ticketupdatereaction_set.all.last.reaction  == 'Indifferent' %} border-2 border-secondosiblue {% endif %}">
                <img src="{% static 'images/icons/neutral-icon.png' %}"
                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform pointer-events-none">
            </button>

            <button data-update-id="{{ update.id }}" data-reaction="Sad"
                class="reaction-button w-fit h-fit rounded-full {% if update.ticketupdatereaction_set.all.last.reaction  == 'Sad' %} border-2 border-secondosiblue {% endif %}">
                <img src="{% static 'images/icons/unhappy-icon.png' %}"
                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform pointer-events-none">
            </button>
        </div>
    </div>

    <div id="submitted-reactions" class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3 p-5 {% if user.customerprofile %} hidden {% endif %}">
        <div class="flex justify-start items-center gap-2">
            <button data-reaction="Happy"
                class="submittedreaction-button w-fit h-fit rounded-full {% if not update.ticketupdatereaction_set.all.last.reaction == 'Happy' %} hidden {% endif %} ">
                <img src="{% static 'images/icons/happy-icon.png' %}"
                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform pointer-events-none">
            </button>
    
            <button data-reaction="Indifferent"
                class="submittedreaction-button  w-fit h-fit rounded-full {% if not update.ticketupdatereaction_set.all.last.reaction == 'Indifferent' %} hidden  {% endif %}">
                <img src="{% static 'images/icons/neutral-icon.png' %}"
                    class=" w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform pointer-events-none">
            </button>
    
            <button data-reaction="Sad"
                class="submittedreaction-button w-fit h-fit rounded-full  {% if not update.ticketupdatereaction_set.all.last.reaction == 'Sad' %} hidden  {% endif %} ">
                <img src="{% static 'images/icons/unhappy-icon.png' %}"
                    class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform pointer-events-none">
            </button>
        </div>
    </div>

{% endif %}