<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 user.is_authenticated %}
                            <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>
                        {% endif %}

                    <br>
                    {% comment %}
                    <a class="btn btn-link" href="#">
                        <i class="fa fa-envelope bigger-120 pink"></i>
                        Send a message
                    </a>
                    {% endcomment %}
                    <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>
                {% comment %}
                <div class="profile-social-links center">
                    <a href="#" class="tooltip-info" title="" data-original-title="Visit my Facebook">
                        <i class="middle fa fa-facebook-sign fa fa-2x blue"></i>
                    </a>

                    <a href="#" class="tooltip-info" title="" data-original-title="Visit my Twitter">
                        <i class="middle fa fa-twitter-sign fa fa-2x light-blue"></i>
                    </a>

                    <a href="#" class="tooltip-error" title="" data-original-title="Visit my Pinterest">
                        <i class="middle fa fa-pinterest-sign fa fa-2x red"></i>
                    </a>
                </div>
                {% endcomment %}
            </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="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 class="space-20"></div>
        </div>
    </div>
</div>
</div>
