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

        <h1>band profile</h1>

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

                <div class="left band-actions">
                  <a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a>
                  <a id="btn-edit-band-members" class="button-orange">INVITE</a>
                  <a id="btn-edit-band-delete" class="button-orange">DELETE</a>
                </div>
                <div class="band-profile-status">
                </div>

                <div class="right">
                    <a id="btn-follow-band" class="button-orange">FOLLOW</a>
                    <!-- <a id="btn-edit-band-profile" class="button-orange">EDIT PROFILE</a> -->
                </div>

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

                <!-- profile navigation -->
                <div class="band-profile-nav">
                    <a id="band-profile-about-link" class="band active">about</a>
                    <a id="band-profile-history-link" class="band">history</a>
                    <a id="band-profile-members-link" class="band">members</a>
                    <a id="band-profile-social-link" class="band last">social</a>
                </div>
                <div class="clearall"></div>
            </div>
            <div class="profile-body">
                <div id="band-profile-about" class="profile-body-content">
                    <div class="band-profile-wrapper">
                        <!-- stats & location -->
                        <div class="profile-about-left">
                            <h3>Location:</h3><br />
                            <span id="band-profile-location"></span><br /><br /><br />
                            <h3>Stats:</h3><br />
                            <span id="band-profile-follower-stats"></span><br />
                            <span id="band-profile-session-stats"></span><br />
                            <span id="band-profile-recording-stats"></span><br />
                        </div>


                        <div class="profile-about-right">
                          <div class="band-entry">
                            <div class="item-caption">Bio</div>
                            <div class="item-content" id="band-profile-biography"></div>
                            <div class="item-content">
                              <a id="btn-edit-band-bio" class=".edit-bio">Edit Bio</a>
                            </div>
                          </div>
                        </div>

                        <div class="profile-about-right">
                          <div class="band-entry">
                            <div class="item-caption">Musical Experience</div>
                            <div class="item-content">
                              <table class="summary-table">
                                <tr>
                                    <td>Genres:</td>
                                    <td class="experience-genres">Genres</td>
                                </tr>
                                <tr>
                                    <td>Concert Gigs:</td>
                                    <td class="experience-gigs"></td>
                                </tr>
                                <tr>
                                    <td>Status:</td>
                                    <td class="experience-status"></td>
                                </tr>
                                <tr>
                                    <td>Type:</td>
                                    <td class="experience-type"></td>
                                </tr>
                              </table>
                            </div>
                          </div>
                        </div>

                        <div class="profile-about-right">
                          <div class="band-entry">
                            <div class="item-caption">Performance Samples</div>
                            <div class="item-content">
                                <%=render "profile_summary_performance_samples" %>
                            </div>
                          </div>
                        </div>

                        <div class="profile-about-right">
                          <div class="band-entry">
                            <div class="item-caption">Online Presence</div>
                            <div class="item-content">
                                <%=render "profile_summary_online_presence" %>
                            </div>
                          </div>
                        </div>


                        <div class="profile-about-right">
                          <div class="band-entry">
                            <div class="item-caption">Current Interests</div>
                            <ul>
                                <li class="interests-new-members hidden">
                                    <span>Our band is looking for new members who play our genre(s) of music and can play the following:</span>
                                    <span class="new-member-details"></span>
                                </li>
                                <li class="interests-paid-gigs hidden">
                                    <span>Our band is available for hire to perform at concerts and events for</span>
                                    <span class="paid-gig-rate">
                                    </span>
                                    <span class="paid-gig-minimum">
                                    </span>
                                </li>
                                <li class="interests-free-gigs hidden">
                                    <span>Our band is available to perform at concerts and events at no charge as we are currently building our live performance experience.</span>
                                </li>
                            </ul>
                          </div>
                        </div>

                    </div>
                </div>

                <div id="band-profile-history" class="profile-body-content band-profile-wrapper">
                  <div class="band-profile-history-feed">
                    <%= form_tag('', {:id => 'band-feed-form', :class => 'inner-content'}) do %>
                      <%= render(:partial => "web_filter", :locals => {:search_type => Search::PARAM_FEED, :id => 'band-feed-controls'}) %>
                      <div class="filter-body">
                        <div class="content-body-scroller" id="band-profile-feed-scroller">
                          <div class="profile-wrapper">
                            <div class="feed-content" id="band-profile-feed-entry-list"></div>
                            <div id="band-profile-end-of-feeds-list" class="end-of-list">No more feed entries</div>
                            <div id="band-profile-loading-feeds" class="infinite-scroll-loader" style="padding:5px">Loading ...</div>
                          </div>
                        </div>
                      </div>
                    <% end %>
                  </div>
                </div>

                <div id="band-profile-members" class="band-profile-wrapper profile-body-content f11">
                    <br clear="all" />
                </div>
                <!-- @FIXME cf clients/_profile.html.erb to mimic layout for scrolling header -->
                <div id="band-profile-social" class="band-profile-wrapper profile-body-content">
                    <div class="">
                        <h2>Followers</h2>
                        <div id="band-profile-social-followers">
                        </div>
                    </div>
                    <br clear="all" />
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/template" id="template-band-profile-members">
    <div user-id="{userId}" class="band-profile-members" band-admin="{band_admin}" pending-member="{is_pending}" invitation-id="{invitation_id}">
        <div class="left" style="width:63px;">
            <div class="avatar-small">
                <img src="{avatar_url}" />
            </div>
        </div>
        <div class="" style="margin-left: 63px;margin-top:12px;">
            <div class="first-row" data-hint="top-row">
                <div class="lcol left">
                    <div class="result-name">{name}</div>
                    <div class="result-location">{location}</div>
                    <br />
                    <div class="nowrap mt10">{instruments}</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">
                    {friend_count} <img src="../assets/content/icon_friend.png" title="friends" width="14" height="14" align="absmiddle" />
                    {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>
                    <a class="btn-follow-member button-orange smallbutton">FOLLOW</a>
                    <a class="btn-remove-member button-orange smallbutton">REMOVE MEMBER</a>
                    <a style="display:none;" class="btn-reinvite-member button-orange smallbutton">RESEND INVITATION</a>
                    <a style="display:none;" class="btn-friend-member button-orange smallbutton">CONNECT</a>
                </div>
            </div>
        </div>
    </div>
</script>

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