extends ../index.jade

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

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

  div.app-wrapper
    div.example-one
      != partial("./filter-string-on-instance-definition")

      small active filter
      div.active-filter

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

      small controls
      div.controls
        button.restore Restore
        button.include-if-string-matches includeIfMatch "first"
        button.exclude-if-string-matches excludeIfMatch "first"
        button.has-to-match-string hasToMatch "first"
        button.cant-match-string cantMatch "first"
        div
          label
            input(type="checkbox" class="force-filter-string-matching")
            | ForceFilterStringMatching


      small .component-area--first-examples
      div.component-area.component-area--first-examples

    div.example-two
      != partial("./filter-string-on-filter")

      small active filter
      div.active-filter

      small info
      div.examples-info

      small controls
      div.controls
        button.restore Restore
        button.update-filter-string-lang-en-gb set filterString to "state=one|lang=en_GB"
        button.update-filter-string-lang-sv-se set filterString to "state=one|lang=sv_SE"
        button.update-filter-string-url set filterString to "state=one|lang=sv_SE|http://www.google.com"

      small .component-area--second-examples
      div.component-area.component-area--second-examples

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