<!DOCTYPE html> 
<html> 
  <head> 
    <title>Deployd Dashboard</title> 
     
        <link rel='stylesheet' type="text/css" href='stylesheets/style.css' /> 
     
    <link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'> 
  </head> 
  <body> 
 
    <div id="header" class="subnav clearfix"></div> 
 
    <div id="resources-container"> 
    </div> 
    <div id="body-container" class="container-fluid hide"> 
      <div class="row-fluid"> 
        <div class="span2"> 
          <div class="well"> 
            <!-- <h3 class="clearfix"> 
              Resources  
              <a class="pull-right header-link" href="#">Edit</a>  
            </h3> -->             
            <ul class="nav nav-pills nav-stacked type-icons" id="resource-sidebar"> 
            </ul> 
 
          </div> 
        </div> 
        <div class="span10" id="body"> 
        </div> 
      </div> 
    </div> 
 
    <div class="modal" id="authModal" style="display: none"> 
    </div> 
 
    <script type="x-ejs-template" id="header-template" >
<div class="full-width-container">
  <ul class="nav nav-pills pull-left" style="margin-left: 19px;">
    <li>
      <a href="<%- appUrl %>" target="_blank"><%- appUrl %></a>
    </li>
  </ul>
  <div class="pull-right">
    <span id="save-status"></span>
    <button id="undo-btn" class="btn btn-warning"><i class="icon-exclamation-sign icon-white"></i> Undo <span class="action-label"></span></button>
  </div>
</div>
</script> 
 
    <script type="x-ejs-template" id="auth-modal-template" >
<div class="modal-header">
  <h3>Deployd Dashboard</h3>
</div>
<div class="modal-body">
  <div class="alert alert-error key-error hide">Your auth key is invalid. You can generate a new key with the <code>dpd key</code> command.</div>
  <p>Authenticate with your deployd app:</p>
  <form>
      <label>Authentication key: <textarea class="full-width" rows="6" name="key"></textarea></label>
  </form>
</div>
<div class="modal-footer">
  <a href="#" class="btn btn-primary save">Authenticate</a>
</div>
</script> 
 
    <script type="x-ejs-template" id="resources-template" >
<div id="resource-editor" class="resource-list">
  <div class="container">
      <div class="well">
        <div class="clearfix">
          <h3 class="pull-left">Resources</h3>
          <div class="btn-group pull-right">
            <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="icon-white icon-plus"></i> Resource
              &nbsp;<span class="caret"></span>
            </a>
            <ul id="property-types" class="dropdown-menu">
            </ul>
          </div>
        </div>
        <ul id="resource-list" class="component-list">
          <li class="component-item locked" id="files-resource">
            <div class="component-item-header">
              <i title="Files" class="icon-white static"></i>
                <span class="path">Files</span>
                <div class="pull-right">
                  <i class="icon-white icon-lock"></i>
                </div>
            </div>
          </li>
        </ul>
        <div id="resource-list-empty" class="component-list-empty" style="display: none;">
          <!-- <div class="alert alert-info"><strong>This app has no resources.</strong></div> -->
          <div class="get-started-light">
            <p>Your app can do more!</p>
            <p>
              <strong><i class="icon-th-list"></i> Store data</strong> - Add a <i>collection resource</i> to save and query data over a simple http api.
            </p>
            <p>
              <strong><i class="icon-user"></i> Authenticate users</strong> - Add a <i>users collection</i> resource to create and authenticate users over http.
            </p>
          </div>
          <div class="tutorial-help">
            <p>If you're new to Deployd, check out our tutorial to quickly build your first app.</p>
            <a href="http://www.deployd.com/tutorial/step1" target="_blank" class="btn btn-primary"><i class="icon-question-sign icon-white"></i> Go to Tutorial</a>
          </div>
        </div>
      </div>
  </div>
</div>
</script> 
    <script type="x-ejs-template" id="collection-template" >
