!!! 5
%html
  %head
    %meta(charset="utf-8")
    %title Symbiote

    %script(src="js/lib/jquery.min.js")
    %script(src="js/lib/jquery-ui.min.js")
    %script(src="js/lib/jquery.treeview.js")
    %script(src="js/lib/coffee-script.js")
    %script(src="js/lib/raphael.js")
    %script(src="js/lib/underscore.js")
    %script(src="js/lib/backbone.js")
    %script(src="js/lib/json2.js")

    %script(data-main="/js/main" src="js/lib/require.js")

    %link(href="reset.css" rel="stylesheet")
    %link(href="pictos/pictos.css" rel="stylesheet")
    %link(href="jquery.treeview.css" rel="stylesheet")
    %link(href="symbiote.css" rel="stylesheet")

  %body
    %header#header
      %h1 symbiote
      .toast
      #refresh
        %button#dump_button
          %span

    %section.symbiote_shell
      %article#selector-test
        %label.selector-engine-label
          use →
        .selector-engine.dropdown

        %label
        to select views that match →
        %input#query(placeholder="Selector label marked:'Search'")

        %label
          and then →
        .action-buttons.dropdown

    %section.the-columns
      #list-tabs
        %ul
          %li
            %a(href="#dom-dump") View Heirarchy
          %li
            %a(href="#accessible-views-tab") Accessible Elements
        #dom-dump
          %ul
        #accessible-views-tab
          %div.hints
            %p Here is a list of all elements with accessibility labels.
            %p Clicking on a row will flash that view element in the simulator. Hover over a row to see the selector used to flash that view element.
          #accessible-views

      #inspect-tabs
        %ul
          %li
            %a(href="#dom-detail") View Properties
          %li
            %a(href="#ui-locator") View Locator
        #ui-locator 
          #live-view
            %button 
              Live
              %span Y
          #asploder
            %button
              Asplode
          %button#ui-locator-rotator 1
          #ui-locator-view

        #dom-detail
          %p Click an element in the view heirarchy on the right to see details of that element here.