{% load static %}
{% load gravatar %}
<div class="bg-gray-100 rounded-lg p-4">
    <div class="w-full flex flex-col gap-3 ">
        <div class=" rounded-lg w-full border-2 hover:border-red-500 transition-all duration-200">
            {% for screenshot_activity,screenshot in activity_screenshots.items %}
                {% if activity == screenshot_activity %}
                    <a href="{{ activity.get_absolute_url }}">
                        <img src="{{ screenshot.image.url }}"
                             loading="lazy"
                             class="w-full rounded-lg object-cover lg:max-h-[300px] h-full "
                             alt="screenshot"
                             width="50%"
                             height="50%">
                    </a>
                {% endif %}
            {% endfor %}
            {% if activity.screenshot %}
                <a href="{{ activity.get_absolute_url }}">
                    <img src="{{ activity.screenshot.url }}"
                         loading="lazy"
                         class="w-full rounded-lg object-cover lg:max-h-[300px] h-full "
                         alt="screenshot"
                         width="50%"
                         height="50%">
                </a>
            {% endif %}
        </div>
        <a href="{{ activity.get_absolute_url }}"
           class="text-xl font-semibold hover:text-red-500">
            <div class="mb-3 text-xl">{{ activity.description|truncatechars:20 }}</div>
        </a>
        <div class="flex items-start gap-1">
            <a href="{{ activity.user.get_absolute_url }}">
                {% if activity.user.userprofile.avatar %}
                    <img src="{{ activity.user.userprofile.avatar }}"
                         height="30"
                         width="30"
                         class="mr-3 h-[40px] w-[40px] rounded-full"
                         loading="lazy"
                         alt="user avatar">
                {% elif activity.user.socialaccount_set.all.0.get_avatar_url %}
                    <img src="{{ activity.user.socialaccount_set.all.0.get_avatar_url }}"
                         height="30"
                         width="30"
                         class="mr-3 h-[40px] w-[40px] rounded-full"
                         loading="lazy"
                         alt="user avatar">
                {% elif activity.user.email %}
                    <img src="{% gravatar_url activity.user.email 100 %}"
                         height="30"
                         width="30"
                         class="mr-3 h-[40px] w-[40px] rounded-full"
                         loading="lazy"
                         alt="user avatar">
                {% else %}
                    <img src="{% static 'images/dummy-user.png' %}"
                         height="30"
                         width="30"
                         class="mr-3 h-[40px] w-[40px] rounded-full"
                         loading="lazy"
                         alt="user avatar">
                {% endif %}
            </a>
            <div class="w-full flex flex-col gap-2">
                <div class="mb-2 text-lg">
                    <a href="{{ activity.user.get_absolute_url }}"
                       class="hover:text-red-500">@{{ activity.user|default:"Anonymous" }}</a>
                    found a bug on <a href="{% url 'domain' slug=activity.domain_name %}"
    class="hover:text-red-500">{{ activity.domain_title }}</a>
                </div>
                <p class="text-sm text-gray-600">{{ activity.created|timesince }} ago.</p>
                <a class=" font-medium hover:text-red-500"
                   href="{{ activity.url }}"
                   target="_blank"
                   rel="noopener noreferrer">
                    <div>URL: {{ activity.url|truncatechars:30 }}</div>
                </a>
                <a class="whitespace-nowrap mb-1 text-xl"
                   href="{{ activity.get_absolute_url }}#comments">
                    {% if activity.comments.all|length > 0 %}{{ activity.comments.all|length }} comments{% endif %}
                </a>
            </div>
        </div>
        <div class="flex flex-row gap-2 items-center justify-between w-full my-2">
            <button class="bg-red-500 w-full hover:bg-red-600 text-white font-['Poppins'] font-bold py-2 mb-3 capitalize px-4 rounded-xl transition duration-200 label label-default pull-right">
                {{ activity.status }}
            </button>
            <button class="bg-red-500 w-full hover:bg-red-600 text-white font-['Poppins'] font-bold py-2 mb-3 capitalize px-4 rounded-xl transition duration-200 label label-default pull-right">
                {{ activity.get_label_display }}
            </button>
        </div>
    </div>
</div>