<div id="model-editor">
  <div class="tab-content">
    <div id="properties" class="container tab-pane active">
      <div class="panel well stacked">
        <h3>
          Properties
        </h3>
        <div id="property-list">
        </div>
      </div>

      <div id="property-now-what" class="alert alert-info hide">
        When you're done adding properties, you should <a href="#data" class="cta-link">add some data</a> to this collection.
      </div>
    </div>
    <div id="data" class="tab-pane well stacked">
      
    </div>

    <div id="api" class="tab-pane well stacked">
            
    </div>    

    <div id="events" class="tab-pane">
      <div class="row-fluid">
      <div class="span9">
        <div id="events-panel" class="well stacked">
        </div>
              
      </div>
      <div class="span3">
        <div id="property-reference" class="well">

        </div>
    </div>          
  </div>
</div>

</script> 
    <script type="x-ejs-template" id="static-template" >
<div id="resource-editor" class="file-list">
  <div class="container">
      <div class="well">
        <div class="clearfix">
          <h3 class="pull-left">Files</h3>
          <div id="file-upload" class="pull-right">
            
            <a href="#sync-info-modal" data-toggle="modal" class="btn btn-primary"><i class="icon-white icon-resize-vertical"></i> Setup Local Sync</a>
            
          </div>
        </div>
        <div id="files-empty" data-bind="visible: !(files().length || folders().length)">
          <div class="alert alert-info"><strong>There are no files in your app.</strong> Create or upload some files to get started.</div>
          <div class="get-started" style="margin-bottom: 0;">
             <p>
               <strong><i class="icon-upload icon-white"></i> Uploading</strong> - If you've already built part of your app, you can quickly get your files online by uploading them.
             </p>
             <p>
               <strong><i class="icon-pencil icon-white"></i> Editing</strong> - You can create your entire app in the dashboard if you want. Create a file and use deployd's built-in text editor to write HTML, JavaScript, and CSS.
             </p>
             <p>
                <strong><i class="icon-download-alt icon-white"></i> Working Locally</strong> - Setup the <a href="#sync-info-modal" data-toggle="modal">deployd command line tool</a> to easily sync files to deployd from your favorite text-editor.
              </p>
          </div>
        </div>
        <div id="files" data-bind="template: 'folder-template'" class="file-list-container">
        </div>
        <a href="#" class="btn btn-success" data-bind="click: addFile"><i class="icon-plus icon-white"></i> File</a>
        <a href="#" class="btn btn-success" data-bind="click: addFolder"><i class="icon-plus icon-white"></i> Folder</a>
        <span class="fileinput-button btn btn-primary">
          <i class="icon-upload icon-white" title="Upload"></i>
          Upload
          <input type="file" multiple="multiple" data-bind="event: {change: onChangeUpload}" />
        </spab>
        <span id="currentUploads" data-bind="text: uploadingText"></span>
      </div>
    </div>
  </div>
</div>

<div id="sync-info-modal" class="hide modal" style="margin-top: -280px">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Setup Local Sync</h3>
  </div>
  <div class="modal-body">
		<p>To sync your app's files with your local filesystem, first install the <code>dpd</code> command line utility. <em>It requires <a href="http://nodejs.org/#download">Node.js</a>.</em></p>

		<p>Run the following commands from the command line to install the utility and setup your app.</p>

		<pre><code>npm install deployd -g</code></pre>

		<p>To copy down all your apps resources and files run the following command. It will create a folder for you.</p>

		<pre><code>dpd clone <%= window.location.host %></code></pre>

		<p id="scroll_to_here" >Now you can push and pull the entire contents of the directory with the following commands.</p>

		<pre><code>dpd push</code></pre>

		<p>Running <code>dpd push</code> will upload all resources and the contents of your current directory to your app.</p>

		<pre><code>dpd pull</code></pre>

		<p>Running <code>dpd pull</code> will download all of your app's files into the current directory as well as download all the resources from the remote server.</p>
  </div>
  <div class="modal-footer">

  </div>
</div>

