<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BagsForYou - View your Following</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/default-styling.css">
    <link rel="stylesheet" href="/css/profile-styling.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>

<body>
    <!-- COMPONENT HEADER UTAMA -->
    <%switch(status){ case 'admin' :%>
        <%- include('../navigation/header-admin') %>
            <% break; case 'user' :%>
                <%- include('../navigation/header-user') %>
                    <% break; case 'anon' :%>
                        <%- include('../navigation/header') %>
                            <% break; }%>
                                <!-- END OF HEADER -->
                                <div id="following" class="profile-container-account">
                                    <div class="user-information" id="self-profile">
                                        <div class="username-data-container">
                                            <%if(usernamePage===username){%>
                                                <a href="/profile" class="apaajabiargaitem">
                                                    
                                                    <h2 class="username-tag"><%- username %></h2>
                                                    
                                                </a>
                                                <%}else{%>
                                                <a href="/profile/<%=idPage%>" class="apaajabiargaitem">
    
                                                    <h2 class="username-tag"><%- usernamePage %></h2>
                                                </a>
                                                <%}%>
                                                
                                                <%if(usernamePage===username){%>
                                                <a href="/profile/edit">Edit</a>
                                                <%}%>
                                        </div>
                                        <div class="following-follower-container">
                                            <%if(usernamePage===username){%>
                                            <p><strong>
                                                    <%= followerCount %>
                                                </strong> <a href="/profile/self/follower"
                                                    class="follower-info">Followers</a></p>
                                            <p><strong>
                                                    <%= following.length %>
                                                </strong> <a href="/profile/self/following"
                                                    class="following-info">Following</a> </p>
                                            <%}else{%>
                                            <p><strong>
                                                    <%= followerCount %>
                                                </strong> <a href="/profile/<%=idPage%>/follower"
                                                    class="follower-info">Followers</a></p>
                                            <p><strong>
                                                    <%= following.length %>
                                                </strong> <a href="/profile/<%=idPage%>/following"
                                                    class="following-info">Following</a> </p>
                                            <%}%>
                                        </div>
                                    </div>
                                    <div class="foll-list">
                                        <% following.forEach((user)=> { %>
                                            
                                            <div class="account-foll">
                                                <%if(user.Username===username){%>
                                                <a href="/profile" style="all: unset;">
                                                <%}else{%>
                                                <a href="/profile/<%= user.Id_Account %>" style="all: unset;">
                                                <%}%>
                                                <p class="account-name">
                                                    <%= user.Username %>
                                                </p>
                                                </a>
                                                <!-- <button>Follow</button> -->
                                            </div>
                                            <% }) %>
                                    </div>
                                </div>
                                <%- include('../navigation/footer') %>
</body>

</html>