{% load gravatar %}
{% load static %}
<style>
    .truncate-450 {
      display: none;
    }
  
    @media only screen and (max-width: 500px) {
      .truncate-450 {
        display: inline;
      }
      .truncate-100 {
        display: none;
      }
    }
</style>
<div class="list-group-item activity-strip overflow-hidden">
    <div class="activity-strip-section">
        {% if activity.user.userprofile.avatar %}
            <img src="{{ activity.user.userprofile.avatar }}"
                 width="100"
                 height="100"
                 class="img-responsive img-rounded"
                 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 }}"
                 width="100"
                 height="100"
                 class="img-responsive img-rounded"
                 loading="lazy"
                 alt="user avatar">
        {% elif activity.user.email %}
            <img src="{% gravatar_url activity.user.email 100 %}"
                 width="100"
                 height="100"
                 class="img-responsive img-rounded"
                 loading="lazy"
                 alt="user avatar">
        {% else %}
            <img src="{% static 'images/dummy-user.png' %}"
                 width="100"
                 height="100"
                 class="img-responsive img-rounded"
                 loading="lazy"
                 alt="user avatar">
        {% endif %}
        <div class="info">
            <div class="flex overflow-hidden gap-3">
                <a href="{% url 'domain' slug=activity.domain_name %}">
                    <img src="https://www.{{ activity.domain_name }}/favicon.ico"
                         onerror="this.onerror=null; this.style.display='none';"
                         loading="lazy"
                         class="h-[30px] w-[30px]"
                         alt="domain icon"
                         width="30px"
                         height="30px">
                </a>
                {% if activity.status == "open" %}
                    <span class="label label-success text-capitalize !leading-loose">{{ activity.status }}</span>
                {% else %}
                    <span class="label label-danger text-capitalize !leading-loose">{{ activity.status }}</span>
                {% endif %}
                <span class="label label-info !leading-loose">{{ activity.get_label_display }}</span>
            </div>
            <a href="{{ activity.get_absolute_url }}">
                <span class="truncate-450">{{ activity.description|truncatechars:60 }}</span>
                <span class="truncate-100">{{ activity.description|truncatechars:100 }}</span>
            </a>
            <div class="small">
                <a href="{{ activity.user.get_absolute_url }}"
                   data-toggle="popover"
                   data-tag="{{ activity.user.userprofile.get_title_display }}">
                    {{ activity.user|default:"Anonymous" }}
                </a>
                found a bug on <a href="{% url 'domain' slug=activity.domain_name %}">{{ activity.domain_title }}</a> {{ activity.created|timesince }}
                ago
            </div>
            <a class="whitespace-nowrap"
               href="{{ activity.get_absolute_url }}#comments">
                {% if activity.comments.all|length > 0 %}{{ activity.comments.all|length }} comments{% endif %}
            </a>
        </div>
    </div>
    <div class="activity-screenshot">
        {% 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"
                         alt="screenshot"
                         width="100%"
                         height="100%">
                </a>
            {% endif %}
        {% endfor %}
        {% if activity.screenshot %}
            <a href="{{ activity.get_absolute_url }}">
                <img src="{{ activity.screenshot.url }}"
                     loading="lazy"
                     alt="screenshot"
                     width="100%"
                     height="100%">
            </a>
        {% endif %}
    </div>
</div>