<script type="text/html" id="folder-template">
  <div class="add-buttons">
    <a href="#" data-bind="click: addFile"><i class="icon-plus"></i> File</a>
    &nbsp;
    <a href="#" data-bind="click: addFolder"><i class="icon-plus"></i> Folder</a>
    &nbsp;
    <a class="fileinput-button">
      <i class="icon-upload" title="Upload"></i>
      Upload
      <input type="file" multiple="multiple" data-bind="event: {change: onChangeUpload}" />
    </a>
    <span id="currentUploads" data-bind="text: uploadingText"></span>
  </div>
  <ul class="file-list">
    <!-- ko foreach: folders -->
      <li class="folder" data-bind="click: $parent.onClickFolder">
        <i class="icon-folder-close" data-bind="css: {'icon-folder-close': !isOpen(), 'icon-folder-open': isOpen}"></i>
        <span data-bind="text: name"></span>
        <div class="buttons">
          <a href="#" class="btn" data-bind="click: $parent.deleteFolder"><i class="icon-remove"></i> Delete</a>
        </div>
      </li>
      <li class="file-list-container" data-bind="template: {name: 'folder-template', data: viewModel}, visible: isOpen">
      </li>
    <!-- /ko -->
    <!-- ko foreach: files -->
    <li class="file" data-bind="click: $parent.onClickFile">
      <i class="icon-file"></i>
      <span data-bind="text: $data"></span>
      <div class="buttons">
        <a href="#" target="_blank" class="btn" data-bind="attr: {href: '/' + $parent.getPath($data)}, clickBubble: false"><i class="icon-eye-open"></i> View</a>
        <a href="#" class="btn" data-bind="click: $parent.deleteFile"><i class="icon-remove"></i> Delete</a>
      </div>
    </li>
    <!-- /ko -->
  </ul>
</script>
</script> 
    <script type="x-ejs-template" id="file-template" >
<tr class="component-item">
  <td>
    <i class="icon-file"></i>
    <a href="#edit<%= path %>"><%= filename %></a>
  </td>
  <td style="width: 149px;">
    <a class="view btn" href="<%= path %>"  target="_blank"><i class="icon-eye-open"></i> View</a>
    <a class="delete btn" href="#" filename="<%= filename %>"><i class="icon-remove"></i> Delete</a>
  </td>
</tr>
</script> 
    <script type="x-ejs-template" id="file-editor-template" >
<div class="well">
  <div id="file-nav" class="clearfix">
    <button class="pull-left btn back"><i class="icon-folder-open"></i> Back</button>
    <div class="pull-left" id="file-status"></div>
    <button id="save-btn" class="pull-right btn btn-success">Save</button>
  </div>
  <div class="editor-container">
    <div id="editor"></div>
  </div>
</div>

</script> 
     
    <script type="x-ejs-template" id="resource-types-template" >
<% types.each(function(typeModel) { var type = typeModel.toJSON() %>
   <li class="type-icons" data-cid="<%- typeModel.cid %>" rel="popover" data-content="<%= type.tooltip %>" data-original-title="<%- type.tooltipTitle %>">
    <a href="#">
      <i class="<%= type.label.toLowerCase().replace(' ', '-') %> icon-hack"></i>
      <%- type.label %>
    </a>
   </li>
<% }); %>
</script> 
    <script type="x-ejs-template" id="resource-sidebar-template" >
<li>
  <a href="#">Resources</a>
</li>
<li <%= app.files ? 'class="active"' : '' %>>
  <a href="#files">
    <i class="<%= app.files ? 'icon-white' : 'icon-hack' %> static"></i>&nbsp;
    Files
  </a>
</li>
<% collection.each(function(resourceModel) { var resource = resourceModel.toJSON(); %>
  <li class="<%= resource._id === app.resourceId ? 'active' : '' %>" >
    <a href="#<%= resource._id %>">
      <i class="<%= resource._id === app.resourceId ? 'icon-white' : 'icon-hack' %> <%- resource.type.toLowerCase() %>"></i>&nbsp;
      <%- resource.path %>
    </a>
    <% if (resource._id === app.resourceId && (resource.type === 'Collection' || resource.type === 'UserCollection')) { %>
      <ul class="nav nav-tabs nav-stacked nav-sublist">
        <li class="active"><a href="#properties" data-toggle="tab">Properties</a></li>
        <li><a href="#data" data-toggle="tab">Data</a></li>
        <li><a href="#api" data-toggle="tab">API</a></li>
        <li><a href="#events" data-toggle="tab">Events</a></li> 
      </ul>
    <% } %>
  </li>
<% }); %>
</script> 
    <script type="x-ejs-template" id="resource-template" >
