extends partials/page-templates/_layout.pug
include partials/mixins-demo/_nav-form.pug
include partials/mixins/_search-filter.pug
include partials/mixins/_form-field.pug

block append variables
  -var active_nav_item = "form"
  -var sidebar = true
  - var page_title = "Search fields"

block content  
  .page__content__block
    h1
      strong Search
      | 
      | fields
    
      h2 Default
      form(novalidate).form
        +form-field("search", "search", "Search")
        .submit
          input(type="submit" value="Submit").button
        
      h2 With hint
      form(novalidate).form
        +form-field("search", "search-hint", "Search", "For what you want to find")
        .submit
          input(type="submit" value="Submit").button   
      
      h2 With inline label
      p Try tabbing through this with your keyboard to reveal an inline submit button when when the button is focused.
      form(novalidate).form
        .form__inline-submit
          +form-field("search", "search-inline", "Search").form__field--inline-label
          input(type="submit" value="Submit").form__inline-submit__button  
      
      h2 With inline label and visually disabled
      form(novalidate).form
        .form__inline-submit
          +form-field("search", "search-inline-disabled", "Search")(disabled="disabled").form__field--inline-label.visually-disabled
          input(type="submit" value="Submit" disabled).form__inline-submit__button    
        
      h2#search-filters.text--pull With filters
      p Label can also be inline, if you like, see below. As is done with the submit button if your try tapping trough the field on your keyboard.
      form(novalidate).form
        .form__inline-submit
          +form-field("search", "search-with-filters", "Product search", "Type a product category, brand or color and press enter to add a filter")
          input(type="submit" value="Submit").form__inline-submit__button   
        .search-filter
          .search-filter__items
            +search-filter("cars")
            +search-filter("volkswagen")
            +search-filter("blue")
            +search-filter("crazy long filter label with a lot of words in it so that it truncates")
        
      h2 Filters with label in front
      p And a clear all filters button.
      form(novalidate).form
        .form__inline-submit
          +form-field("search", "search-inline-filters", "Product search").form__field--inline-label
          input(type="submit" value="Submit").form__inline-submit__button  
        .search-filter
          h3.search-filter__label Your selected filters:
          .search-filter__items
            +search-filter("cars")
            +search-filter("volkswagen")
            +search-filter("blue")
            button(type="button").search-filter__item.search-filter__item--clear-all Clear all
            
      h2 Hint when no filters added yet
      form(novalidate).form
        .form__inline-submit
          +form-field("search", "search-no-filters", "Product search").form__field--inline-label
          input(type="submit" value="Submit").form__inline-submit__button  
        .search-filter
          .search-filter__label.search-filter__label--hint Type a product category, brand or color and press enter to add a filter
      
      h2 When submitting an empty search field
      form(novalidate).form
        .form__inline-submit
          +form-field("search", "search-error", "Product search", null, "Please enter a search query").form__field--inline-label.form-info--error
          input(type="submit" value="Submit").form__inline-submit__button  
        .search-filter
          .search-filter__label.search-filter__label--hint Type a product category, brand or color and press enter to add a filter  
                      
      


block sidebar 

  +form-nav("form-search")