<!-- 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>musician profile</h1>

        <%= render "screen_navigation" %>
    </div>
    <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>
            </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>
        <br clear="all" />
        <div class="content-scroller" style="height:350px;">
            <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-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>

<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>
        </div>
        <br clear="left" />
        <div class="profile-band-genres">{genres}</div>
        <a id="btn-follow-band" class="button-orange smallbutton right">FOLLOW</a>
    </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>