-# coding: utf-8
.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
              %span.disk-info 
                %span.disk-bar
                  %span.inner-bar
                %span.text-info
          %li.divider
          %li.has-form
            %a.button.radius.success
              %i.fi-arrow-up
              %strong#up-info
          %li.divider
          %li.has-form
            %a.button.radius
              %i.fi-arrow-down
              %strong#down-info
        %ul.left
          %li
            %a.button.radius.alert{href: "", data:{reveal_id: "addModal"}} Add
  %section.main-section{style: "margin: 60px 20px 0 20px"}
    %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.share-torrent{data: {:torrent_id => "#{t["hash"][0,10]}"} }
                %i.fi-cloud
              |
              %a.del-torrent{data: {:torrent_id => "#{t["hash"][0,10]}"} }
                %i.fi-trash

#addModal.reveal-modal.medium{"data-reveal" => ""}
  %h2 Add a torrent
  %dl.sub-nav{"data-tab" => ""}
    %dd.active
      %a{href: "#panel-link"} Link
    %dd
      %a{href: "#panel-file"} File
    %dd
      %a{href: "#panel-search"} Search Engine
  .tabs-content
    #panel-link.content.active{style: "width: 100%;"}
      %form#form-add-link{data: {:abide => ""}, action: "/add/link"}
        .row
          .large-12.columns
            %input{type: "text", name: "link", required: "", pattern: "url", placeholder: "Link to .torrent (http, https, ftp and magnet)"}
            %small.error URL not valid !
      .panel.radius
        %p HTTP, HTTPS, FTP and Magnet are natively supported by rTorrent.
        %p For the moment we use the native feature of rTorrent.
        %p rTorrent doesn't support self-signed cert (for HTTPS).
        %p To use Magnet link be sure DHT is activated in your .rtorrent.rc
    #panel-file.content
      .row
        #dropbox.large-12.columns
          Drag and drop files ! ...or juste click here.
        #log
    #panel-search.content
      %form#search-engine{action: "/"}
        .row
          .large-12.columns
            %input{type: "text", placeholder: "Search for a torrent :)"}
      #search-results
  %a.close-reveal-modal ×

#shareModal.reveal-modal.small{"data-reveal" => ""}
  %h3 Share your download !
  %p Here is the public link for :
  %strong.share-torrent-name.text-center torrent-name-here
  %input.share-torrent-link{type: "text", value: "torrent-public-link-here"}
  %a.close-reveal-modal ×

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