<style>
    .object_image {
        max-height: 400px;
        max-width: 100%;
        filter: blur(5px);
    }
</style>

{% for dict_domain in l_dict_domains %}
    {% if loop.index0 % 4 == 0 %}
        <div class="card-deck mt-3">
    {% endif %}

    <div class="card {% if dict_domain["status"] %}border-success{% else %}border-danger{% endif %}">
        <div class="text-center">
            {% if dict_domain["is_tags_safe"] %}
                <img class="object_image mb-1" src="{{ url_for('objects_item.screenshot', filename="") }}{{dict_domain['screenshot']}}" onerror="this.onerror=null;this.src='{{ url_for('static', filename='image/AIL.png') }}';">
            {% else %}
                <span class="my-2 fa-stack fa-8x">
                    <i class="fas fa-stack-1x fa-image"></i>
                    <i class="fas fa-stack-2x fa-ban" style="color:Red"></i>
                </span>
            {% endif %}
        </div>
        <div class="card-body pb-0">
            <h5 class="card-title">
                <a target="_blank" href="{{ url_for('crawler_splash.showDomain') }}?domain={{dict_domain["id"]}}">
                    {% if 'hl-start' in  dict_domain %}
                        {{dict_domain["id"][:dict_domain['hl-start']]}}
                        <span class="hg-text">{{dict_domain["id"][dict_domain['hl-start']:dict_domain['hl-end']]}}</span>
                        {{dict_domain["id"][dict_domain['hl-end']:]}}
                    {% else %}
                        {{dict_domain["id"]}}
                    {% endif %}
                </a>

                {% if dict_domain["status"] %}
                    <span style="color:Green;">
                        <i class="fas fa-check-circle"></i> UP
      				</span>
                {% else %}
                    <span style="color:Red;">
                        <i class="fas fa-times-circle"></i>	DOWN
      				</span>
      			{% endif %}
            </h5>
            <div>
                <span class="badge badge-dark">
                    <span data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                        <span class="badge badge-info" style="font-size: 0.8rem;">
                            <i class="fas fa-hourglass-start"></i>
                        </span>
                        {{dict_domain["first_seen"]}}
                    </span>
                    <span class="badge badge-light mx-1" style="font-size: 1rem;">
                        <i class="far fa-calendar-alt"></i>
                    </span>
                    {{dict_domain["last_seen"]}}{{dict_domain["last_check"]}}
                    <span class="badge badge-secondary" style="font-size: 0.8rem;">
                        <i class="fas fa-hourglass-end"></i>
                    </span>
                </span>
            </div>
            <p class="card-text">
                <small class="text-muted">
                    <b>
                        {% if dict_domain['languages'] %}
                            Languages:
                            {% for language in dict_domain['languages'] %}
                                <span class="badge badge-secondary" style="font-size: 0.75rem;">{{ language }}</span>
                            {%  endfor %}
                        {% endif %}
                    </b>
                </small>
            </p>

            <div>
                {% for tag in dict_domain['tags'] %}
                    <a href="{{ url_for('tags_ui.get_obj_by_tags') }}?object_type=domain&ltags={{ tag }}">
                        <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
                    </a>
                {%  endfor %}
            </div>
        </div>
        {% with obj_type='domain', obj_id=dict_domain["id"], obj_lvl=0%}
            {% include 'import_export/block_add_user_object_to_export_small.html' %}
        {% endwith %}

    </div>

    {% if loop.index0 % 4 == 3 %}
    </div>
    {% endif %}

{% endfor %}

{% if l_dict_domains|length % 4 != 0 %}
    </div>
{% endif %}