%script{type: 'text/template', id: 'template-feed-music-session'}
  .feed-entry.music-session-history-entry{'data-music-session' => '{{data.feed_item.id}}' }
    / avatar
    .avatar-small.ib
      %a{:hoveraction => "{{data.feed_item.helpers.artist_hoveraction}}", :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :"{{data.feed_item.helpers.artist_datakey}}" => "{{data.feed_item.helpers.artist_id}}"}
        %img{ src: '{{data.feed_item.helpers.avatar}}' }
    / type and artist
    .left.ml20.w15
      .title
        %a{:href => "/sessions/{{data.feed_item.id}}", :rel => "external", :hoveraction => "session", :'session-id' => '{{data.feed_item.id}}'} SESSION
      .artist
        %a.artist{:hoveraction => '{{data.feed_item.helpers.artist_hoveraction}}', :profileaction => "{{data.feed_item.helpers.artist_hoveraction}}", :'{{data.feed_item.helpers.artist_datakey}}' => '{{data.feed_item.helpers.artist_id}}'}
          = '{{data.feed_item.helpers.artist_name}}'
      %time.small.created_at.timeago{datetime: '{{data.feed_item.helpers.utc_created_at}}'}= '{{data.feed_item.started_at}}'
    / name and description
    .left.ml20.w30
      .name.dotdotdot
        %span.name-text {{data.feed_item.helpers.name}}
      .description.dotdotdot
        = '{{data.feed_item.helpers.description}}'
    / timeline and controls
    .right.w40
      / recording play controls
      .session-controls{class:'{{data.status_class}} {{data.mount_class}}', :'data-music-session' => '{{data.feed_item.id}}', 'fan-access' => '{{data.feed_item.fan_access}}'}
        / session status
        %a.left.play-button{href:'#'}
          = image_tag 'content/icon_playbutton.png', width:20, height:20, class:'play-icon'
          = "{% if(data.feed_item['has_mount?']) { %}"
          = "{% if(data.feed_item.fan_access) { %}"
          %audio{preload: 'none'}
            %source{src: '{{data.feed_item.active_music_session.mount.url}}',  type: '{{data.feed_item.active_music_session.mount.mime_type}}'}
          = '{% } %}'
          = '{% } %}'
        %span.session-status
          = '{{data.feed_item.helpers.status}}'
        / current playback time
        %time{class: 'session-duration tick-duration recording-current duration', 'data-created-at' => '{{data.feed_item.helpers.duration_secs}}', 'duration' => '{{data.feed_item.helpers.duration}}'}
          = '{{data.feed_item.helpers.duration}}'
      / end recording play controls
      / genre and social
      .left.small= '{{data.feed_item.helpers.genre}}'
      .right.small.feed-details
        %a{title: 'Share', class: 'btn-share'}
          = image_tag 'content/icon_share.png', :height => "12", :width => "7"
         
        %span.play-count
          %span.plays
            = '{{data.feed_item.play_count}}'
          = image_tag 'content/icon_arrow.png', :height => "12", :width => "7", :title => 'Play'
        %span.comment-count
          %span.comments
            = '{{data.feed_item.comment_count}}'
          %a{title: 'Comment', class: 'btn-comment'}
            = image_tag 'content/icon_comment.png', :height => "12", :width => "13"
        %span.like-count
          %span.likes
            = '{{data.feed_item.like_count}}'
          %a{title: 'Like', class: 'btn-like'}
            = image_tag 'content/icon_like.png', :height => "12", :width => "12"
        %a.details{:href => "#"} Details
        %a.details-arrow.arrow-down-orange{:href => "#"}
      %br/
      .musician-detail.hidden
        / sub-table of musicians
        %table.musicians{:cellpadding => "0", :cellspacing => "5"}
          %tbody
            = '{% _.each(data.feed_item.participants, function(user) { %}'
            %tr
              %td{:width => "24"}
                %a.avatar-tiny{:hoveraction => "musician", :profileaction => "musician", :'user-id' => '{{user.id}}'}
                  %img{src: '{{user.helpers.avatar}}'}
              %td
                %a.musician-name{:hoveraction => "musician", :profileaction => "musician", :'user-id' => '{{user.id}}'}
                  = '{{user.first_name}} {{user.last_name}}'
              %td
                .nowrap
                  = '{% if(user.instruments) { %}'
                  = '{% _.each(_.uniq(user.instruments), function(instrument_id) { %}'
                  %img.instrument-icon{'instrument-id' =>'{{instrument_id}}', 'title' =>'{{instrument_id}}', height:24, width:24}
                  = '{% }) %}'
                  = '{% } else { %}'
                  %img.instrument-icon{'instrument-id' =>'default', height:24, width:24}
                  = '{% } %}'
            = '{% }) %}'

    %br{:clear => "all"}/
    %br/