#bands-screen.screen.secondary layout="screen" layout-id="bands" 
  .content
    .content-head
      .content-icon
        img alt="Icon_bands" height="19" src="/assets/content/icon_bands.png" width="19" /
      h1 bands
      = render "screen_navigation" 
    .content-body
      = render "clients/band_search_filter"

script#template-band-search-filter-to_join type="text/template" 
  #bands-filter-to_join
    #band-search-filter-builder-top.builder-section
      .col-left
        h2 search bands
      .col-right.builder-sort-order
          .text-label Sort Results By:
          select.easydropdown name="sort_order" 
            option selected="selected" value="{sort_order}" {sort_order}
    .clearall
  
    #band-search-filter-builder-middle1.builder-section
      .col-left
        .field
          label for="search-filter-genres"  Genres:
          .search-filter-setup-genres.band-setup-genres
            table#search-filter-genres cellpadding="10" cellspacing="6" width="100%" 
        
      .col-right
        .field
          label for="search-filter-instruments"  
            | Instruments &amp; Skill Level:
          .search-filter-setup-instruments.band-setup-genres.builder-instruments
            table#search-filter-instruments cellpadding="10" cellspacing="6" width="100%" 
    .clearall
  
    #band-search-filter-builder-middle2.builder-section
      .col-left
        .field.builder-selector
          label Type:
          select.easydropdown name="band_type" 
            option selected="selected" value="{band_type}" {band_type}
        
        .field.builder-selector
          label Play Commitment:
          select.easydropdown name="play_commit"
            option selected="selected" value="{play_commit}" {play_commit}
  
      .col-right
        .field.builder-selector
          label Status:
          select.easydropdown name="skill_level"
            option selected="selected" value="{skill_level}" {skill_level}
  
        .field.builder-selector
          label Concert Gigs Played:
          select.easydropdown name="concert_gigs"
            option selected="selected" value="{concert_gigs}" {concert_gigs}
    
        .field.builder-selector
          label Touring Option:
          select.easydropdown name="tour_option" 
            option selected="selected" value="{tour_option}" {tour_option}
        
        .clearall
          
    .clearall
    #band-search-filter-builder-bottom.builder-section.builder-action-buttons
      .col-right
        a#btn-perform-band-search.builder-button.button-orange href="#" SEARCH
        a#btn-band-search-cancel.builder-button.button-grey href="#" CANCEL

/! Session Row Template
script#template-search-band-row type="text/template" 
  .profile-band-list-result.band-list-result
    .f11
      .left style="width:63px;margin-top:-12px;"
        /! avatar
        .avatar-small
          img src="{avatar_url}" /
      .right.mband-players style="width:265px; margin-top:-4px;"
        table.musicians cellpadding="0" cellspacing="5"
          | {band_player_template}
      div style="margin-left: 63px; margin-right: 275px;margin-top: 12px;"
        .first-row data-hint="top-row"
          .lcol.left
            /! name and location
            .result-name
              | {band_name}
            .result-location
              | {band_location}
            br /
            #result_genres.nowrap.mt10
              | {genres}
          .whitespace
            .biography
              | {biography}
          .clearleft
        .button-row
          .lcol.stats.left
            span.follower-count
              | {follow_count} 
              img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" style="margin-right:4px;" /
            span.recording-count
              | {recording_count}
              img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" style="margin-right:4px;" /
            span.session-count
              | {session_count}
            img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /
          .clearall
          .result-list-button-wrapper data-band-id="{band_id}"
            | {band_action_template}
          .clearall

script#template-search-band-action-btns type="text/template" 
  a.button-orange smallbutton href="{profile_url}" 
    PROFILE
  a class="{button_follow} smallbutton search-m-follow" href="#"
    FOLLOW

script#template-search-band-edit-btns type="text/template" 
  a href="{profile_url}" class="button-orange smallbutton"
    PROFILE
  a href="{band_edit_url}" class="button-orange smallbutton"
    EDIT BAND
  a href="{band_member_url}" class="button-orange smallbutton"
    INVITE

script#template-search-band-player-info type="text/template" 
  tr
    td
      a.avatar-tiny href="{profile_url}" user-id="{user_id}" hoveraction="musician"
        img src="{avatar_url}" /
    td style="padding: 0 4px;width:88px"
      a user-id="{user_id}" hoveraction="musician" href="{profile_url}"
        strong
          | {player_name}
    td.instruments
      | {player_instruments}

