Untitled

{% if not user.is_authenticated %}
                <div>
                    <br><br><br>
                    <h6 class="w-64 text-gray-400">Log in to follow creators, like videos, and view comments.</h6><br>
                    <button id="login-main" style="border-color: #fc2a5e; color: #fc2a5e" @click="showLogin = ! showLogin" class="hover:bg-gray-100 border-2 h-12 font-semibold bg-opacity-0 w-56 focus:outline-none rounded-md">Log in</button>
                </div>
            {% endif %}
                <hr class="mt-5"><br>
                <p class="font-thin pb-4">Suggested accounts</p>
                <!-- suggested accounts for logged in users -->
            <div id="suggested-accounts" class="max-h-64 overflow-y-scroll">
                {% for account in suggested %}
                    <div onclick="window.location.href='/@{{account.username}}'" class="cursor-pointer hover:bg-gray-100">
                        <img
                            class="inline rounded-full duration-500 delay-1000 w-12 h-12 cursor-pointer"
                            alt="{{account.display_name}}'s phorid grid-flow-col auto-cols-maxto"
                            src="{% if account.profile_photo %} {{account.profile_photo.url}} {% else %} {% static 'images/default.png' %} {% endif %}">
                            <span class="flex-col inline-flex -mt-2 ml-2">
                                <p class="inline-flex font-semibold">
                                    {{ account.username }}
                                    {% if account.verified %}
                                    <svg class="mt-2 ml-2" width="12" height="12" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#20D5EC"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M37.1213 15.8787C38.2929 17.0503 38.2929 18.9497 37.1213 20.1213L23.6213 33.6213C22.4497 34.7929 20.5503 34.7929 19.3787 33.6213L10.8787 25.1213C9.70711 23.9497 9.70711 22.0503 10.8787 20.8787C12.0503 19.7071 13.9497 19.7071 15.1213 20.8787L21.5 27.2574L32.8787 15.8787C34.0503 14.7071 35.9497 14.7071 37.1213 15.8787Z" fill="white"></path></svg>
                                    {% endif %}
                                </p> 
                                
                                <p class="-mt-1">{{ account.display_name }}</p> 
                            </span>
                    </div>   
                {% endfor %}