{% extends '__layout__.html' %}
{% block title %}{{profile.username}}{% endblock %}
{% block head %}
<link href="/static/css/profile.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<style>
.place-card { height:220px !important; aspect-ratio:0.640909/1; }
.place-card-container { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:0; }
</style>
{% endblock %}
{% block content %}
<div id="main">
    <div class="container" style="max-width:800px;">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div>
        {% for message in messages %}
        <div class="alert border border-danger p-2 text-center messagealerts">{{ message }}</div>
        {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        <div class="row mb-2">
            <div class="col-md-7 d-flex">
                <div class="image-container">
                    <img class="rounded overflow-hidden" src="/Thumbs/Head.ashx?x=150&y=150&userId={{profile.id}}" width="130" height="130" alt="{{profile.username}}"/>
                    {% if profile.isonline: %}<div class="status-icon {% if profile.ingame: %}status-icon-green{% endif %}"></div>{% endif %}
                </div>
                <div>
                    <div class="d-flex align-items-center">
                        <h1 class="m-0">{{profile.username}}</h1>
                        {% if profile.membershipValue == 1: %}<span class="rbx-icon-bc ms-2"></span>{%endif%}
                        {% if profile.membershipValue == 2: %}<span class="rbx-icon-tbc ms-2"></span>{%endif%}
                        {% if profile.membershipValue == 3: %}<span class="rbx-icon-negative-obc ms-2"></span>{%endif%}
                    </div>
                    {% if profile.id != currentuser.id : %}
                        {% if profile.doestargetuserfollowviewer: %}
                        <p class="m-0" style="font-size:11px;">This user is currently following you</p>
                        {%endif%}
                    {%endif%}
                    <div class="d-flex mt-1">
                        <div style="width:fit-content;" class="me-3">
                            <p class="m-0 text-secondary w-100 text-center d-block" style="font-size:15px;">Friends</p>
                            <a href="/users/{{profile.id}}/friends" class="m-0 text-decoration-none text-white w-100 text-center d-block" style="font-size:25px;">{{profile.friendcount}}</a>
                        </div>
                        <div style="width:fit-content;" class="me-3">
                            <p class="m-0 text-secondary w-100 text-center d-block" style="font-size:15px;">Followers</p>
                            <a href="/users/{{profile.id}}/followers" class="m-0 text-decoration-none text-white w-100 text-center d-block" style="font-size:25px;">{{profile.FollowerCount}}</a>
                        </div>
                        <div style="width:fit-content;" class="me-3">
                            <p class="m-0 text-secondary w-100 text-center d-block" style="font-size:15px;">Following</p>
                            <a href="/users/{{profile.id}}/following" class="m-0 text-decoration-none text-white w-100 text-center d-block" style="font-size:25px;">{{profile.FollowingCount}}</a>
                        </div>
                        <div style="width:fit-content;">
                            <p class="m-0 text-secondary w-100 text-center d-block" style="font-size:15px;">User RAP</p>
                            <p class="m-0 text-white w-100 text-center d-block" style="font-size:25px;">{{profile.UserRAP}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div>
                    <div class="d-flex justify-content-end">
                        <div class="nav-account-dropdown-wrap" id="profileActionsDropdown" style="position:relative;">
                            <button class="btn btn-secondary" onclick="document.getElementById('profileActionsDropdown').classList.toggle('open')" type="button">
                                <i class="bi bi-three-dots-vertical"></i>
                            </button>
                            <div class="nav-dropdown-menu" style="right:0;left:auto;">
                                {% if profile.id != currentuser.id : %}
                                    {% if not profile.isviewerfollowing: %}
                                    <form action="/users/{{profile.id}}/followuser" method="post">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <button class="nav-dropdown-item" type="submit">Follow</button>
                                    </form>
                                    {%else%}
                                    <form action="/users/{{profile.id}}/unfollowuser" method="post">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                        <button class="nav-dropdown-item" type="submit">Unfollow</button>
                                    </form>
                                    {%endif%}
                                    <a class="nav-dropdown-item" href="/trade/{{profile.id}}/create">Trade</a>
                                {% endif %}
                                <a class="nav-dropdown-item" href="/users/{{profile.id}}/inventory">Inventory</a>
                            </div>
                        </div>
                    </div>
                    {% if profile.id != currentuser.id : %}
                    <div class="d-flex justify-content-end me-3 mt-3" style="gap:8px;">
                        <a href="/messages/new/{{profile.id}}"><button class="btn btn-secondary">Message</button></a>
                        {% if profile.isfriends: %}
                        <form action="/users/{{profile.id}}/unfriend" method="post">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            <button class="btn btn-danger">Unfriend</button>
                        </form>
                        {% else: %}
                            {% if profile.friendrequestpending: %}
                            <button class="btn btn-secondary disabled">Pending</button>
                            {% else: %}
                                {% if profile.friendrequesttoauthenticateduser: %}
                                <form action="/users/{{profile.id}}/acceptfriend" method="post">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                    <button class="btn btn-primary">Accept Friend Request</button>
                                </form>
                                {% else: %}
                                <form action="/users/{{profile.id}}/addfriend" method="post">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                    <button class="btn btn-secondary">Add Friend</button>
                                </form>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <nav class="mt-3 mb-2">
            <div class="page-tabs" id="nav-tab" role="tablist">
                <a href="#about" class="nav-link active" id="nav-about-tab" role="tab">About</a>
                <a href="#games" class="nav-link" id="nav-games-tab" role="tab">Games</a>
            </div>
        </nav>
        <div class="tab-content ps-2 pe-2 pt-1 pb-3" id="nav-tabContent">
            <div class="tab-pane show active" id="nav-about" role="tabpanel">
                <h5 class="m-0 mb-1">Description</h5>
                {% for line in descriptionlines: %}
                    {% if line.strip() != '' %}
                    <p class="text-secondary m-0">{{line}}</p>
                    {%else%}
                    <br>
                    {%endif%}
                {% endfor %}
                <div class="linebreak"></div>
                <div class="row">
                    <div class="col-md-6 p-2">
                        <img src="/Thumbs/Avatar.ashx?x=420&y=420&userId={{profile.id}}" class="w-100 border rounded" alt="{{profile.username}} Avatar"/>
                    </div>
                    <div class="col-md-6 p-2">
                        <div class="border rounded w-100 h-100 p-2">
                            <h5 class="text-center w-100 m-0">Currently wearing</h5>
                            <div class="row p-1">
                                {% for asset in profile.wearing %}
                                <div class="col-3 p-1">
                                    <a href="/catalog/{{asset.asset_id}}/">
                                        <img src="/Thumbs/Asset.ashx?assetId={{asset.asset_id}}&x=100&y=100" width="100%" class="rounded p-1" style="background-color:#1e1e1e;">
                                    </a>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex align-items-center">
                    <h5>Friends</h5>
                    <div class="ms-auto">
                        <a href="/users/{{profile.id}}/friends" class="text-decoration-none">View All ( {{profile.friendcount}} )</a>
                    </div>
                </div>
                <div class="rounded dark-container p-2 d-flex">
                    {% for friend in profile.friendsdata %}
                    <a href="/users/{{friend.id}}/profile" style="text-decoration:none;">
                        <div style="height:fit-content;width:90px;" class="me-3">
                            <div class="image-container-friend">
                                <img class="rounded w-100 d-table" src="/Thumbs/Head.ashx?x=100&y=100&userId={{friend.id}}" style="margin:0 auto;max-width:100px;aspect-ratio:1/1;" alt="{{friend.username}}"/>
                                {% if friend.isonline: %}<div class="status-icon {% if friend.ingame: %}status-icon-green{% endif %}"></div>{% endif %}
                            </div>
                            <p class="text-white w-100 text-center d-inline-block m-0 text-truncate" style="font-size:12px;">{{friend.username}}</p>
                        </div>
                    </a>
                    {% endfor %}
                    {% if profile.friendcount == 0: %}
                    <p style="margin:auto;" class="d-table">This user has no friends{% if profile.id != currentuser.id : %}, maybe send them a friend request!{% endif %}</p>
                    {% endif %}
                </div>
                <div class="rounded mt-3 mb-3 p-2 dark-container row d-flex align-items-center" style="min-height:75px !important;">
                    <div class="col text-center">
                        <b class="text-secondary">Join Date</b>
                        <h4>{{profile.joindate}}</h4>
                    </div>
                    <div class="col text-center">
                        <b class="text-secondary">Place Visits</b>
                        <h4>{{profile.TotalVisits}}</h4>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="nav-games" role="tabpanel">
                <h5 class="m-0 mb-1">Games</h5>
                <div class="w-100 place-card-container">
                    {% for place in profile.UserGames: %}
                    <a class="text-decoration-none p-1" href="/games/{{place.id}}/{{place.slug}}">
                        <div class="overflow-hidden place-card w-100">
                            <div class="position-relative">
                                <img width="100%" style="aspect-ratio:1/1;" src="/Thumbs/PlaceIcon.ashx?assetId={{place.id}}&x=150&y=150" alt="{{place.name}}">
                                <div class="position-absolute" style="bottom:0;left:0;">
                                    <div class="fw-bold text-white" style="font-size:12px;padding:3px;border-top-right-radius:4px;background:rgba(0,0,0,0.55);">{{place.placeyear.value}}</div>
                                </div>
                            </div>
                            <div class="p-1">
                                <h5 class="mb-0" style="font-size:17px;text-overflow:ellipsis;">{{place.name}}</h5>
                                <div class="d-flex align-items-center">
                                    <p style="margin:0;font-size:14px;" class="text-secondary"><i class="bi bi-people"></i> {{place.playingcount}} <span style="font-size:13px;">Playing</span></p>
                                </div>
                                <div class="w-100 votePercentageBackground">
                                    <div class="votePercentageFill" style="width:{{place.likePercentage}}%;"></div>
                                    <div><div class="segment" style="left:18%;"></div><div class="segment" style="left:38%;"></div><div class="segment" style="left:58%;"></div><div class="segment" style="left:78%;"></div></div>
                                </div>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
                {% if len(profile.UserGames) == 0:%}
                <p class="text-center w-100 p-5">This user has no games</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
<script>
(function(){
    document.addEventListener('click',function(e){
        var wrap=document.getElementById('profileActionsDropdown');
        if(wrap&&!wrap.contains(e.target)){wrap.classList.remove('open');}
    });
    var tabs=document.querySelectorAll(".page-tabs .nav-link");
    var panes=document.querySelectorAll(".tab-content .tab-pane");
    function activate(tab){
        tabs.forEach(function(t){t.classList.remove("active");});
        panes.forEach(function(p){p.classList.remove("show","active");});
        tab.classList.add("active");
        var target=document.querySelector(tab.getAttribute("href"));
        if(target){target.classList.add("show","active");}
    }
    tabs.forEach(function(tab){
        tab.addEventListener("click",function(e){
            e.preventDefault();
            activate(tab);
            window.location.hash=tab.getAttribute("href");
        });
    });
    var hash=window.location.hash;
    if(hash){
        var matchTab=document.querySelector('.page-tabs .nav-link[href="'+hash+'"]');
        if(matchTab){activate(matchTab);}
    }
})();
</script>
{% endblock %}