.models_navigation

  %form{:name => "nav", :action => url_for('/models'), :method => "get", :id => "nav"}
    %input{:type => :hidden, :name => :sort_by, :id => "sort_by", :value => params[:sort_by]}
    %input{:type => :hidden, :name => :order, :id => "order", :value => params[:order]}
    %input{:type => :hidden, :name => :page, :id => "page", :value => params[:page]}

    Sort by:
    - ["created_at","name","type"].each do |s|
      - idname = s == "created_at" ? "date" : s
      - if params[:sort_by] == s
        %div{:id => idname, :class => "active"}
          %span="#{idname.capitalize}"
          - if params[:order] == "ASC"
            #up{:class => "link"}
              %img{:src => "arrow_down.png", :alt => 'in ascending order', :title => 'in ascending order'}/
          - else
            #down{:class => "link"}
              %img{:src => "arrow_up.png", :alt => 'in descending order', :title => 'in descending order'}/
      - else
        %div{:id => idname, :class => "link"}="#{idname.capitalize} "
    - if @models.size > 5
      |
      Models:
      = "#{@models.size}"
      - unless @page.to_i == 0
        #prev
          %img{:src => "arrow_left.png", :alt => 'previous', :title => 'previous'}/
      -else
        %img{:src => "arrow_left_inactive.png", :alt => '', :title => ''}/
  
      - if @models.size < 5*@page+5
        - last = @models.size
      - else
        - last = 5*@page+5
  
      = "(#{5*@page+1}-#{last}/#{@models.size})"
      - unless 5*@page.to_i+5 >= @models.size
        #next
          %img{:src => "arrow_right.png", :alt => 'next', :title => 'next'}/
      -else
        %img{:src => "arrow_right_inactive.png", :alt => '', :title => ''}/

    - js = ""
    - ["id","created_at","name","type"].each do |s|
      - idname = s == "created_at" ? "date" : s
      - js += "$('##{idname}').click(function() \{ \n "
      - js += "  $('#sort_by').val('#{s}');\n "
      - js += "  $('#nav').submit();\n "
      - js += "});\n "

    :javascript
      $("#prev").click(function() {
        $("#page").val(#{@page-1});
        $("#nav").submit();
      });
      $("#next").click(function() {
        $("#page").val(#{@page+1});
        $("#nav").submit();
      });
      #{js}
      $("#down").click(function() {
        $("#order").val("ASC");
        $("#nav").submit();
      });
      $("#up").click(function() {
        $("#order").val("DESC");
        $("#nav").submit();
      });