<div class="component-item-header">
  <i title="<%= resource.typeLabel %>" class="type-icon icon-white <%= resource.typeLabel.toLowerCase().replace(' ', '-') %>"></i>
  <% if (resource.c_active) { %>
    <input style="margin-left: 3px; width: 225px;" type="text" class="code" name="path" value="<%- resource.path %>" />
    <a style="margin-right: 3px;" href="#" class="btn btn-primary save-btn">save</a>
    <a href="#" class="btn cancel-btn">cancel</a>
  <% } else { %>
    <span class="code path"><%- resource.path %></span>
    <div class="pull-right">
      <i class="icon-white icon-remove delete-btn"></i>
    </div>
  <% } %>
  <div class="tags pull-right">
    <!-- <span class="label label-info type"><%- resource.typeLabel %></span> -->
  </div>
</div>
</script> 
 
    <script type="x-ejs-template" id="collection-routes-template" >
<h3>API</h3>

<div class="alert alert-info" style="width: 456px; padding-right: 15px;">Use these routes in your app to save and load data from this Collection.</div>
<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Task</th>
      <th>Method</th>
      <th>Route</th>
      <th>Accepts</th>
      <th>Returns</th>
    </tr>
    <tbody>
      <tr>
        <td><a href="http://deployd.github.com/deployd/#Listing-data" target="_blank">Listing data</a></td>
        <td>GET</td>
        <td><a href="<%- path %>" target="_blank"><%- path %></a></td>
        <td><em>Nothing</em></td>
        <td>An array of objects</td>
      </tr>
      <tr>
        <td><a href="http://deployd.github.com/deployd/#Saving-data" target="_blank">Creating an object</a></td>
        <td>POST</td>
        <td><%- path %></td>
        <td>A single object</td>
        <td>The saved object (or errors)</td>
      </tr>
      <tr>
        <td><a href="http://deployd.github.com/deployd/#Retrieving-a-specific-object" target="_blank">Getting an object</a></td>
        <td>GET</td>
        <td><%- path %>/&lt;_id&gt;</td>
        <td><em>Nothing</em></td>
        <td>A single object</td>
      </tr>
      <tr>
        <td><a href="http://deployd.github.com/deployd/#Updating-an-object" target="_blank">Updating an object</a></td>
        <td>PUT</td>
        <td><%- path %>/&lt;_id&gt;</td>
        <td>A single object</td>
        <td>The saved object (or errors)</td>
      </tr>
      <tr>
        <td><a href="http://deployd.github.com/deployd/#Deleting-an-object" target="_blank">Deleting an object</a></td>
        <td>DELETE</td>
        <td><%- path %>/&lt;_id&gt;</td>
        <td>A single object</td>
        <td><em>Nothing</em></td>
      </tr>
      <% if (type === 'UserCollection') { %>
        <tr>
          <td><a href="http://deployd.github.com/deployd/#Authenticating-a-user" target="_blank">Logging in</a></td>
          <td>POST</td>
          <td><%- path %>/login</td>
          <td><code>email</code> and <code>password</code> of user</td>
          <td>The user, plus session cookie (or error)</td>
        </tr>
        <tr>
          <td><a href="http://deployd.github.com/deployd/#Logging-out" target="_blank">Logging out</a></td>
          <td>POST</td>
          <td><%- path %>/logout</td>
          <td><em>Nothing</em></td>
          <td><em>Nothing</em></td>
        </tr>
        <tr>
          <td><a href="http://deployd.github.com/deployd/#Current-user" target="_blank">Getting the current user</a></td>
          <td>GET</td>
          <td><a href="<%- path %>/me" target="_blank"><%- path %>/me</a></td>
          <td><em>Nothing</em></td>
          <td>A single object</td>
        </tr>
      <% } %>
    </tbody>
  </thead>
</table>
</script> 
    <script type="x-ejs-template" id="collection-data-template" >
