<template name="profile">
    {{> alerts}}
    {{> header}}
    {{#if loaded}}
        <!--{{> avatar userId=profileUserId shape="circle" class="profile-img" initials=initials}}-->
        <h1 id="profile-name" class="black-text thin">{{username}}</h1>
        <div class="row">
            <div class="col s12 m6 l4">
                <div class="card blue-grey darken-1 profile-card">
                    <div class="card-content white-text">
                        <span class="card-title">User Info</span>
                        <p>Name: {{real_name}}</p>
                        <p>Username: {{username}}</p>
                        <p>First Joined: {{first_joined}}</p>
                        <p>Rank: {{rank}}</p>
                    </div>
                </div>
            </div>
            <div class="col s12 m6 l4">
                <div class="card teal accent-3 profile-card">
                    <div class="card-content white-text">
                        <span class="card-title">Liked Songs</span>
                        {{#each likedSongs}}
                            <div class="profile-card-song">
                                <div class="section">
                                    <h5>Title</h5>
                                    <p>Artist</p>
                                </div>
                                <div class="divider"></div>
                            </div>
                        {{/each}}
                    </div>
                </div>
            </div>
            <div class="col s12 m6 l4">
                <div class="card red darken-2 profile-card">
                    <div class="card-content white-text">
                        <span class="card-title">Disliked Songs</span>
                        {{#each dislikedSongs}}
                            <div class="profile-card-song">
                                <div class="section">
                                    <h5>Title</h5>
                                    <p>Artist</p>
                                </div>
                                <div class="divider"></div>
                            </div>
                        {{/each}}
                    </div>
                </div>
            </div>
        </div>
    {{else}}
        {{> loading}}
    {{/if}}
</template>
