-# coding: utf-8
.off-canvas-wrap
  .inner-wrap
    .fixed    
      %nav.top-bar
        %ul.title-area
          %li.name
            %h1
              %a{href: "#"} rSeed
          %li.toggle-topbar.menu-icon
            %a{href: "#"}
              %span Menu
        %section.top-bar-section
          %ul.right
            %li
              %a
                %i.fi-graph-pie
                493 Go (55%)
            %li.divider
            %li.has-form
              %a.button.radius.success= "&#8593; <strong id='up-info'></strong>"
            %li.divider
            %li.has-form
              %a.button.radius= "&#8595; <strong id='down-info'></strong>"
          %ul.left
            %li
              %a.button.radius.alert{href: "#"} Add
    %section.main-section{style: "margin: 50px 10px"}
      %table{style: "width: 100%;"}
        %thead
          %tr
            %th Torrent
            %th Ratio
            %th Upload
            %th Download
            %th Actions
        %tbody
          - tlist.each do |t|
            %tr{data: {:torrent_id => "#{t["hash"]}"}} 
              %td.name
                #{t["name"]}
                %span.space.label.secondary.round.right
              %td.text-center.ratio      
              %td.text-center.upspeed
              %td.text-center.downspeed
              %td.text-center
                %a{href: "#", data: {:torrent_id => "#{t["hash"][0,10]}"} }
                  %i.fi-cloud
                |
                %a
                  %i.fi-trash
    %a.exit-off-canvas

%script{:src => '/js/vendor/jquery.js'}
%script{:src => '/js/foundation.min.js'}
%script{:src => '/js/notify-combined.min.js'}
%script{:src => '/js/custom.js'}
%script
  $(document).foundation();