<div class="row">
    <div class="col-xs-12">
        <div class="hr dotted clearfix"></div>
        <div id="user-profile-1" class="user-profile row">
            <div class="col-xs-12 col-sm-3 center">
                <div>
                    <span class="profile-picture">
                        <img id="avatar"
                             class="img-responsive image-user-profile"
                             alt="Avatar Image"
                             src="<%= avatar_image %>">
                    </span>

                    <div class="space-4"></div>
                    <div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
                        <div class="inline position-relative">
                            <a href="#" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-circle light-green middle"></i>
                                &nbsp;
                                <span class="white"><%= display_name %></span>
                            </a>
                            <ul class="align-left dropdown-menu dropdown-caret dropdown-lighter">
                                <li class="dropdown-header"> Change Status</li>
                                <li>
                                    <a href="#">
                                        <i class="fa fa-circle green"></i>
                                        &nbsp;
                                        <span class="green">Available</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="fa fa-circle red"></i>
                                        &nbsp;
                                        <span class="red">Busy</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="fa fa-circle grey"></i>
                                        &nbsp;
                                        <span class="grey">Invisible</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="space-6"></div>
                <div class="profile-contact-info">
                    <div class="profile-contact-links align-left">
                        <% if (utils.isAuth()) { %>
                        <a id="follow-button" class="btn btn-link <% if (is_following) { %> following-disabled <% } %>"
                           data-bypass="true">
                            <i class="fa fa-plus-sign bigger-120 <% if (is_following) { %>red<% } else { %>green <% } %>"></i>
                            <% if (is_following) { %>
                            Unfollow
                            <% } else { %>
                            Follow
                            <% } %>
                        </a>
                        <% }else { %>
                        <a id="follow-button-login" class="btn btn-link" data-bypass="true">
                            <i class="fa fa-plus-sign bigger-120 green"></i>
                            Login to follow
                        </a>
                        <% } %>

                        <br>
                        <a class="btn btn-link" href="<%= url %>">
                            <i class="fa fa-globe bigger-125 blue"></i>
                            Profile Link
                        </a>
                    </div>
                    <div class="space-6"></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-9">
                <div class="center">
                    <a href="/user/<%= slug %>/mixes" class="btn btn-pink">
                        <i class="fa fa-music"></i>
                        <span class="smaller-90">Mixes</span>
                        <span class="badge badge-warning"><%= mix_count %></span>
                    </a>
                    <a href="/user/<%= slug %>/favourites" class="btn btn-danger">
                        <i class="fa fa-star"></i>
                        <span class="smaller-90">Favourites</span>
                        <span class="badge badge-warning"><%= favourite_count %></span>
                    </a>
                    <a href="/user/<%= slug %>/likes" class="btn btn-purple">
                        <i class="fa fa-heart /bigger-230"></i>
                        <span class="smaller-90">Likes</span>
                        <span class="badge badge-warning"><%= like_count %></span>
                    </a>
                    <a href="/user/<%= slug %>/followers" class="btn btn-default">
                        <i class="fa fa-check"></i>
                        <span class="smaller-90">Followers</span>
                        <span class="badge badge-warning"><%= followers.length %></span>
                    </a>
                    <a href="/user/<%= slug %>/following" class="btn btn-warning">
                        <i class="fa fa-share"></i>
                        <span class="smaller-90">Following</span>
                        <span class="badge badge-warning"><%= following.length %></span>
                    </a>
                </div>
                <div class="space-12"></div>

                <div class="tabbable">

                    <ul id="profile-tabs" class="nav nav-tabs">
                        <li class="active">
                            <a href="#details" data-toggle="tab" data-bypass="true">
                                <i class="green ace-icon fa fa-user bigger-120"></i>
                                Details
                            </a>
                        </li>
                        <li>
                            <a href="#playlists" data-toggle="tab" data-bypass="true">
                                <i class="orange ace-icon fa fa-list-ul bigger-120"></i>
                                Playlists
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane in active" id="details" data-bypass="true">
                            <div class="profile-user-info profile-user-info-striped">
                                <div class="profile-info-row">
                                    <div class="profile-info-name"> Location</div>
                                    <div class="profile-info-value">
                                        <i class="fa fa-map-marker light-orange bigger-110"></i>
                                        <span class="usereditable" id="city" style="display: inline;"><%= city %></span>
                                    <span class="usereditable" id="country"
                                          style="display: inline;"><%= country %></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name"> Joined</div>
                                    <div class="profile-info-value">
                                        <span id="signup" style="display: inline;"><%= humanise(date_joined) %></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name"> Last Online</div>
                                    <div class="profile-info-value">
                                <span id="login"
                                      style="display: inline; background-color: rgba(0, 0, 0, 0);"><%= humanise(last_login) %></span>
                                    </div>
                                </div>
                                <div class="profile-info-row">
                                    <div class="profile-info-name"> About Me</div>
                                    <div class="profile-info-value">
                                        <div class="usereditable" id="about"
                                             style="display: inline; white-space:pre-wrap;"><%= description %></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="playlists">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <td>Name</td>
                                    <td>Date created</td>
                                    <td>Mix count</td>
                                </tr>
                                </thead>
                                <tbody>
                                <% _.each(playlists, function(playlist){ %>
                                <tr>
                                    <td><a href="<%= playlist.item_url %>"><%= playlist.name %></a></td>
                                    <td><%= humanise(playlist.date_created) %></td>
                                    <td><%= playlist.mixes.length %></td>
                                </tr>
                                <% }); %>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>


                <div class="space-20"></div>
            </div>
        </div>
    </div>
</div>
