<%- include('../header'); %>

<% if (typeof bcType !== 'undefined' && bcType === 'OBC') { %>
<link id="obc" rel="stylesheet" href="/CSS/Base/CSS/OBC.css" />
<% } %>

<div id="profile-info" data-user-id="<%= userId %>" data-bc-level="<%= bcType %>"></div>

<!-- My Roblox subMenu; show if user logged in -->

<div class="MyRobloxContainer">

    <div style="width:900px;height:30px;font-family:Verdana, Helvetica, Sans-Serif; clear:both; display:none;">
        <span id="ctl00_cphRoblox_rbxHeaderPane_nameRegion"
            style="font-size:20px; font-weight:bold;"><%= username %></span>
    </div>




    <div style="clear: both; margin: 0; padding: 0;">
    </div>
    <!--[if IE 6]>
              <table><tr><td width="450px" valign="top">
              <![endif]-->
    <div class="Column1d">


        <div class="StandardBoxHeader">
            <span id="ctl00_cphRoblox_rbxUserPane_lUserRobloxURL"><%= username %>'s Profile</span></div>
        <div class="StandardBox" style="position: relative">

            <div style="width: 100%">
                <div id="ctl00_cphRoblox_rbxUserPane_onlineStatusRow">
                    <div style="text-align: center;" id="user-presence">

                    </div>
                </div>
                <div>
                    <div>
                        <center>
                            <div style="margin-bottom: 10px;">
                                <span style="font-size: 13px;display:none;">
                                    <a id="ctl00_cphRoblox_rbxUserPane_hlUserRobloxURL"
                                        href="/User.aspx?ID=<%= userId %>">http://www.roblox.com/User.aspx?ID=<%= userId %></a>
                                </span>
                                <br />

                            </div>
                            <a id="ctl00_cphRoblox_rbxUserPane_AvatarImage" disabled="disabled" title="<%= username %>"
                                onclick="return false" style="display:inline-block;height:200px;width:200px;">
                                <img src="/Thumbnail/User.ashx?id=<%= userId %>" height="200" width="200" border="0"
                                    alt="<%= username %>" />
                                <img src="/api/v1/builders-club/users/<%= userId %>/redirect-to-icon"
                                    style="position:relative;top:-19px;" align="left">
                            </a>
                            <br />



                            <br />
                            <% if (profileDescription.length >= 1) { %>
                            <div class="UserBlurb" style="overflow-y: auto; max-height: 450px;">
                                <span
                                    id="ctl00_cphRoblox_rbxUserPane_rbxPublicUser_lBlurb"><%= profileDescription %></span>
                            </div>
                            <% } %>
                            <style type="text/css">
                                .useroptionslink {
                                    display: inline;
                                }
                            </style>

                            <div style="font-weight:bold; font-size:13px;text-align:center;">
                                <div class="useroptionslink">
                                    <a id="party_link" style="display:none;" href="#"
                                        onclick="ChatBar.ShowFriends();Party.InviteUser('<%= username %>');return false;">Invite
                                        To Party</a>&nbsp;&nbsp;
                                </div>
                                <div class="useroptionslink">
                                    <a id="chat_link" style="display:none;" href="#"
                                        onclick="ChatBar.ShowFriends();ChatBar.ToggleChat('2', '<%= username %>');return false;">Start
                                        Chatting</a>&nbsp;&nbsp;
                                </div>
                                <div class="useroptionslink">

                                    &nbsp;&nbsp;
                                </div>
                                <div class="useroptionslink">




                                </div>
                                <div style="clear:both"></div>
                            </div>

                            <br />
                            <div class="ProfileAlertPanel"
                                style="display: none; margin: 15px auto 0px auto; width: 205px;">

                                <br />
                            </div>


                        </center>
                    </div>
                </div>
            </div>
        </div>




        <div class="StandardTabWhite">
            <span>ROBLOX Badges</span>
        </div>

        <div class="StandardBoxWhite">
            <table id="ctl00_cphRoblox_rbxUserBadgesPane_dlBadges" cellspacing="0" align="Center" border="0"
                style="border-collapse:collapse;">
                <tr></tr>
            </table>

        </div>
        <div id="BadgesDisplayPane" style="clear: both;">




            <div class="StandardTabWhite"><span>Player Badges</span></div>
            <div class="StandardBoxWhite" style="">

                <div id="ctl00_cphRoblox_rbxBadgesDisplay_BadgesUpdatePanel" class="BadgesUpdatePanel">

                    <div class="BadgesLoading_Container"></div>
                    <div class="BadgesListView_Container">

                        <div class="NoResults">This user hasn't earned any user-created badges.</div>

                    </div>

                    <div class="BadgesPager_Container" style="clear:both;text-align:center;bottom: 5px;left: 75px;">

                    </div>

                </div>
                <div style="clear:both;"></div>
            </div>

            <script type="text/javascript">
                $('#' + 'ctl00_cphRoblox_rbxBadgesDisplay_BadgesUpdatePanel').bind('click', function (e) {
                    var target = $(e.target);
                    if (target.parentsUntil('.BadgesUpdatePanel', '.BadgesPager_Container').length > 0 && target[0].tagName == 'A') {
                        //put up loading sign
                        $('.BadgesListView_Container').html("");

                        window.setTimeout(function () {
                            if ($('.BadgesListView_Container').html() == "") {
                                $('.BadgesLoading_Container').html('<div style="text-align: center;margin-top: 25px;"><img src="/images/spinners/spinner100x100.gif" alt="Loading..." /></div>');
                            }
                        }, 1000);
                    }
                });
            </script>
        </div>


        <style>
            .statsLabel {
                font-weight: bold;
                width: 200px;
                text-align: right;
                padding-right: 10px;
            }

            .statsValue {
                font-weight: normal;
                width: 200px;
                text-align: left;
            }

            .statsTable {
                width: 400px;
            }
        </style>
        <div class="StandardTabWhite"><span>Statistics</span></div>

        <div class="StandardBoxWhite">
            <table class="statsTable">
                <tr>
                    <td class="statsLabel">
                        <acronym title="The number of this user's friends.">Friends</acronym>:
                    </td>
                    <td class="statsValue">
                        <span id="ctl00_cphRoblox_rbxUserStatisticsPane_lFriendsStatistics"><%= friends.length %></span>
                    </td>
                </tr>

                <tr>
                    <td class="statsLabel"><acronym
                            title="The number of posts this user has made to the ROBLOX forum.">Forum Posts</acronym>:
                    </td>
                    <td class="statsValue"><span
                            id="ctl00_cphRoblox_rbxUserStatisticsPane_lForumPostsStatistics">0</span></td>
                </tr>
                <!--
                <tr>
                    <td class="statsLabel"><acronym
                            title="The number of times this user's profile has been viewed.">Profile Views</acronym>:
                    </td>
                    <td class="statsValue"><span
                            id="ctl00_cphRoblox_rbxUserStatisticsPane_lProfileViewsStatistics">164,195</span></td>
                </tr>
                -->
                <tr>
                    <td class="statsLabel"><acronym
                            title="The number of times this user's place has been visited.">Place Visits</acronym>:</td>
                    <td class="statsValue"><span
                            id="ctl00_cphRoblox_rbxUserStatisticsPane_lPlaceVisitsStatistics">Loading...</span></td>
                </tr>
                <!--
                <tr>
                    <td class="statsLabel"><acronym
                            title="The number of times this user's character has destroyed another user's character in-game.">Knockouts</acronym>:
                    </td>
                    <td class="statsValue"><span id="ctl00_cphRoblox_rbxUserStatisticsPane_lKillsStatistics">85</span>
                    </td>
                </tr>

                <tr>
                    <td class="statsLabel"><acronym
                            title="The all-time highest voting accuracy this user has achieved when voting in contests.">Highest
                            Ever Voting Accuracy</acronym>:</td>
                    <td class="statsValue"><span
                            id="ctl00_cphRoblox_rbxUserStatisticsPane_lHighestEverVotingAccuracyStatistics">50</span>%
                    </td>
                </tr>
                -->

            </table>
        </div>
        <div id="UserGroupsPane" style="clear: both;">
            <div class="StandardTabWhite">
                <span>Groups</span></div>


            <div class="StandardBoxWhite" style="clear:both;">
                <div id="ctl00_cphRoblox_rbxUserGroupsPane_pNoResults">

                    <p class="NoResults"><span id="ctl00_cphRoblox_rbxUserGroupsPane_lNoResults"><%= username %> is not
                            in any groups.</span></p>

                </div>

            </div>
        </div>
    </div>
    <!--[if IE 6]>
              </td><td width="450px" valign="top">
              <![endif]-->
    <div class="Column2d" style="overflow: hidden">
        <div class="StandardBoxHeader">
            <span>Active Places

            </span>
        </div>
        <div id="UserPlacesPane" class="StandardBox">

            <div id="ctl00_cphRoblox_rbxUserPlacesPane_pnlUserPlaces">

                <div id="UserPlaces" style="overflow: visible;">


                    <div id="user-places-accordion">

                    </div>


                    <div id="ctl00_cphRoblox_rbxUserPlacesPane_ShowcaseFooter" class="PanelFooter">




                    </div>
                </div>

            </div>

        </div>


        <div style="margin-top:10px;" class="StandardTabWhite"><span><%= username %>'s Friends (<a
                    href="Friends.aspx?UserID=<%= userId %>">See all <%= friends.length %></a>)</span></div>
        <div class="StandardBoxWhite">
            <% if (friends.length === 0) { %>
            <div class="NoResults">

                <span class="NoResults">This user does not have any friends.</span>

            </div>
            <% } %>


            <table id="ctl00_cphRoblox_rbxFriendsPane_dlFriends" cellspacing="0" align="Center" border="0"
                style="border-collapse:collapse;">
                <% for (const row of chunkedFriends) { %>
                <tr>
                    <% for (const friend of row) { %>
                    <td>
                        <div class="Friend">
                            <div class="Avatar">
                                <a id="ctl00_cphRoblox_rbxFriendsPane_dlFriends_ctl00_hlAvatar" title="TheJoker21"
                                    href="/User.aspx?ID=<%= friend.id %>"
                                    style="display:inline-block;height:100px;width:100px;cursor:pointer;">
                                    <img src="/Thumbnail/User.ashx?id=<%= friend.id %>" height="100" width="100"
                                        border="0" onerror="return Roblox.Controls.Image.OnError(this)"
                                        alt="<%= friend.name %>" />
                                    <img src="/api/v1/builders-club/users/<%= friend.id %>/redirect-to-icon"
                                        style="position:relative;top:-19px;" align="left">
                                </a>
                            </div>
                            <div class="Summary">
                                <span class="OnlineStatus" data-user-id="<%= friend.id %>"></span>
                                <span class="Name"><a id="ctl00_cphRoblox_rbxFriendsPane_dlFriends_ctl00_hlFriend"
                                        href="/User.aspx?ID=<%= friend.id %>"><%= friend.name %></a></span>
                            </div>
                        </div>
                    </td>
                    <% } %>
                </tr>
                <% } %>
            </table>

        </div>
        <div style="clear: both; margin-bottom: 10px;">
            <div class="StandardTabWhite">
                <span>Favorites</span></div>
            <div id="ctl00_cphRoblox_rbxFavoritesPane_FavoritesPane">

                <div class="StandardBoxWhite">

                    <div id="FavoritesContent">


                        <div id="ctl00_cphRoblox_rbxFavoritesPane_NoResultsPanel" class="NoResults">

                            <span id="ctl00_cphRoblox_rbxFavoritesPane_NoResultsLabel" class="NoResults"><%= username %>
                                has not chosen any favorite places.</span>

                        </div>

                    </div>
                    <div class="PanelFooter">
                        Category:&nbsp;
                        <select name="ctl00$cphRoblox$rbxFavoritesPane$AssetCategoryDropDownList"
                            id="ctl00_cphRoblox_rbxFavoritesPane_AssetCategoryDropDownList">
                            <option value="17">Heads</option>
                            <option value="18">Faces</option>
                            <option value="19">Gear</option>
                            <option value="8">Hats</option>
                            <option value="2">T-Shirts</option>
                            <option value="11">Shirts</option>
                            <option value="12">Pants</option>
                            <option value="13">Decals</option>
                            <option value="10">Models</option>
                            <option selected="selected" value="9">Places</option>

                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div style="clear: both">


            <div id="ctl00_cphRoblox_BigUglyAd_OutsideAdPanel" class="AdPanel">

                <iframe id="ctl00_cphRoblox_BigUglyAd_AsyncAdIFrame" allowtransparency="true" frameborder="0"
                    scrolling="no" height="250" src="/user-sponsorship/3" width="300"></iframe>

            </div>
            <a id="ctl00_cphRoblox_BigUglyAd_ReportAdButton" title="click to report an offensive ad" class="BadAdButton"
                href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$cphRoblox$BigUglyAd$ReportAdButton&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">[
                report ]</a>



        </div>
    </div>
    <!--[if IE 6]>
              </td></tr></table>
              <![endif]-->
    <br clear="all" />

