.panel.panel-default{'ng-app' => 'nestene'}
  .panel-body
    %div#tabs{role: 'tabpanel'}
      %ul.nav.nav-tabs{role: 'tablist'}
        %li.active#running_nav{role: 'presentation'}
          %a.btn.btn-default{href: "#running", 'data-toggle'=>"tab", role: 'tab'} Running Autons
        %li#create_auton_nav{role: 'presentation'}
          %a.btn.btn-default{href: "#create_auton", 'data-toggle'=>"tab", role: 'tab'} Create Auton
        %li#credentials_nav{role: 'presentation'}
          %a.btn.btn-default{href: "#credentials", 'data-toggle'=>"tab", role: 'tab'} Credentials
      %div.tab-content
        %div.tab-pane.active.fade.in#running{'ng-controller' => 'AutonsController'}
          %ul.list-group#auton_list
            %li.list-group-item{'ng-repeat' => 'autonName in autons'}
              %a.btn{'ng-href' => url('/auton/{{autonName}}')} {{autonName}}
        %div.tab-pane.fade#create_auton{'ng-controller' => 'CreateAutonFormController'}
          .panel.panel-default
            .panel-heading Create New Auton
            .panel-body
              %form{role: 'form'}
                .form-group
                  %label{for: 'auton_type'} Auton Type
                  %input#auton_type.form-control{type: 'text', placeholder: 'Type', 'ng-model' => 'autonType', 'required' => true, list: 'auton_types'}
                  %datalist#auton_types
                    %option{'ng-repeat' => 'option in auton_types', 'ng-value' => 'option'}
                %button#create.btn.btn-default{type: 'submit', 'ng-click' => 'createAuton()'}Create
        %div.tab-pane.fade#credentials{'ng-controller' => 'CredentialsController'}
          .panel.panel-default
            .panel-heading Current Credentials
            .panel-body
              .jsonView
                %json{child: "credentials", 'default-collapsed'=>"false", type: "object"}
              %button.btn.btn-default{'ng-click' => 'storeCredentials()'} Save