<h3>Data</h3>
<div id="current-data">
  <div class="table-container">
    <table class="table table-bordered table-striped">
      <thead class="type-icons">
        <tr>
        <td class="code">
          <i class="icon-hack string" data-bind="tooltip: 'string'"></i>
          _id
        </td>
        <!-- ko foreach: properties -->
          <td class="code">
            <i class="icon-hack" data-bind="tooltip: typeLabel, cssNamed: type"></i>
            <span data-bind="text: name"></span>
          </td>
        <!-- /ko -->
          <td></td>
        </tr>
        <tbody data-bind="foreach: collection">
          <tr>
            <td data-bind="text: _id"></td>
            <!-- ko foreach: $root.properties -->
            <td data-bind="event: {dblclick: $parent._onDoubleclick}">
              <span data-bind="text: $parent.c_formatted(name(), type()), visible: !$parent.c_editing()"></span>
              <div data-bind="visible: $parent.c_editing, template: 'data-cell-edit-template'"></div>
            </td>
            <!-- /ko -->
            <td>
              <a href="#" class="btn" data-bind="click: c_toggleEditing, visible: !c_editing()"><i class="icon-edit"></i> edit</a>
              <a href="#" class="btn" data-bind="click: $root.deleteRow, visible: !c_editing()"><i class="icon-remove-sign"></i> delete</a>

              <a href="#" class="btn btn-primary" data-bind="click: $root.saveRow, visible: c_editing"><i class="icon-white icon-ok-sign"></i> done</a>
              <a href="#" class="btn" data-bind="click: c_toggleEditing, visible: c_editing">cancel</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr data-bind="visible: !collection().length">
            <td data-bind="attr: {colspan: properties().length + 2}">
              <div class="alert alert-info" style="margin: 40px auto; width: 120px;">This collection is empty.</div>
            </td>
            
          </tr>
          <tr data-bind="with: newRow">
            <td>...</td>
            <!-- ko foreach: $root.properties -->
              <td>
                <div data-bind="template: 'data-cell-edit-template'"></div>
              </td>
            <!-- /ko -->
            <td>
              <a href="#" class="btn btn-success" data-bind="click: $root.saveRow"><i class="icon-white icon-plus"></i> Add</a>
            </td>
          </tr>
        </tfoot>
    </table>
  </div>
  <input id="current-data-querystring" data-bind="value: queryString, valueUpdate: 'afterkeydown', tooltip: {placement: 'left', title: queryError, trigger: 'focus'}" type="text" placeholder="Query string" />
</div>

<script type="text/html" id="data-cell-edit-template">
  <i class="icon-warning-sign" data-bind="tooltip: {title: $parent.c_errors()[name()]}, visible: $parent.c_errors()[name()]"></i>
  <!-- ko if: type() === 'string' --> <input type="text" data-bind="value: $parent[name()], hasfocus: $parent.c_focus() === name(), event: {keydown: $parent._onKeypress}", /> <!-- /ko -->
  <!-- ko if: type() === 'boolean' --> <input type="checkbox" data-bind="checked: $parent[name()]" /> <!-- /ko -->
  <!-- ko if: type() === 'date' --> <input type="datetime" data-bind="value: $parent[name()], hasfocus: $parent.c_focus() === name(), event: {keydown: $parent._onKeypress}" /> <!-- /ko -->
  <!-- ko if: type() === 'number' --> <input type="number" data-bind="value: $parent[name()], hasfocus: $parent.c_focus() === name(), event: {keydown: $parent._onKeypress}" /> <!-- /ko -->
  <!-- ko if: type() === 'password' --> <input type="password" placeholder="*******" data-bind="value: $parent[name()], hasfocus: $parent.c_focus() === name(), event: {keydown: $parent._onKeypress}" /> <!-- /ko -->
</script>
</script> 
 
    <script type="x-ejs-template" id="property-list-template" >
