extends ../index.jade

block sidebar
  div.sidebar-wrapper
    aside.sidebar
      != partial("../../_sidebar-header")
      != partial("../_examples-sidebar-content")

block content
  != partial("./serialize")
  != partial("../_components", {code: partial("./components"), conditions: '1', components: '1', instances: '5'})

  div.app-wrapper

    small active filter
    div.active-filter

    small info
    div.example-info-wrapper
      pre
        code.hljs.markdown.examples-info

    small controls
    div.controls
      button.randomize Randomize
      button.serialize Serialize
      button.save Save to localStorage
      button.clear Remove from localStorage

    small .serialized-output
    pre.serialized-output

    small .component-area--main
    div.component-area.component-area--main

block scripts
  script(src="./components/ReorderComponent.js")
  script(src="./components.js")
  script(src="./app/app.js")
  script.
    $(document).ready(function () {
      new app.Filter({
        el: '.app-wrapper'
      });
    });

