---
layout : 'default'
css    : 'playground'

title  : 'Playground'
type   : 'Library'
---
<% uiElements        = @getCollection("documents").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %>
<% uiCollections     = @getCollection("documents").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %>
<% uiModules         = @getCollection("documents").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %>
<% uiViews           = @getCollection("documents").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %>
<script src="/javascript/library/zencoding.js"></script>
<script src="/javascript/library/handlebars.js"></script>
<script src="/build/uncompressed/definitions/modules/dropdown.js"></script>
<script src="/build/uncompressed/definitions/behaviors/api.js"></script>
<script src="/javascript/playground.js"></script>

<div class="ui page grid center aligned title">
  <div class="ten wide column">
    <h1 class="ui dividing header">
      <i class="icon circular lab"></i> Playground
    </h1>
  </div>
</div>
<div class="ui page grid">
  <div class="ui three wide column">
    <div class="ui fluid vertical ui element menu">
      <div class="header item">Choose UI</div>
      <div class="item">
        <form class="ui form">
          <div class="field">
            <label>Elements</label>
            <div class="ui fluid dropdown selection">
              <input type="hidden" name="element">
              <i class="icon dropdown"></i>
              <div class="text">Button</div>
              <div class="menu">
                <% for element in uiElements: %>
                  <div data-value="<%= element.title.toLowerCase() %>" class="item">
                    <%= element.title %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
          <div class="field">
            <label>Collections</label>
            <div class="ui fluid dropdown selection">
              <input type="hidden" name="collection">
              <i class="icon dropdown"></i>
              <div class="text">---</div>
              <div class="menu">
                <% for element in uiCollections: %>
                  <div data-value="<%= element.title.toLowerCase() %>" class="item">
                    <%= element.title %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
          <div class="field">
            <label>Modules</label>
            <div class="ui fluid dropdown selection">
              <input type="hidden" name="module">
              <i class="icon dropdown"></i>
              <div class="text">---</div>
              <div class="menu">
                <% for element in uiModules: %>
                  <div data-value="<%= element.title.toLowerCase() %>" class="item">
                    <%= element.title %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
          <div class="field">
            <label>Views</label>
            <div class="ui fluid dropdown selection">
              <input type="hidden" name="view">
              <i class="icon dropdown"></i>
              <div class="text">---</div>
              <div class="menu">
                <% for element in uiViews: %>
                  <div data-value="<%= element.title.toLowerCase() %>" class="item">
                    <%= element.title %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="type menu">
        <div class="header item">Types</div>
        <div class="type item">
          <form class="ui form">
          </form>
        </div>
      </div>
      <div class="variation menu">
        <div class="header item">Variations</div>
        <div class="variation item">
          <form class="ui form">
          </form>
        </div>
      </div>
      <div class="item">
        <div class="ui large red fluid add button"><i class="icon add"></i>Add</div>
      </div>
    </div>
  </div>
  <div class="ui ten wide default page column">
    <div class="ui raised segment">
      <div class="ui large message warning">
        <div class="header"><i class="icon empty heart"></i> No Designs Yet!</div>
        Add an element to the left to begin
      </div>
    </div>
  </div>
  <div class="three wide column">

  <div class="ui purple segment">
    <div class="ui small dividing header">Preview</div>
    <div class="ui secondary preview segment">
    </div>
  </div>
  <div class="ui blue segment">
    <div class="ui small dividing header">Text</div>
    <div class="ui form">
      <div class="field">
        <textarea class="text"></textarea>
      </div>
      <div class="ui fluid blue button">Update Text</div>
    </div>
  </div>
  <div class="ui green segment">
    <div class="ui small dividing header">View</div>
    <div class="ui two fluid secondary view buttons">
      <div class="ui active preview button">Preview</div>
      <div class="ui html button">Code</div>
    </div>
    <div class="ui small dividing header">Finish Up</div>
    <div class="ui positive secondary fluid download button">Download</div>
  </div>
</div>
</body>

<script class="checkbox" type="text/x-handlebars-template">
<div class="inline field">
  <div class="ui checkbox">
    <input type="checkbox" name="{{name}}" value="{{value}}" />
    <div class="box"></div>
  </div>
  {{#if name}}
  <label>{{name}}</label>
  {{else}}
  <label>{{uppercase value}}</label>
  {{/if}}
</div>
</script>


<script class="select" type="text/x-handlebars-template">
<div class="field">
  <label>{{name}}</label>
  <div class="ui fluid dropdown {{value}} selection">
    <input type="hidden" name="{{name}}" value="none">
    <i class="icon dropdown"></i>
    <div class="text">Standard</div>
    <div class="menu">
      <div class="item" data-value="none">---</div>
      {{#each values}}
        {{#if @key}}
        <div data-value="{{this}}" class="item">
          {{@key}}
        </div>
        {{else}}
        <div data-value="{{this}}" class="item">
          {{uppercase this}}
        </div>
        {{/if}}
      {{/each}}
    </div>
  </div>
</div>
</script>

</html>