extends ../index.jade

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

block content
  != partial("./filter-options")
  != partial("../_components", {code: partial("./components"), conditions: '0', components: '1', instances: '7'})

  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
      div.options

        p Filter on url:
        label
          input(type="radio" name="url" class="all" value="all" checked)
          | all

        label
          input(type="radio" name="url" class="foo" value="foo/1")
          | foo/1

        label
          input(type="radio" name="url" class="bar" value="bar/1")
          | bar/1

        p Filter on filterString (using includeIfMatch in filter):
        label
          input(type="radio" name="filter-string" class="all" value="none" checked)
          | none

        label
          input(type="radio" name="filter-string" class="foo" value="foo")
          | foo

        label
          input(type="radio" name="filter-string" class="bar" value="bar")
          | bar

        p Options:
        label
          input(type="checkbox" class="add" checked)
          | Add

        label
          input(type="checkbox" class="remove" checked)
          | Remove

        label
          input(type="checkbox" class="merge" checked)
          | Merge

        label
          input(type="checkbox" class="invert")
          | Invert

        label
          input(type="checkbox" class="force-filter-string-matching")
          | ForceFilterStringMatching

      button.refresh Refresh

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

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