extends ../_custom_layout.jade

block header
  button.menu-toggle
    span.menu-text Toggle Menu
    span.menu-icon
      span.lines

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

block content
  h2 Examples

  p Here are some examples of how to use the componentManager. Checkout the project and view the code or inspect it in the browser.

  h3 Features
  ul
    li
      a(href="#{base_url}/examples/hello-world") Hello World
    li
      a(href="#{base_url}/examples/filter-options") Filter options
    li
      a(href="#{base_url}/examples/filter-by-url") Filter by url
    li
      a(href="#{base_url}/examples/filter-by-string") Filter by string
    li
      a(href="#{base_url}/examples/filter-by-conditions") Filter by conditions
    li
      a(href="#{base_url}/examples/filter-by-custom-properties") Filter by custom properties
    li
      a(href="#{base_url}/examples/iframe-components") Iframe Components
    li
      a(href="#{base_url}/examples/reorder-components") Order/Reordercomponents
    li
      a(href="#{base_url}/examples/serialize") Serialize

  h3 Concepts
  ul
    li
      a(href="#{base_url}/examples/multiple-layouts") Multiple layouts
    li
      a(href="#{base_url}/examples/example-app") Example app

  h3 Module loaders
  ul
    li
      a(href="#{base_url}/examples/amd-requirejs") AMD - Requirejs
    li
      a(href="#{base_url}/examples/commonjs-browserify") COMMONJS - Browserify

block common-example-scripts
  script(type="text/template" class="example-component-template").
    <h2>ExampleComponent:
      <span class="example-component__title"><%= id %></span>
    </h2>
    <button class="example-component__toggle-fullsize entypo-resize-full">
      <span>Toggle fullsize</span>
    </button>

    <p>This instance was created from the following instanceDefinition:</p>
    <pre><code><%= instanceDefinition %></code></pre>

    <p>This instance was created with the following arguments passed to the constructor:</p>
    <pre><code>arguments: <%= arguments %></code></pre>

    <div class="component-output"></div>

  script(type="text/template" class="active-filter-template").
    <pre><code><%= activeFilter %></code></pre>

  script(src="#{base_url}/js/vigorjs.componentmanager.js")
  script(type="text/javascript" src="#{base_url}/examples/jquery.flash.js")
  script(type="text/javascript" src="#{base_url}/examples/ExampleComponent.js")
  script(type="text/javascript" src="#{base_url}/examples/example-helpers.js")