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

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

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

        <div class="user-header">
          <h2 id="username"></h2>
        </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>
          <a id="btn-message-user" class="button-orange">MESSAGE</a>
        </div>
        <br clear="all" /><br />

        <!-- avatar -->
        <div class="profile-photo">
          <div class="avatar-profile">
            <img id="avatar" width="200" height="200" />
          </div>
        </div>

        <!-- profile navigation -->
        <div class="profile-nav">
          <a id="about-link" class="active">about</a>
          <a id="history-link">history</a>
          <a id="bands-link">bands</a>
          <a id="social-link">social</a>
          <a id="favorites-link" class="last">favorites</a>
        </div>
        <div class="clearall"></div>
      </div>

      <div class="profile-body">
        <div id="about-content" class="profile-body-content">
          <!-- stats & location -->
          <div class="profile-wrapper">
            <div class="profile-about-left">
              <div class="profile-actions">
                <%= link_to("EDIT PROFILE", '/client#/account/profile', :class => "button-orange edit-profile-btn") %>
                <%= link_to("EDIT TEACHER PROFILE", '/client#/profile/teachers/setup/introduction', :class => "button-orange edit-teacher-profile-btn") %>
                <%= link_to("VIEW TEACHER PROFILE", '/client#/profile/profile/teacher/ID', :class => "button-orange view-teacher-profile-btn") %>
              </div>
              <h3>Location:</h3><br />
              <span id="location"></span><br />
              <h3>Stats:</h3><br />
              <span id="friend-stats"></span><br />
              <span id="follower-stats"></span><br />
              <span id="session-stats"></span><br />
              <span id="recording-stats"></span><br />
              <span id="following-stats"></span><br />
              <span id="favorite-stats"></span><br />

            </div>
            <div class="profile-about-right">


              <div class="section teacher-search-enabled">
                <div class="section-header">Availability Settings</div>
                <div>
                <span class="list-search-label">Let new students find me by search:</span>
                <label class="switch">
                  <input type="checkbox">
                  <span class="slider">
                    <span class="on-label">YES</span>
                    <span class="off-label">NO</span>
                  </span>
                </label>
                </div>
                <br clear="all" />
              </div>

              <div class="section bio">
                <div class="section-header">Bio <a href="/client#/account/profile" class="add-bio">(edit)</a></div>
                <div id="biography" class="item"></div>

              </div>

              <div class="section">
                <div class="section-header">Musical Experience <a href="/client#/account/profile/experience" class="add-experiences">(edit)</a></div>

                <div class="instruments-holder" class="item">
                  <br clear="all" />
                </div>

                <div class="statuses">
                  <div class="item">
                    <div class="profile-details">Status:</div>
                    <div id="musician-status"></div>
                  </div>
                  <div class="item">
                    <div class="profile-details">Genres:</div>
                    <div id="genres"></div>
                  </div>
                  <div class="item">
                    <div class="profile-details">Concert Gigs:</div>
                    <div id="concert-count"></div>
                  </div>
                  <div class="item">
                    <div class="profile-details">Studio Gigs:</div>
                    <div id="studio-count"></div>
                  </div>
                </div>
              </div>

              <div class="section performance-samples">
                <div class="section-header">Performance Samples <a href="/client#/account/profile/samples" class="add-recordings">(edit)</a></div>
                <%=render "profile_summary_performance_samples" %>
              </div>
              <div class="section">
                <div class="section-header">Online Presence <a href="/client#/account/profile/samples" class="add-presences">(edit)</a></div>
                <%=render "profile_summary_online_presence" %>
              </div>
              <div class="section">
                <div class="section-header">Current Interests <a href="/client#/account/profile/interests" class="add-interests">(edit)</a></div>
                <div id="no-interests" class="item">None specified</div>
                <div id="paid-gigs" class="item">
                  <div>I'm interested in playing paid gigs</div>
                  <div id="paid-gig-details">
                    <ul>

                    </ul>
                  </div>
                </div>

                <div id="free-gigs" class="item">
                  <div>I'm interested in playing free gigs</div>
                  <div id="free-gig-details">
                    <ul>

                    </ul>
                  </div>
                </div>

                <div id="cowriting" class="item">
                  <div>I'm interested in co-writing</div>
                  <div id="cowriting-details">
                    <ul>

                    </ul>
                  </div>
                </div>

                <div id="traditional-band" class="item">
                  <div>I'm interested in forming traditional band(s)</div>
                  <div id="traditional-band-details">
                    <ul>

                    </ul>
                  </div>
                </div>

                <div id="virtual-band" class="item">
                  <div>I'm interested in forming virtual band(s)</div>
                  <div id="virtual-band-details">
                    <ul>

                    </ul>
                  </div>
                </div>
              </div>



            </div>
          </div>
        </div>
        <div id="history-content" class="profile-wrapper">
          <%= form_tag('', {:id => 'user-feed-form', :class => 'inner-content'}) do %>
            <%= render(:partial => "web_filter", :locals => {:search_type => Search::PARAM_FEED, :id => 'user-feed-controls'}) %>
            <div class="filter-body">
              <div class="content-body-scroller" id="user-profile-feed-scroller">
                <div class="profile-wrapper">
                  <div class="feed-content" id="user-profile-feed-entry-list"></div>
                  <div id="user-profile-end-of-feeds-list" class="end-of-list">No more feed entries</div>
                  <div id="user-profile-loading-feeds" class="infinite-scroll-loader" style="padding:5px">Loading ...</div>
                </div>
              </div>
            </div>
          <% end %>
        </div>
        <div id="bands-content" class="profile-wrapper profile-body-content">
          <br clear="all" />
        </div>
        <div id="social-content" class="profile-body-content outer">
          <div class="profile-social-head">
            <div class="profile-social-left">
              <h2>Friends</h2>
            </div>
            <div class="profile-social-mid">
              <h2>Following</h2>
            </div>
            <div class="profile-social-right">
              <h2>Followers</h2>
            </div>
            <div class="clearall"></div>
          </div>
          <div class="profile-social-body">
            <div class="profile-social-body-wrapper">
              <div class="content-body-scroller">
                <!-- @FIXME: seems like too many divs -->
                <div class="profile-social-content">
                  <div class="profile-social-left">
                      <div id="social-friends">
                      </div>
                  </div>
                  <div class="profile-social-mid">
                      <div id="social-followings">
                      </div>
                  </div>
                  <div class="profile-social-right">
                      <div id="social-followers">
                      </div>
                  </div>
                  <div class="clearall"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="favorites-content" class="profile-body-content">
          <div class="profile-wrapper">
            <div class="content-body-scroller">
            </div>
          </div>
        </div>
      </div>
    </form>
  </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="/client#/band/setup/new">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="/client#/band/setup/new">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>

