- unless commercials.empty?
  - if commercials.length == 1
    .flexvideo
      = render partial: 'shared/media_item', locals: { commercial: commercials.first }
  - else
    %ul.nav.nav-tabs{ 'role'=>'tablist' }
      - commercials.each.with_index(1) do  |commercial, index|
        - if index == 1
          %li.active
            %a{ 'href'=>"##{index}", 'role'=>'tab', 'data-toggle'=>'tab' }
              = index
        - else
          %li
            %a{ 'href'=>"##{index}",' "role"'=>'tab', 'data-toggle'=>'tab' }
              = index
    .tab-content
      - commercials.each.with_index(1) do  |commercial, index|
        - if index == 1
          %div.tab-pane.active{'id'=>"#{index}"}
            .flexvideo
              = render partial: 'shared/media_item', locals: { commercial: commercial }
        - else
          %div.tab-pane{'id'=>"#{index}"}
            .flexvideo
              = render partial: 'shared/media_item', locals: { commercial: commercial }