{% load static %}
<!-- VISITORS -->
<div class="h-full flex flex-col">
    <div class="w-full py-3 px-3 border-b border-gray-200 flex items-center gap-2">
        <div class="w-[20px] h-[20px] bg-green-600 rounded-full onlineDot">
            <div class="wave"></div>
        </div>

        <p class="text-secondosiblue">Visitors today</p>
    </div>

    <div id="visitors">
        {% for visitor in visitors %}
        <div data-visitorid = {{visitor.id}} class="visitor w-full flex justify-between gap-2 items-center py-3 px-3 border-b border-gray-200 text-sm cursor-pointer bg-white">
            <div class="w-full flex gap-2 items-center">
                <div class="w-[40px] h-[40px] bg-osiblue rounded-full relative">
                    {% if not visitor.country == 'Unknown' %}
                        <img src="{{visitor.flag_image_url}}">
                    {% else %}
                        <img class="w-[30px] h-[25px] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}">
                    {% endif %}

                    {% if visitor.is_online %}
                    <div class="online absolute w-[12px] h-[12px] border-2 border-white bg-green-600 rounded-full bottom-0 right-0"></div>
                    {% endif %}
                </div>

                <div class="flex flex-col">   
                    <p class="text-secondosiblue font-poppinsBold">{{visitor.ip_address}}</p>
                    <p class="text-fifthosiblue text-xs">
                        {% if not visitor.visitorlog_set.all.last.title %}
                            {{ visitor.visitorlog_set.all.last.url|slice:":26" }}{% if visitor.visitorlog_set.all.last.url|length > 26 %}…{% endif %}
                        {% else %}
                            {{ visitor.visitorlog_set.all.last.title|slice:":26" }}{% if visitor.visitorlog_set.all.last.title|length > 26 %}…{% endif %}
                        {% endif %}
                    </p>
                </div>
            
            </div>

            <p class="duration text-gray-500 text-sm">{{visitor.total_duration}}</p>
        </div>
        {% endfor %}
    </div>
</div> 

<audio id="visitor-notification-sound" src="{{domain}}/static/notifications/new-visitor.mp3" preload="auto"></audio>