!!!5
%html
  %head
    %title BeatHaven
    %meta{ :charset => "utf-8" }
    %link{ :rel => "shortcut icon", :href => "/favicon.ico" }
    = stylesheet_link_tag "application"
    = javascript_include_tag "http://code.jquery.com/jquery.min.js"
    = javascript_include_tag "http://code.jquery.com/ui/1.8.14/jquery-ui.min.js"
    = javascript_include_tag "application"
  %body
    
    .topbar-wrapper 
      .topbar
        .topbar-inner
          .container
            %h3
              %a#logo{ :href => "#/" } BeatHaven
            %ul.nav
              %li
                %a{ :href => "http://blog.beathaven.org/", :target => "_blank" }= I18n.t 'global.news'
              %li
                %a.about{ :href => "#/about/" }= I18n.t 'global.about' 
            %form#search-form{ :action => "" }
              %input#search{ :type => "text", :placeholder => I18n.t('global.search') }
              #artist-load-spinner
                = image_tag "artist_loader.gif"
            %ul.nav.secondary-nav
              %li
                %a#login{ :href => "#/login/" }= I18n.t 'global.login'
              %li.dropdown#authorized
                %a.dropdown-toggle#username{ :href => "#/" } %username%
                %ul.dropdown-menu
                  %li
                    %a#preferences{ :href => "#/settings/" }= I18n.t 'global.settings'
                  %li.divider
                  %li
                    %a#logout{ :href => "#/logout/" }= I18n.t 'global.logout'
    
    .popover-wrapper
      .popover.below#autocomplete-container
        .arrow
        .inner
          %h3.title.start
          .content#autocomplete-items

    .container#main
      .row
        .span11.columns#content
           
        
        .span5.columns
          .ad_here= (I18n.t 'global.your_ad_here').html_safe
          .player
            %h5.now-playing= I18n.t 'global.do_add'
            .progress
              .loaded
                .played
            .buttons
              .secondary-buttons
                %a.shuffle{ :title => I18n.t('player.shuffle') }= image_tag "icns/shuffle.png"
                %a.repeat{ :title => I18n.t('player.repeat') }= image_tag "icns/repeat.png"
                %a.do_empty{ :title => I18n.t('player.do_empty') }= image_tag "icns/empty.png"
              .primary-buttons
                %a.btn.small-round.prev «
                %a.btn.large.play ►
                %a.btn.large.pause II
                %a.btn.small-round.next »
              .quality-buttons
                %a.q-good{ :title => I18n.t('player.thumbs_up') }= image_tag "icns/thumbs-up.png"
                %a.q-bad{ :title => I18n.t('player.thumbs_down') }= image_tag "icns/thumbs-down.png"
              
              

          %ul.playlist
    
    .fullscreen
      .inner
        = image_tag "loader.gif"
    
    #vk_api_transport
    #jplayer