.content-body-scroller
  div#band-search-filter-builder.content-wrapper
  
  div#band-search-filter-results.content-wrapper
    div#band-search-filter-results-header
      #band-search-filter-results-blank
        a.button-orange#btn-band-search-builder-to_join href="#" SEARCH FOR BAND TO JOIN
        |&nbsp;-&nbsp;or&nbsp;-&nbsp;
        a.button-orange#btn-band-search-builder-to_hire href="#" SEARCH FOR BAND TO HIRE
      #band-search-filter-results-filtered
        a.button-orange#btn-band-search-builder href="#" SEARCH
        a.button-grey#btn-band-search-reset href="#" RESET
        div#band-search-filter-description
      div.clearall
      div#band-search-filter-spinner.spinner-large

    div#band-search-filter-results-wrapper
      div#band-search-filter-results-list-blank
      div.content-wrapper#band-search-filter-results-list
      div.paginate-wait
        Fetching more results...
        div.spinner-small
  
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
      /  .sort-order-selector
      /    select.easydropdown name="sort_order" 
      /      option selected="selected" value="{sort_order}" {sort_order}
      /  .text-label Sort Results By:
    .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"  
            | Looking for New Members with These Skills:
          .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_commitment"
            option selected="selected" value="{play_commitment}" {play_commitment}
  
      .col-right
        .field.builder-selector
          .lhs
            label Status:
            select.easydropdown name="band_status"
              option selected="selected" value="{band_status}" {band_status}
  
        .field.builder-selector
          .rhs
            label Concert Gigs Played:
            select.easydropdown name="concert_gigs"
              option selected="selected" value="{concert_gigs}" {concert_gigs}

        .clearall
    
        .field.builder-selector
          .lhs
            label Touring Option:
            select.easydropdown name="touring_option" 
              option selected="selected" value="{touring_option}" {touring_option}
      .clearall
          
    .clearall
    .band-search-filter-builder-bottom.builder-section.builder-action-buttons
      .col-right
        a#btn-band-search-cancel.builder-button.button-grey href="#" CANCEL
        a#btn-perform-band-search.builder-button.button-orange href="#" SEARCH

script#template-band-search-filter-to_hire type="text/template" 
  #bands-filter-to_hire
    .band-search-filter-builder-top-to_hire.builder-section
      .col-left
        h2 search bands to hire
      .col-right.builder-sort-order
        .sort-order-selector
          select.easydropdown name="sort_order" 
            option selected="selected" value="{sort_order}" {sort_order}
        .text-label Sort Results By:
    .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.builder-selector
          label Status:
          select.easydropdown name="band_status"
            option selected="selected" value="{band_status}" {band_status}
  
        .field.builder-selector
          label Concert Gigs Played:
          select.easydropdown name="concert_gigs"
            option selected="selected" value="{concert_gigs}" {concert_gigs}
    
        .field.builder-selector
          label Performance Sample Available:
          select.easydropdown name="performance_samples"
            option selected="selected" value="{performance_samples}" {performance_samples}
 
    .clearall
  
    .band-search-filter-builder-middle2.builder-section
      .field.builder-selector
        <input type="checkbox" id="has_max_cost" {has_max_cost} >&nbsp;Find bands to play a paid gig at a cost not to exceed&nbsp;&nbsp;$
        input type="text" id="max_cost_amount" name="max_cost" value="{max_cost}" 
 
      .field.builder-selector
        <input type="checkbox" id="free_gigs" name="free_gigs" {has_free_gigs} >&nbsp;Find bands that will play free gigs
    
    .clearall
          
    .clearall
    .band-search-filter-builder-bottom.builder-section.builder-action-buttons
      .col-right
        a#btn-band-search-cancel.builder-button.button-grey href="#" CANCEL
        a#btn-perform-band-search.builder-button.button-orange href="#" SEARCH

script#template-search-filter-setup-instrument type="text/template" 
  tr data-instrument-id="{id}" 
    td <input type="checkbox" {checked} />{description}
    td align="right" width="50%"
      select.proficiency_selector name="proficiency" 
        option value="1"  Beginner
        option value="2"  Intermediate
        option value="3"  Expert
  
script#template-search-filter-setup-genres type="text/template" 
  tr
    td <input value="{id}" {checked} type="checkbox" />{description}

script#template-find-band-row type="text/template"
  .profile-band-list-result.band-list-result
    .f11
      .left style="width:63px;margin-top:-12px;"
        .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
            .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-band-action-btns type="text/template"
  a.button-orange.smallbutton href="{profile_url}" PROFILE
  a.smallbutton.search-m-follow href="#" class="{button_follow}" FOLLOW

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

script#template-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}
