{% for chat_room in chat_rooms %}
    {% if page %}
    <a class="room-loop-link" target="_parent" href="{{ url_for_embedded(page, {'query': chat_room.slug}) }}">
    {% else %}    
    <a class="room-loop-link" href="{{  url('chat-room', {'chatroomslug':chat_room.slug}) }}" >
    {% endif %}
    <div class="col">
        <div class="card room-card">
            <div class="card-img-top img-responsive img-responsive-21x9"
                {% if chat_room.cover_image %}
                style="background-image: url('{{MEDIA_URL}}/chatrooms/{{chat_room.cover_image}}')"
                {% else %}
                style="background-image: url('{{STATIC_URL}}/img/room.png')"
                {% endif %}
                >
            </div>
            <div class="card-body">
                {% if chat_room.room_icon %}
                    <img class="room-image" src="{{MEDIA_URL}}/chatrooms/icons/{{chat_room.room_icon}}">
                {% endif %}
                <h3 class="card-title">{{ chat_room.name }}</h3>
                <p class="text-muted mb-0">
                    {% if chat_room.description %}
                        {{ chat_room.description }}
                    {% else %}
                            Join with {{ chat_room.name }} chat room at {{SETTINGS.site_name}}.
                            {% if chat_room.is_visible %}
                                {% if chat_room.is_protected %}
                                    {{ chat_room.name }} is password protected chat room. You need {{ chat_room.name }} password to log in to the chat room.
                                {% else %}
                                    {{ chat_room.name }} is public chat room. Everyone on {{SETTINGS.site_name}} will be able to join.
                                {% endif %}
                            {% else %}
                                {{ chat_room.name }} is private chat room. Only people with the invite link will be able to join.
                                {% if chat_room.is_protected %}
                                    {{ chat_room.name }} is password protected chat room. You need {{ chat_room.name }} password to log in to the chat room.
                                {% endif %}
                            {% endif %}
                    {% endif %}
                </p>
                <div class="d-flex room-stats mt-4">
                    <div>
                        <i class="ti ti-crown"></i> {% if chat_room.creator_fname %}{{chat_room.creator_fname}}{% endif %} {% if chat_room.creator_lname %}{{chat_room.creator_lname}}{% endif %}
                    </div>
                    <div class="ms-auto">
                        <i class="ti ti-users"></i> {{chat_room.users_count}} {{_("Members")}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </a>
{% endfor %}