.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