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

    %script(src="jquery.min.js")
    %script(src="jquery-ui.min.js")
    %script(src="raphael-min.js")
    %script(src="jquery.treeview.js")
    %script(src="json2.js")
    %script(src="underscore.js")
    %script(src="symbiote.js")
    %link(href="jquery-ui.css" rel="stylesheet")
    %link(href="jquery.treeview.css" rel="stylesheet")
    %link(href="symbiote.css" rel="stylesheet")

  %body
    #header
      #main-tab-1
        %h1 symbiote
        %i From here you can inspect the current state of the app's UI, and test which UI elements a selector will select

    %div
      %table.symbiote_shell
        %tr.ui-widget
          %td
            #selector-test
              %label(for="query") Selector
              %input#query(placeholder="label marked:'Search'")
              %button#flash_button Flash
              %input#selector_engine(placeholder="uiquery")
          %td
            #refresh
              %img#loading(src="images/ajax-loader.gif")
              %button#dump_button Refresh
        %tr
          %td
            #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
          %td
            #inspect-tabs
              %ul
                %li
                  %a(href="#dom_detail") View Properties
                %li
                  %a(href="#ui-locator") View Locator
              #ui-locator 
                #ui-locator-view
                #live-view
                  %button start Live View
                  
              #dom_detail
                %p Click an element in the view heirarchy on the right to see details of that element here.