</div>
<div id="UserContainer">
    <div id="UserAssetsPane">
        <div id="ctl00_cphRoblox_rbxUserAssetsPane_upUserAssetsPane">

            <div class="StandardBoxHeader">
                <span>Stuff</span></div>
            <div id="UserAssets" class="StandardBox">
                <div id="AssetsMenu">
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Heads</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Faces</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Gear</a>
                    </div>
                    <div class="AssetsMenuItem AssetsMenuItem_Selected">
                        <a class="AssetsMenuButton">Hats</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">T-Shirts</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Shirts</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Pants</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Decals</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Models</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Places</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Badges</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Left Arms</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Right Arms</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Left Legs</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Right Legs</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Torsos</a>
                    </div>
                    <div class="AssetsMenuItem">
                        <a class="AssetsMenuButton">Packages</a>
                    </div>
                </div>
                <div id="AssetsContent">


                    <table id="ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList" cellspacing="0" border="0"
                        style="border-collapse:collapse;">
                    </table>
                    <div id="ctl00_cphRoblox_rbxUserAssetsPane_FooterPagerPanel" class="FooterPager">
                        <a id="inventory-previous-page" href="#" style="display:none;"><span
                                class="NavigationIndicators">&lt;&lt;</span> Previous</a>
                        <span id="ctl00_cphRoblox_rbxUserAssetsPane_FooterPagerLabel">Page 1</span>
                        <a id="inventory-next-page" href="#" style="display:none;">Next <span
                                class="NavigationIndicators">&gt;&gt;</span></a>
                    </div>
                    <div>

                        <div class="StandardTabWhite"><span>Recommendations</span></div>
                        <div class="StandardBoxWhite">

                            <div style="font-size: x-small;">Here are some other Hats that we think you might like.
                            </div>
                            <table id="ctl00_cphRoblox_rbxUserAssetsPane_AssetRec_dlAssets" cellspacing="0"
                                align="Center" border="0" style="height:200px;width:100px;border-collapse:collapse;">
                            </table>

                        </div>

                    </div>
                </div>
                <div style="clear: both;">
                </div>
            </div>
            <div id="ctl00_cphRoblox_rbxUserAssetsPane_CreateSetPanelDiv" class="createSetPanelPopup"
                style="width: 400px; height: 100%; padding: 0px; float: left; display: none">



            </div>




        </div>

    </div>
</div>

<script src="/js/pages/user.js"></script>

<%- include('../footer'); %>