<% isUsers = typeof resourceTypeId !== 'undefined' && resourceTypeId === 'UserCollection'; %>
<ul class="component-list">
  <li class="component-item locked"><div class="component-item-header">
    <i class="icon-white string" data-bind="tooltip: {placement: 'left', title: 'string'}"></i>
    <span class="code name">_id</span>
    <div class="pull-right">
      <i class="icon-white icon-lock" title="Locked"></i>
    </div>
  </div></li>
  <% if(isUsers) { %>
  <li class="component-item locked"><div class="component-item-header">
    <i class="icon-white string" data-bind="tooltip: {placement: 'left', title: 'string'}"></i>
    <span class="code name">email</span>
    <div class="pull-right">
      <i class="icon-white icon-lock" title="Locked"></i>
    </div>
  </div></li>
  <li class="component-item"><div class="component-item-header">
    <i class="icon-white string" data-bind="tooltip: {placement: 'left', title: 'string'}"></i>
    <span class="code name">password</span>
    <div class="pull-right">
      <i class="icon-white icon-lock" title="Locked"></i>
    </div>
  </div></li>
  <% } %>
  <!-- ko foreach: properties -->
    <li class="component-item" data-bind="css: {active: editing}"><div class="component-item-header clearfix" data-bind="click: onClickHeader">
      <div data-bind="template: 'property-single-template', visible: editing"></div>
      <div data-bind="visible: !editing()">
        <i class="icon-white" data-bind="tooltip: {placement: 'left', title: typeLabel}, cssNamed: type"></i>
        <span class="code name" data-bind="text: name, click: toggleEditing"></span>
        <span class="label" data-bind="visible: optional">optional</span>
        <div class="pull-right">
          <a href="#" data-bind="click: $root.removeProperty"><i class="icon-white icon-remove"></i></a>
        </div>
      </div>
    </div></li>
  <!-- /ko -->
  <div class="placeholder component-item-header">
    <div data-bind="visible: !properties().length">
      <div class="get-started" style="margin-top: 0;">
        <% if(isUsers) { %>
          <p>
            <strong><i class="icon-user icon-white"></i> Users</strong> - Add properties unique to the users you want to store in this collection. Users have email and password properties by default. These are required to login a user.
          </p>
        <% } else { %>
          <p>
            <strong><i class="icon-list icon-white"></i> Properties</strong> - Describe the JSON objects you want to store in your collection by adding properties and setting their type.
          </p>
        <% } %>
        <p>
          <strong><i class="icon-ban-circle icon-white"></i> Validation</strong> - By describing the data you expect in your collection you enable deployd to automatically validate new objects.
        </p>
      </div>
      <div class="alert alert-info">
        <strong>Get started</strong> by adding properties to describe the <strong><%= isUsers ? 'users' : 'data' %></strong> you want to store in this collection.
      </div>
    </div>
    <div data-bind="template: {name: 'property-single-template', data: newProperty}"></div>
  </div>
</ul>

<script type="text/html" id="property-single-template">
  <div class="btn-group pull-left type-selector">
    <a class="btn dropdown-toggle" href="#" data-bind="tooltip: {placement: 'left', title: typeLabel()}" data-toggle="dropdown">
      <i class="icon-hack" data-bind="cssNamed: type()"></i>
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" data-bind="foreach: $root.propertyTypes">
      <li data-bind="css: {active: $parent.type() == _id()}, popover: {placement: 'right', title: label, content: tooltip}">
        <a href="#" data-bind="click: $parent.setType">
          <i class="icon-hack" data-bind="cssNamed: _id"></i>&nbsp;
          <span data-bind="text:label"></span></a>
      </li>
    </ul>
  </div>
  <input type="text" placeholder="myPropertyName" data-bind="value: name, hasfocus: nameFocus, event: { keypress: onNameKeypress }" />
  <button class="btn" data-bind="click: toggleEditing, clickBubble: false, visible: !isNew">done</button>
  <div class="pull-right">
    <label data-bind="if: type() !== 'boolean'" class="checkbox pull-left"><input type="checkbox" data-bind="checked: optional" />Optional</label>
    <a href="#" class="delete-btn" data-bind="click: $root.removeProperty, visible: !isNew"><i class="icon-white icon-remove"></i></a>
    <button class="btn btn-success" data-bind="click: $root.addProperty, visible: isNew"><i class="icon-white icon-plus"></i>&nbsp;Add</button>
  </div>
</script>

</script> 
    <script type="x-ejs-template" id="property-reference-template" >
