!!!5
%html
  %head
    %title BeatHaven
    %meta{ :charset => "utf-8" }
    %meta{ :name => "csrf-token", content: form_authenticity_token }
    %meta{ name: "description", content: "Ultimate Online Jukebox" }
    %meta{ property: "og:title", content: "BeatHaven" }
    %meta{ property: "og:description", content: "Ultimate Online Jukebox" }
    %meta{ property: "og:image", content: image_path("thumb.png") }
    %link{ rel: "shortcut icon", href: "/favicon.ico" }
    %link{ rel: "apple-touch-icon", href: image_path("logo.png") }
    %link{ rel: "search", type: "application/opensearchdescription+xml", title: "BeatHaven", href: "/opensearch.xml"}
    = stylesheet_link_tag "application"
    = javascript_include_tag "application"
    = javascript_include_tag "http://userapi.com/js/api/openapi.js?45", charset: "windows-1251"
  %body
    #fb-root
    .topbar-wrapper
      .topbar
        .topbar-inner
          .container
            %h3
              %a#logo.page-link{ :href => "/" } BeatHaven
            %ul.nav
              %li
                %a.foreign-link{ :href => "https://twitter.com/#!/beat_haven", :target => "_blank" }= t('global.news')
              %li
                %a.page-link.about{ :href => "/about/" }= t('global.about')
              %li
                %a.page-link.stat{ :href => "/stat/" }= t('global.stat')
            %form#search-form{ :action => "" }
              %input#search{ :type => "text", :placeholder => t('global.search') }
              #artist-load-spinner
                = image_tag "artist_loader.gif"
            %ul.nav.secondary-nav
              %li
                %a#login{ :href => "#/login/" }= t('global.login')
              %li.dropdown#authorized
                %a.dropdown-toggle#username{ :href => "#/" } %username%
                %ul.dropdown-menu
                  %li
                    %a#preferences{ :href => "#/settings/" }= t('global.settings')
                  %li.divider
                  %li
                    %a#logout{ :href => "#/logout/" }= 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= t('global.your_ad_here').html_safe
          .player
            %h5.now-playing= t('global.do_add')
            .progress
              .loaded
                .played
            .buttons
              .secondary-buttons
                %a.shuffle{ :title => t('player.shuffle') }= image_tag "icns/shuffle.png"
                %a.repeat{ :title => t('player.repeat') }= image_tag "icns/repeat.png"
                %a.do_empty{ :title => 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 => t('player.thumbs_up') }= image_tag "icns/thumbs-up.png"
                / %a.q-bad{ :title => t('player.thumbs_down') }= image_tag "icns/thumbs-down.png"
          %ul.playlist
      .row
        .span11= render "like"
    .fullscreen
      .inner
        = image_tag "loader.gif"
    #vk_api_transport
    #jplayer
    = render "user/settings"