jam-cloud/web/app/views/clients/_profile.html.erb

<!-- Profile -->
<div layout="screen" layout-id="profile" layout-arg="id" class="screen secondary">
    <div class="content-head">
        <div class="content-icon">
            <%= image_tag "content/icon_profile.png", :size => "19x19" %>
        </div>

        <h1><span id="profile-type-label">musician</span> profile</h1>

        <%= render "screen_navigation" %>
    </div>
    <div class="content-body">
        <div class="content-body-scroller">
            <form id="profile-form">
                <div class="profile-header">

                    <!-- profile name -->
                    <h2 id="profile-username"></h2>

                    <!-- profile status -->
                    <div class="profile-status">
                    </div>

                    <!-- action buttons -->
                    <div class="right">
                        <a id="btn-add-friend" class="button-orange">ADD FRIEND</a>
                        <a id="btn-follow-user" class="button-orange">FOLLOW</a>
                        <%= link_to("EDIT PROFILE", '/client#/account/profile', :id => "btn-profile-edit", :class => "button-orange") %>
                    </div>
                    <br clear="all" /><br />

                    <!-- avatar -->
                    <div class="profile-photo">
                        <div class="avatar-profile">
                            <img id="profile-avatar" width="200" height="200" />
                        </div>
                    </div>
                    <!-- profile navigation -->
                    <div class="profile-nav">
                        <a id="profile-about-link" class="active">about</a>
                        <a id="profile-history-link">history</a>
                        <a id="profile-bands-link">bands</a>
                        <a id="profile-social-link">social</a>
                        <a id="profile-favorites-link" class="last">favorites</a>
                    </div>
                    <div class="clearall"></div>
                </div>
                <div class="content-scroller">
                    <div id="profile-about" class="profile-wrapper">
                        <!-- stats & location -->
                        <div class="profile-about-left">
                            <h3>Location:</h3><br />
                            <span id="profile-location"></span><br /><br /><br />
                            <h3>Stats:</h3><br />
                            <span id="profile-friend-stats"></span><br />
                            <span id="profile-follower-stats"></span><br />
                            <span id="profile-following-stats"></span><br />
                            <span id="profile-favorite-stats"></span><br />
                            <span id="profile-session-stats"></span><br />
                            <span id="profile-recording-stats"></span><br />
                        </div>
                        <div class="profile-about-right">
                            <p id="profile-biography"></p><br />
                            <div id="profile-instruments">
                            </div>
                        </div>
                        <br clear="all" />
                    </div>
                    <div id="profile-history" class="profile-wrapper">
                        <br clear="all" />
                    </div>
                    <div id="profile-bands" class="profile-wrapper">
                        <br clear="all" />
                    </div>
                    <div id="profile-social" class="profile-wrapper">
                         <div class="profile-social-left">
                            <h2>Friends</h2>
                            <div id="profile-social-friends">
                            </div>
                        </div>
                        <div class="profile-social-mid">
                            <h2>Following</h2>
                            <div id="profile-social-followings">
                            </div>
                        </div>
                        <div class="profile-social-right">
                            <h2>Followers</h2>
                            <div id="profile-social-followers">
                            </div>
                        </div>
                        <br clear="all" />
                    </div>
                    <div id="profile-favorites" class="profile-wrapper">
                        <br clear="all" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/template" id="template-no-bands">
    <div class="when-empty">
        Not In Any Bands:<br/>
        <a id="band-setup-link" href="#/band/setup">Set Up Your Band</a>
    </div>
</script>

<script type="text/template" id="template-more-bands">
    <div class="when-empty">
        <a id="band-setup-link" href="#/band/setup">Set Up Another Band</a>
    </div>
</script>

<script type="text/template" id="template-profile-instruments">
    <div class="profile-instrument">
        <img src="{instrument_logo_url}" width="70" height="70" /><br />
        <span>{instrument_description}</span><br />
        <span class="{proficiency_level_css}">{proficiency_level}</span>
    </div>
</script>

<script type="text/template" id="template-profile-bands">
    <div band-id="{bandId}" class="profile-bands">
        <div class="avatar-small">
            <img src="{avatar_url}" width="275" height="183" />
        </div>
        <div class="profile-band-name">
            {name}<br />
            <span class="profile-band-location">{location}</span>
            <br clear="left" /><br />
            <div style="width:50px;">{genres}</div><br /><br />
            {follower_count}&nbsp;<img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;
            {recording_count}&nbsp;<img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;
            {session_count}&nbsp;<img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
        </div>
        <div style="height:90px" class="left ml20 f11 whitespace w35"><br />
            {biography}<br /><br />
            <a class="button-orange smallbutton m0" href="{band_url}">PROFILE</a>&nbsp;&nbsp;
            <a id="btn-follow-band" class="button-orange smallbutton m0">FOLLOW</a>
        </div>
        <div class="left ml10 w25">
            <table class="profile-musicians" cellpadding="0" cellspacing="5">
                {musicians}
            </table>
        </div>
    </div>
</script>

<script type="text/template" id="template-profile-social">
    <div class="profile-block">
        <div class="avatar-small">
            <img src="{avatar_url}" />
        </div>
        <div class="profile-block-name">{userName}</div>
        <div class="profile-block-city">{location}</div>
    </div>
</script>