%html

%head
  %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
  %link{ rel: 'stylesheet', type: 'text/css', href: '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css' }
  %link{ rel: 'stylesheet', type: 'text/css', href: url('/stylesheets/graffable.css') }
  %title= @title ? "Metrics - #{ @title }" : 'Metrics'
%body
  %script{ type: 'text/javascript', src: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js' }
  %script{ type: 'text/javascript', src: '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js' }
  %script{ type: 'text/javascript', src: '//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js' }
  %script{ type: 'text/javascript', src: '//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.categories.min.js' }
  %script{ type: 'text/javascript', src: '//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.stack.min.js' }
  %script{ type: 'text/javascript', src: url('/javascript/jquery.flot.tooltip.min-0.6.6.js') }

  %nav.navbar.navbar-default{ role: 'navigation' }
    .navbar-header
      %button.navbar-toggle{ type: 'button', 'data-toggle' => 'collapse', 'data-target' => '#bs-example-navbar-collapse-1' }
        %span.sr-only{} Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.navbar-brand{ href: url('/') } Metrics

    .collapse.navbar-collapse{ id: 'bs-example-navbar-collapse-1' }
      %ul.nav.navbar-nav
        %li.dropdown
          %a.dropdown-toggle{ href: '#', 'data-toggle' => 'dropdown' }
            = @group ? @group[:description] : 'Report Group'
            %b.caret
          %ul.dropdown-menu
            - @groups.each do |g|
              %li
                %a{ href: url("/#{ g[:name] }") }= g[:description]
        - if @group && @reports
          %li.dropdown
            %a.dropdown-toggle{ href: '#', 'data-toggle' => 'dropdown' }
              = @report ? @report[:description] : 'Reports'
              %b.caret
            %ul.dropdown-menu
              - @reports.each do |r|
                %li
                  %a{ href: url("/#{ @group[:name] }/#{ r[:name] }") }= r[:description]
        - if @group && @reports && @report
          %li.dropdown
            %a.dropdown-toggle{ href: '#', 'data-toggle' => 'dropdown' }
              = @interval || 'Interval'
              %b.caret
            %ul.dropdown-menu
              -# TODO Helper(s)!
              - url   = "/#{ @group[:name] }/#{ @report[:name] }"
              - year  = Time.now.year
              - month = Time.now.strftime("%m")
              - day   = DateTime.now.strftime("%d")
              %li
                %a{ href: url(url) } Recent
              %li
                %a{ href: url("#{url}/#{year}") }= year
              %li
                %a{ href: url("#{url}/#{year}/#{month}") }= "#{year}-#{month}"
              %li
                %a{ href: url("#{url}/#{year}/#{month}/#{day}") }= "#{year}-#{month}-#{day}"

  .container
    .flash
      =styled_flash
    = yield