<h3>Properties</h3>
<ul class="component-list">
  <li class="component-item locked">
    <div class="component-item-header">
      <i class="icon-white string" title="string"></i>&nbsp;
      <span class="code">_id</span>
    </div>
  </li>
  <% if (model.get('type') == 'UserCollction') { %>
  <li class="component-item locked">
    <div class="component-item-header">
      <i class="icon-white string" title="string"></i>&nbsp;
      <span class="code">email</span>
    </div>
  </li>
  <li class="component-item locked">
    <div class="component-item-header">
      <i class="icon-white string" title="string"></i>&nbsp;
      <span class="code">password</span>
    </div>
  </li>
  <% } %>
  <% model.get('properties').forEach(function(propModel) { var prop = propModel.toJSON();  %>
    <li class="component-item locked">
      <div class="component-item-header">
        <i class="icon-white <%- prop.type %>" title="<%- prop.typeLabel %>"></i>&nbsp;
        <span class="code"><%- prop.name %></span>
      </div>
    </li>
  <% }) %>
</ul>

     
</script> 
    <script type="x-ejs-template" id="property-template" >
<div class="header <%= property.c_active ? 'active' : '' %>">
  <i class="<%- property.typeLabel %> icon-white"></i>
  <% if (property.c_active) { %>
    <input type="text" class="code" name="name" value="<%- property.name %>" />
  <% } else { %>
    <span class="code name"><%- property.name %></span>
  <% } %>
 	<a href="#" class="pull-right delete-btn"><i class="icon-remove icon-white"></i></a>
  <div class="tags pull-right">
  	<% if (property.optional) { %>
  		<span class="label optional">Optional</span>
  	<% } %>
  </div>
</div>
<% if (property.c_active) { %>
  <div class="detail form-inline">
    <% if (property.type !== 'boolean') { %>
    <label>Optional <input type="checkbox" name='optional' <%= property.optional ? 'checked="checked"' : '' %> /></label>
    <% } %>
  </div>
<% } %>
</script> 
    <script type="x-ejs-template" id="events-template" >

<h3 class="clearfix">
  Events 
  <a class="pull-right header-link" target="_blank" href="http://deployd.github.com/deployd/#Collection-Event-Handlers">Documentation</a> 
</h3>
  
<ul class="nav nav-tabs" id="event-nav">
  <li><a href="#get-panel" data-toggle='tab' data-editor="onGet">On GET</a></li>
  <li class="active"><a href="#validate-panel" data-toggle='tab' data-editor="onValidate">On Validate</a></li>
  <li><a href="#post-panel" data-toggle='tab' data-editor="onPost">On POST</a></li>
  <li><a href="#put-panel" data-toggle='tab' data-editor="onPut">On PUT</a></li>
  <li><a href="#delete-panel" data-toggle='tab' data-editor="onDelete">On DELETE</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane" id="get-panel">
    <div class="editor-container">
      <div id="onGet"></div>
    </div>
  </div>
  <div class="tab-pane active" id="validate-panel">
    <div class="editor-container">
      <div id="onValidate"></div>
    </div>
  </div>
  <div class="tab-pane" id="post-panel">
    <div class="editor-container">
      <div id="onPost"></div>
    </div>
  </div>
  <div class="tab-pane" id="put-panel">
    <div class="editor-container">
      <div id="onPut"></div>
    </div>
  </div>
  <div class="tab-pane" id="delete-panel">
    <div class="editor-container">
      <div id="onDelete"></div>
    </div>
  </div>
</div>
</script> 
 
    <script type="text/javascript" src="js/lib/jquery-1.7.2.js"></script> 
    <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="js/lib/jquery.plugins.js"></script> 
    <script type="text/javascript" src="js/lib/bootstrap.js"></script> 
    <script type="text/javascript" src="js/lib/underscore.js"></script> 
    <script type="text/javascript" src="js/lib/underscore.string.min.js"></script> 
    <script type="text/javascript" src="js/lib/backbone.js"></script> 
    <script type="text/javascript" src="js/lib/knockout-2.0.0.js"></script> 
    <script type="text/javascript" src="js/lib/knockout.mapping.js"></script> 
    <script type="text/javascript" src="js/lib/ace-noconflict.js"></script> 
    <script type="text/javascript" src="js/lib/ace-mode-javascript-noconflict.js"></script> 
    <script type="text/javascript" src="js/lib/ace-mode-css-noconflict.js"></script> 
    <script type="text/javascript" src="js/lib/ace-mode-html-noconflict.js"></script> 
 
    <script src="js/lib/require.js" data-main="js/app/entry.js"></script> 
  </body> 
</html>