extends layout

block head
  script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js")
  script(src=Hop.hopjsURL)
  script(src=Hop.apiURL)
  style.
    .error {
      color: red;
    }
block content
  a(href=Hop.docURL) Documentation about the API
  p.
    You an also use the API you've defined in your own JavaScript applications! 
    Simply open the JavaScript console in your browser and type:
  div
    pre.
      //First lets create a user
      UserService.create({ name: "user", password:"password", email:"email@email.com" },function(err,user){
         UserService.authenticate(user,function(err,user){
           console.log("Authenticated:"user);
         });
      });
  div
    form#createUser
      fieldset
        span.flash
        legend User
        label.nameStatus Name
        input(type="text",name="name",placeholder="Name")
        span.nameErr
        br
        label Password
        input(type="text",name="password",placeholder="Password")
        br
        label Email
        input(type="text",name="email",placeholder="Email")
        br
        label.favoriteColorStatus.favoriteColorStatus Favorite Color
        input(type="text",name="favoriteColor",placeholder="Favorite color")
        span.favoriteColorErr
        br
        button(type="submit") Create
  script.
    $(document).ready(function(){
      $("#createUser").submit(function(){
        UserService.create.fromForm("#createUser",function(err,res){
          console.log(err,res);
        });
        return false;
      })
    });