extends ../../layouts/LayoutComponent

append content

  +PageHeader({title: 'Search'})
    p.mt-2 #{name} uses <b>Fuzzy search</b> for search functionality. An autocomplete search dropdown with Fuzzy Search feature.
    a(href='https://listjs.com/docs/plugins/fuzzysearch/' target='_blank').btn.btn-link.ps-0.btn-sm  Fuzzy Search Documentation
      span.fas.fa-chevron-right.ms-1.fs-11


  +ComponentCard({
    title: 'Implementation',
    anchor: true,
  }).mb-3
    ul.bullet-inside.ps-0.my-3
      li Wrap your search area with 
        code .search-box 
        | class
      li Add 
        code .search-input 
        | to input field to trigger dropdown on focus.
      li Add 
        code data-bs-toggle="search" 
        | in 
        code form 
        | element to enable dropdown behavior.
      li Add 
        code data-dismiss="search" 
        | to close dropdown on button click
      li To enable Fuzzy Search on search box add 
        code .fuzzy-search 
        | class in input field and follow the instruction of 
        a(href=`${CWD}${paths['advance-tables']}`) Advance Tables

  +ComponentCard({
    title: 'Example of Search',
    anchor: true,
  })
    +Search('Search...')