<!--  Band Row Template -->
<script type="text/template" id="template-profile-bands"><!-- -->
    <div band-id="{bandId}" class="profile-band-list-result profile-bands f11">
      <div class="left" style="width:63px;">
        <div class="avatar-small"><img src="{avatar_url}"/></div>
      </div>
      <div class="right" style="width:250px;margin-top:10px;">
        <table class="profile-musicians" cellpadding="0" cellspacing="5">{musicians}</table>
      </div>
      <div style="margin-left: 63px; margin-right: 260px;margin-top:12px;">
        <div class="first-row" data-hint="top-row">
          <div class="lcol left">
            <!-- name & location -->
            <div class="result-name">{name}</div>
            <div class="result-location">{location}</div>
            <br />
            <div id="result_genres" class="nowrap mt10">{genres}</div>
          </div>
          <div class="whitespace">
            <div class="biography">{biography}</div>
          </div>
          <div class="clearleft"></div>
        </div>
        <div class="button-row">
          <div class="lcol stats left">
            {follower_count} <img src="../assets/content/icon_followers.png" title="followers" width="22" height="12" align="absmiddle" />
            {recording_count} <img src="../assets/content/icon_recordings.png" title="recordings" width="12" height="13" align="absmiddle" />
            {session_count} <img src="../assets/content/icon_session_tiny.png" title="sessions" width="12" height="12" align="absmiddle" />
          </div>
          <div class="result-list-button-wrapper">
            <a class="button-orange smallbutton" href="{profile_url}">PROFILE</a>
            <span class="profile-band-link-member-false"><a id="btn-follow-band" class="button-orange smallbutton">FOLLOW</a></span>
            <span class="profile-band-link-member-true"><a href="{band_edit_url}" class="button-orange smallbutton">EDIT BAND</a></span>
            <span class="profile-band-link-member-true"><a href="{band_member_url}" class="button-orange smallbutton">INVITE</a></span>
          </div>
        </div>
      </div>
    </div>
</script>

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